From 3e898fb6fb845f6a9f59cfa88b075faa1ac03e5f Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Tue, 5 Jan 2021 19:41:29 +0200
Subject: [PATCH 1/7] Support Material-UI tree
---
packages/core/src/hooks/use_ref_height.js | 13 +
packages/core/src/items/items.js | 17 ++
packages/core/src/styles/styles.js | 2 +-
packages/core/src/tree.js | 22 +-
.../src/{ => tree_container}/treeStyle.js | 0
.../core/src/tree_container/tree_container.js | 17 ++
packages/docs/stories/core.stories.js | 45 +++-
packages/material_ui_tree/package.json | 22 ++
.../material_ui_tree/src/header/header.js | 26 ++
packages/material_ui_tree/src/index.js | 3 +
packages/material_ui_tree/src/input/input.js | 39 +++
.../material_ui_tree/src/item/basic_item.js | 8 +
packages/material_ui_tree/src/item/item.js | 38 +++
.../src/item/searched_item.js | 37 +++
packages/material_ui_tree/src/items/items.js | 21 ++
.../material_ui_tree/src/material_ui_tree.js | 40 +++
.../src/no_results/no_results.js | 24 ++
.../src/tree_container/tree_container.js | 25 ++
yarn.lock | 246 +++++++++++++++++-
19 files changed, 627 insertions(+), 18 deletions(-)
create mode 100644 packages/core/src/hooks/use_ref_height.js
create mode 100644 packages/core/src/items/items.js
rename packages/core/src/{ => tree_container}/treeStyle.js (100%)
create mode 100644 packages/core/src/tree_container/tree_container.js
create mode 100644 packages/material_ui_tree/package.json
create mode 100644 packages/material_ui_tree/src/header/header.js
create mode 100644 packages/material_ui_tree/src/index.js
create mode 100644 packages/material_ui_tree/src/input/input.js
create mode 100644 packages/material_ui_tree/src/item/basic_item.js
create mode 100644 packages/material_ui_tree/src/item/item.js
create mode 100644 packages/material_ui_tree/src/item/searched_item.js
create mode 100644 packages/material_ui_tree/src/items/items.js
create mode 100644 packages/material_ui_tree/src/material_ui_tree.js
create mode 100644 packages/material_ui_tree/src/no_results/no_results.js
create mode 100644 packages/material_ui_tree/src/tree_container/tree_container.js
diff --git a/packages/core/src/hooks/use_ref_height.js b/packages/core/src/hooks/use_ref_height.js
new file mode 100644
index 0000000..5bc28b0
--- /dev/null
+++ b/packages/core/src/hooks/use_ref_height.js
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+const useTreeHeight = ({ ref }) => {
+ const [treeHeight, setTreeHeight] = useState(0);
+
+ useEffect(() => {
+ ref.current && setTreeHeight(ref.current.getBoundingClientRect().height);
+ }, [ref]);
+
+ return treeHeight;
+};
+
+export default useTreeHeight;
diff --git a/packages/core/src/items/items.js b/packages/core/src/items/items.js
new file mode 100644
index 0000000..f8d80d1
--- /dev/null
+++ b/packages/core/src/items/items.js
@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import React from "react";
+
+const ItemsRenderer = props => {
+ const {
+ getStyles,
+ children
+ } = props;
+ return (
+ <div css={getStyles("items", props)}>
+ {children}
+ </div>
+ );
+};
+
+export default ItemsRenderer;
diff --git a/packages/core/src/styles/styles.js b/packages/core/src/styles/styles.js
index 0617f74..d3e5669 100644
--- a/packages/core/src/styles/styles.js
+++ b/packages/core/src/styles/styles.js
@@ -1,4 +1,4 @@
-import treeCss from "../treeStyle";
+import treeCss from "../tree_container/treeStyle";
import {
wrapperCss as headerWrapperCss,
backIconCss as headerBackIconCss
diff --git a/packages/core/src/tree.js b/packages/core/src/tree.js
index 6151c33..d383ff9 100644
--- a/packages/core/src/tree.js
+++ b/packages/core/src/tree.js
@@ -1,6 +1,6 @@
/** @jsx jsx */
import { jsx } from "@emotion/core";
-import React from "react";
+import React, { useRef } from "react";
import { defaultStyles } from "./styles/styles";
import ItemDefault from "./item/item";
@@ -10,15 +10,16 @@ import NoResultsDefault from "./no_results/no_results";
import useLeavesManager from "./hooks/use_leaves_manager";
import useItemCallbacks from "./hooks/use_item_callbacks";
+import TreeContainerRenderer from "./tree_container/tree_container";
+import ItemsRenderer from "./items/items";
+import useTreeHeight from "./hooks/use_ref_height";
const Tree = props => {
const {
structure = [],
title,
onSelect,
- className,
noResultsText = "No matching results",
- styles,
headerRenderer: Header = HeaderDefault,
backIconRenderer,
inputRenderer: Input = InputDefault,
@@ -26,7 +27,9 @@ const Tree = props => {
noResultsRenderer: NoResults = NoResultsDefault,
noResultsIconRenderer,
itemRenderer: Item = ItemDefault,
- forwardIconRenderer
+ itemsRenderer: Items = ItemsRenderer,
+ forwardIconRenderer,
+ treeContainerRenderer: TreeContainer = TreeContainerRenderer
} = props;
const getStyles = (key, props = {}) => {
@@ -36,6 +39,9 @@ const Tree = props => {
return custom ? custom(base, props) : base;
};
+ const ref = useRef();
+ const treeHeight = useTreeHeight({ ref });
+
const { onClick, onBackClick, currentDepth, parents } = useItemCallbacks(
onSelect
);
@@ -47,7 +53,7 @@ const Tree = props => {
});
return (
- <div css={getStyles("tree", props)}>
+ <TreeContainer getStyles={getStyles} innerRef={ref}>
<Header
parents={parents}
title={title}
@@ -63,7 +69,7 @@ const Tree = props => {
setSearchTerm={setSearchTerm}
inputIconRenderer={inputIconRenderer}
/>
- <div css={getStyles("items", props)}>
+ <Items getStyles={getStyles} treeHeight={treeHeight}>
{leaves &&
leaves.length > 0 &&
leaves.map(item => (
@@ -82,8 +88,8 @@ const Tree = props => {
noResultsIconRenderer={noResultsIconRenderer}
/>
)}
- </div>
- </div>
+ </Items>
+ </TreeContainer>
);
};
diff --git a/packages/core/src/treeStyle.js b/packages/core/src/tree_container/treeStyle.js
similarity index 100%
rename from packages/core/src/treeStyle.js
rename to packages/core/src/tree_container/treeStyle.js
diff --git a/packages/core/src/tree_container/tree_container.js b/packages/core/src/tree_container/tree_container.js
new file mode 100644
index 0000000..f1d745d
--- /dev/null
+++ b/packages/core/src/tree_container/tree_container.js
@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import React from "react";
+
+const TreeContainerRenderer = props => {
+ const {
+ getStyles,
+ children
+ } = props;
+ return (
+ <div css={getStyles("tree", props)}>
+ {children}
+ </div>
+ );
+};
+
+export default TreeContainerRenderer;
diff --git a/packages/docs/stories/core.stories.js b/packages/docs/stories/core.stories.js
index 76082af..e29caf6 100644
--- a/packages/docs/stories/core.stories.js
+++ b/packages/docs/stories/core.stories.js
@@ -1,9 +1,21 @@
import React from "react";
+import MaterialUITree from "@kenshooui/material_ui_tree";
import Tree from "@kenshooui/react-tree";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useStyles = makeStyles({
+ root: {
+ display: "flex",
+ flexDirection: "row"
+ },
+ tree: {
+ padding: 20
+ }
+});
export default {
title: "Tree",
- component: Tree
+ component: MaterialUITree
};
const structure = [
@@ -29,13 +41,30 @@ const structure = [
["Keywords", "one level"]
];
-export const Basic = () => (
- <Tree
- structure={structure}
- title={"Choose an item"}
- onSelect={item => alert(item)}
- />
-);
+export const Basic = () => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <div className={classes.tree}>
+ <MaterialUITree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ width={300}
+ height={400}
+ />
+ </div>
+ <div className={classes.tree}>
+ <Tree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ />
+ </div>
+ </div>
+ );
+};
Basic.story = {
name: "basic configuration"
diff --git a/packages/material_ui_tree/package.json b/packages/material_ui_tree/package.json
new file mode 100644
index 0000000..e5880bb
--- /dev/null
+++ b/packages/material_ui_tree/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "@kenshooui/material_ui_tree",
+ "version": "1.0.0",
+ "main": "dist/material_ui_tree.cjs.js",
+ "module": "dist/material_ui_tree.esm.js",
+ "scripts": {},
+ "repository": "https://github.com/kenshoo/react-tree.git",
+ "author": "ui@kenshoo.com",
+ "license": "MIT",
+ "peerDependencies": {
+ "@kenshooui/react-tree": "^1.0.0",
+ "react": "^16.12.0"
+ },
+ "devDependencies": {
+ "react": "^16.12.0"
+ },
+ "dependencies": {
+ "@material-ui/core": "^4.11.2",
+ "@material-ui/icons": "^4.11.2",
+ "classnames": "^2.2.6"
+ }
+}
diff --git a/packages/material_ui_tree/src/header/header.js b/packages/material_ui_tree/src/header/header.js
new file mode 100644
index 0000000..17adc61
--- /dev/null
+++ b/packages/material_ui_tree/src/header/header.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { ChevronLeft } from "@material-ui/icons";
+import Typography from "@material-ui/core/Typography";
+import CardActions from "@material-ui/core/CardActions";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+
+const MaterialUIHeader = ({ parents = [], onClick, title = "" }) => {
+ return (
+ <>
+ <CardActions>
+ {parents.length > 0 && (
+ <IconButton size={"small"}>
+ <ChevronLeft onClick={onClick} />
+ </IconButton>
+ )}
+ <Typography variant="subtitle1">
+ {parents.length > 0 ? parents[parents.length - 1] : title}
+ </Typography>
+ </CardActions>
+ <Divider />
+ </>
+ );
+};
+
+export default MaterialUIHeader;
diff --git a/packages/material_ui_tree/src/index.js b/packages/material_ui_tree/src/index.js
new file mode 100644
index 0000000..012b4c7
--- /dev/null
+++ b/packages/material_ui_tree/src/index.js
@@ -0,0 +1,3 @@
+import MaterialUITree from "./material_ui_tree";
+
+export default MaterialUITree;
diff --git a/packages/material_ui_tree/src/input/input.js b/packages/material_ui_tree/src/input/input.js
new file mode 100644
index 0000000..f7ca737
--- /dev/null
+++ b/packages/material_ui_tree/src/input/input.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { Clear, Search } from "@material-ui/icons";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import InputBase from "@material-ui/core/InputBase";
+import Divider from "@material-ui/core/Divider";
+import CardActions from "@material-ui/core/CardActions";
+import IconButton from "@material-ui/core/IconButton";
+
+const MaterialUIInputRenderer = ({
+ searchTerm = "",
+ setSearchTerm = () => {}
+}) => {
+ return (
+ <>
+ <CardActions>
+ <InputBase
+ id="input-with-icon-adornment"
+ value={searchTerm}
+ onChange={e => setSearchTerm(e.target.value)}
+ startAdornment={
+ <InputAdornment position="start">
+ <Search />
+ </InputAdornment>
+ }
+ endAdornment={
+ searchTerm !== "" && (
+ <IconButton size={"small"}>
+ <Clear onClick={() => setSearchTerm("")} />
+ </IconButton>
+ )
+ }
+ />
+ </CardActions>
+ <Divider />
+ </>
+ );
+};
+
+export default MaterialUIInputRenderer;
diff --git a/packages/material_ui_tree/src/item/basic_item.js b/packages/material_ui_tree/src/item/basic_item.js
new file mode 100644
index 0000000..2b809ff
--- /dev/null
+++ b/packages/material_ui_tree/src/item/basic_item.js
@@ -0,0 +1,8 @@
+import React from "react";
+import ListItemText from "@material-ui/core/ListItemText";
+
+const BasicItem = ({ label = "" }) => {
+ return <ListItemText primary={label} />;
+};
+
+export default BasicItem;
diff --git a/packages/material_ui_tree/src/item/item.js b/packages/material_ui_tree/src/item/item.js
new file mode 100644
index 0000000..b4a3d74
--- /dev/null
+++ b/packages/material_ui_tree/src/item/item.js
@@ -0,0 +1,38 @@
+import React from "react";
+import BasicItem from "./basic_item";
+import { ChevronRight } from "@material-ui/icons";
+import ListItem from "@material-ui/core/ListItem";
+import SearchedItem from "./searched_item";
+
+const MaterialUIItemRenderer = props => {
+ const {
+ searchTerm = "",
+ item: { item, hasChild, currentDepth } = {
+ item: [""],
+ hasChild: false,
+ currentDepth: 0
+ },
+ onClick = () => {}
+ } = props;
+ const searchIndex = item[item.length - 1]
+ .toLowerCase()
+ .indexOf(searchTerm.trim().toLowerCase());
+ return (
+ <ListItem
+ button
+ onClick={() => onClick(item[currentDepth], item, hasChild)}
+ >
+ {searchTerm !== "" && (
+ <SearchedItem
+ item={item}
+ searchIndex={searchIndex}
+ searchTerm={searchTerm.trim()}
+ />
+ )}
+ {searchTerm === "" && <BasicItem label={item[currentDepth]} />}
+ {hasChild && <ChevronRight />}
+ </ListItem>
+ );
+};
+
+export default MaterialUIItemRenderer;
diff --git a/packages/material_ui_tree/src/item/searched_item.js b/packages/material_ui_tree/src/item/searched_item.js
new file mode 100644
index 0000000..82def86
--- /dev/null
+++ b/packages/material_ui_tree/src/item/searched_item.js
@@ -0,0 +1,37 @@
+import React from "react";
+import ListItemText from "@material-ui/core/ListItemText";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles(() => ({
+ boldText: {
+ fontWeight: "bold"
+ }
+}));
+
+const SearchedItem = ({ item = [""], searchIndex = 0, searchTerm = "" }) => {
+ const classes = useStyles();
+ const leaf = item[item.length - 1];
+ const parents = item.slice(0, item.length - 1).join(" / ");
+
+ return (
+ <ListItemText
+ primary={
+ <>
+ <Typography component="span">
+ {leaf.substring(0, searchIndex)}
+ </Typography>
+ <Typography component="span" className={classes.boldText}>
+ {leaf.substring(searchIndex, searchIndex + searchTerm.length)}
+ </Typography>
+ <Typography component="span">
+ {leaf.substring(searchIndex + searchTerm.length)}
+ </Typography>
+ </>
+ }
+ secondary={parents}
+ />
+ );
+};
+
+export default SearchedItem;
diff --git a/packages/material_ui_tree/src/items/items.js b/packages/material_ui_tree/src/items/items.js
new file mode 100644
index 0000000..150b9f3
--- /dev/null
+++ b/packages/material_ui_tree/src/items/items.js
@@ -0,0 +1,21 @@
+import React from "react";
+import List from "@material-ui/core/List";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useStyles = makeStyles(({ treeHeight }) => ({
+ root: {
+ overflow: "auto",
+ maxHeight: treeHeight - 48 - 42
+ }
+}));
+
+const MaterialUIItemsRenderer = ({ children, treeHeight }) => {
+ const classes = useStyles({ treeHeight });
+ return (
+ <List className={classes.root} component="nav">
+ {children}
+ </List>
+ );
+};
+
+export default MaterialUIItemsRenderer;
diff --git a/packages/material_ui_tree/src/material_ui_tree.js b/packages/material_ui_tree/src/material_ui_tree.js
new file mode 100644
index 0000000..42b0f60
--- /dev/null
+++ b/packages/material_ui_tree/src/material_ui_tree.js
@@ -0,0 +1,40 @@
+import React from "react";
+import Tree from "@kenshooui/react-tree";
+import MaterialUIItemRenderer from "./item/item";
+import MaterialUIInputRenderer from "./input/input";
+import MaterialUIContainerRenderer from "./tree_container/tree_container";
+import MaterialUIHeader from "./header/header";
+import MaterialUIItemsRenderer from "./items/items";
+import MaterialUINoResults from "./no_results/no_results";
+
+const MaterialUITree = ({
+ structure = [],
+ title,
+ onSelect,
+ width,
+ height,
+ treeContainerRenderer = MaterialUIContainerRenderer,
+ headerRenderer = MaterialUIHeader,
+ inputRenderer = MaterialUIInputRenderer,
+ itemRenderer = MaterialUIItemRenderer,
+ itemsRenderer = MaterialUIItemsRenderer,
+ noResultsRenderer = MaterialUINoResults
+}) => {
+ return (
+ <Tree
+ structure={structure}
+ title={title}
+ onSelect={onSelect}
+ treeContainerRenderer={props =>
+ treeContainerRenderer({ ...props, width, height })
+ }
+ headerRenderer={headerRenderer}
+ inputRenderer={inputRenderer}
+ itemRenderer={itemRenderer}
+ itemsRenderer={itemsRenderer}
+ noResultsRenderer={noResultsRenderer}
+ />
+ );
+};
+
+export default MaterialUITree;
diff --git a/packages/material_ui_tree/src/no_results/no_results.js b/packages/material_ui_tree/src/no_results/no_results.js
new file mode 100644
index 0000000..3b59af3
--- /dev/null
+++ b/packages/material_ui_tree/src/no_results/no_results.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { Warning } from "@material-ui/icons";
+import Typography from "@material-ui/core/Typography";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+
+const useStyles = makeStyles({
+ root: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center"
+ }
+});
+
+const MaterialUINoResults = ({ text }) => {
+ const classes = useStyles();
+ return (
+ <div className={classes.root}>
+ <Warning fontSize="large" color="disabled" />
+ <Typography variant="subtitle1">{text}</Typography>
+ </div>
+ );
+};
+
+export default MaterialUINoResults;
diff --git a/packages/material_ui_tree/src/tree_container/tree_container.js b/packages/material_ui_tree/src/tree_container/tree_container.js
new file mode 100644
index 0000000..238255a
--- /dev/null
+++ b/packages/material_ui_tree/src/tree_container/tree_container.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+
+const DEFAULT_WIDTH = 230;
+const DEFAULT_HEIGHT = 300;
+const PIXEL_SUFFIX = "px";
+
+const useStyles = makeStyles(({ width, height }) => ({
+ root: {
+ width: (width || DEFAULT_WIDTH) + PIXEL_SUFFIX,
+ height: (height || DEFAULT_HEIGHT) + PIXEL_SUFFIX
+ }
+}));
+
+const MaterialUIContainerRenderer = ({ children, width, height }) => {
+ const classes = useStyles({ width, height });
+ return (
+ <Card raised={true} className={classes.root}>
+ {children}
+ </Card>
+ );
+};
+
+export default MaterialUIContainerRenderer;
diff --git a/yarn.lock b/yarn.lock
index 7cdff2f..0b6409b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -865,6 +865,13 @@
dependencies:
regenerator-runtime "^0.13.2"
+"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+ integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/template@^7.7.4", "@babel/template@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@@ -979,6 +986,11 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
+"@emotion/hash@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+ integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
"@emotion/is-prop-valid@0.8.6":
version "0.8.6"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
@@ -1987,6 +1999,77 @@
npmlog "^4.1.2"
write-file-atomic "^2.3.0"
+"@material-ui/core@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.2.tgz#f8276dfa40d88304e6ceb98962af73803d27d42d"
+ integrity sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/styles" "^4.11.2"
+ "@material-ui/system" "^4.11.2"
+ "@material-ui/types" "^5.1.0"
+ "@material-ui/utils" "^4.11.2"
+ "@types/react-transition-group" "^4.2.0"
+ clsx "^1.0.4"
+ hoist-non-react-statics "^3.3.2"
+ popper.js "1.16.1-lts"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+ react-transition-group "^4.4.0"
+
+"@material-ui/icons@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+ integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+
+"@material-ui/styles@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
+ integrity sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@emotion/hash" "^0.8.0"
+ "@material-ui/types" "^5.1.0"
+ "@material-ui/utils" "^4.11.2"
+ clsx "^1.0.4"
+ csstype "^2.5.2"
+ hoist-non-react-statics "^3.3.2"
+ jss "^10.0.3"
+ jss-plugin-camel-case "^10.0.3"
+ jss-plugin-default-unit "^10.0.3"
+ jss-plugin-global "^10.0.3"
+ jss-plugin-nested "^10.0.3"
+ jss-plugin-props-sort "^10.0.3"
+ jss-plugin-rule-value-function "^10.0.3"
+ jss-plugin-vendor-prefixer "^10.0.3"
+ prop-types "^15.7.2"
+
+"@material-ui/system@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.2.tgz#7f0a754bba3673ed5fdbfa02fe438096c104b1f6"
+ integrity sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.11.2"
+ csstype "^2.5.2"
+ prop-types "^15.7.2"
+
+"@material-ui/types@^5.1.0":
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+ integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+ integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2906,6 +2989,13 @@
dependencies:
"@types/react" "*"
+"@types/react-transition-group@^4.2.0":
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+ integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*":
version "16.9.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.21.tgz#99e274e2ecfab6bb93920e918341daa3198b348d"
@@ -4682,6 +4772,11 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+clsx@^1.0.4:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+ integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
co@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -5198,6 +5293,14 @@ css-tree@1.0.0-alpha.37:
mdn-data "2.0.4"
source-map "^0.6.1"
+css-vendor@^2.0.8:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+ integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+ dependencies:
+ "@babel/runtime" "^7.8.3"
+ is-in-browser "^1.0.2"
+
css-what@2.1:
version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -5249,6 +5352,16 @@ csstype@^2.2.0, csstype@^2.5.7:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+csstype@^2.5.2:
+ version "2.6.14"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de"
+ integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
+
+csstype@^3.0.2:
+ version "3.0.5"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+ integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -5574,6 +5687,14 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
+dom-helpers@^5.0.1:
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+ integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+ dependencies:
+ "@babel/runtime" "^7.8.7"
+ csstype "^3.0.2"
+
dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7166,7 +7287,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7328,6 +7449,11 @@ humanize-ms@^1.2.1:
dependencies:
ms "^2.0.0"
+hyphenate-style-name@^1.0.3:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+ integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -7444,6 +7570,13 @@ imurmurhash@^0.1.4:
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+indefinite-observable@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-2.0.1.tgz#574af29bfbc17eb5947793797bddc94c9d859400"
+ integrity sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==
+ dependencies:
+ symbol-observable "1.2.0"
+
indent-string@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
@@ -7832,6 +7965,11 @@ is-hexadecimal@^1.0.0:
resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+ integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
is-map@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
@@ -8686,6 +8824,77 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
+jss-plugin-camel-case@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz#4b0a9c85e65e5eb72cbfba59373686c604d88f72"
+ integrity sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ hyphenate-style-name "^1.0.3"
+ jss "10.5.0"
+
+jss-plugin-default-unit@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz#e9f2e89741b0118ba15d52b4c13bda2b27262373"
+ integrity sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.5.0"
+
+jss-plugin-global@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz#eb357ccd35cb4894277fb2117a78d1e498668ad6"
+ integrity sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.5.0"
+
+jss-plugin-nested@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz#790c506432a23a63c71ceb5044e2ac85f0958702"
+ integrity sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.5.0"
+ tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz#5bcc3bd8e68cd3e2dafb47d67db28fd5a4fcf102"
+ integrity sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.5.0"
+
+jss-plugin-rule-value-function@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz#60ee8240dfe60418e1ba4729adee893cbe9be7a3"
+ integrity sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.5.0"
+ tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz#01f04cfff31f43f153f5d71972f5800b10a2eb84"
+ integrity sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ css-vendor "^2.0.8"
+ jss "10.5.0"
+
+jss@10.5.0, jss@^10.0.3:
+ version "10.5.0"
+ resolved "https://registry.yarnpkg.com/jss/-/jss-10.5.0.tgz#0c2de8a29874b2dc8162ab7f34ef6573a87d9dd3"
+ integrity sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ csstype "^3.0.2"
+ indefinite-observable "^2.0.1"
+ is-in-browser "^1.1.3"
+ tiny-warning "^1.0.2"
+
kind-of@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
@@ -10641,6 +10850,11 @@ polished@^3.3.1:
dependencies:
"@babel/runtime" "^7.6.3"
+popper.js@1.16.1-lts:
+ version "1.16.1-lts"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+ integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
popper.js@^1.14.4, popper.js@^1.14.7:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -11253,6 +11467,11 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+"react-is@^16.8.0 || ^17.0.0":
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+ integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -11318,6 +11537,16 @@ react-textarea-autosize@^7.1.0:
"@babel/runtime" "^7.1.2"
prop-types "^15.6.0"
+react-transition-group@^4.4.0:
+ version "4.4.1"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+ integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
react@^16.12.0, react@^16.8.3:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@@ -11552,6 +11781,11 @@ regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+regenerator-runtime@^0.13.4:
+ version "0.13.7"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+ integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
regenerator-transform@^0.14.0:
version "0.14.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -12837,6 +13071,11 @@ svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
+symbol-observable@1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+ integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
symbol-tree@^3.2.2:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -13041,6 +13280,11 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+tiny-warning@^1.0.2:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+ integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
From dfcdbc07dc64368901552ce05af83df76d15c099 Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Tue, 5 Jan 2021 20:02:49 +0200
Subject: [PATCH 2/7] failed trial to pass ref
---
.../material_ui_tree/src/tree_container/tree_container.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/material_ui_tree/src/tree_container/tree_container.js b/packages/material_ui_tree/src/tree_container/tree_container.js
index 238255a..d049936 100644
--- a/packages/material_ui_tree/src/tree_container/tree_container.js
+++ b/packages/material_ui_tree/src/tree_container/tree_container.js
@@ -13,10 +13,14 @@ const useStyles = makeStyles(({ width, height }) => ({
}
}));
-const MaterialUIContainerRenderer = ({ children, width, height }) => {
+const MaterialUIContainerRenderer = props => {
+ const { children, width, height } = props;
const classes = useStyles({ width, height });
+ const Container = React.forwardRef((props, ref) => (
+ <div {...props} ref={ref} />
+ ));
return (
- <Card raised={true} className={classes.root}>
+ <Card raised={true} className={classes.root} component={Container}>
{children}
</Card>
);
From d66869d0cf13c9cde78f377bf8aa3587cecb282d Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Tue, 5 Jan 2021 20:22:30 +0200
Subject: [PATCH 3/7] fix paddings
---
packages/material_ui_tree/src/header/header.js | 10 +++++++++-
packages/material_ui_tree/src/input/input.js | 10 +++++++++-
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/packages/material_ui_tree/src/header/header.js b/packages/material_ui_tree/src/header/header.js
index 17adc61..4d67482 100644
--- a/packages/material_ui_tree/src/header/header.js
+++ b/packages/material_ui_tree/src/header/header.js
@@ -4,11 +4,19 @@ import Typography from "@material-ui/core/Typography";
import CardActions from "@material-ui/core/CardActions";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+ root: {
+ padding: "8px 16px"
+ }
+}));
const MaterialUIHeader = ({ parents = [], onClick, title = "" }) => {
+ const classes = useStyles();
return (
<>
- <CardActions>
+ <CardActions className={classes.root}>
{parents.length > 0 && (
<IconButton size={"small"}>
<ChevronLeft onClick={onClick} />
diff --git a/packages/material_ui_tree/src/input/input.js b/packages/material_ui_tree/src/input/input.js
index f7ca737..a5f41f2 100644
--- a/packages/material_ui_tree/src/input/input.js
+++ b/packages/material_ui_tree/src/input/input.js
@@ -5,14 +5,22 @@ import InputBase from "@material-ui/core/InputBase";
import Divider from "@material-ui/core/Divider";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+ root: {
+ padding: "8px 16px"
+ }
+}));
const MaterialUIInputRenderer = ({
searchTerm = "",
setSearchTerm = () => {}
}) => {
+ const classes = useStyles();
return (
<>
- <CardActions>
+ <CardActions className={classes.root}>
<InputBase
id="input-with-icon-adornment"
value={searchTerm}
From 62dfb80d455096efdd21bd9e26a170fa9fadda8a Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Wed, 6 Jan 2021 14:42:25 +0200
Subject: [PATCH 4/7] changes after review
---
packages/core/src/header/header.js | 3 +-
.../core/src/hooks/use_components_refs.js | 16 +++++
packages/core/src/hooks/use_leaves_manager.js | 4 +-
packages/core/src/hooks/use_ref_height.js | 13 ----
packages/core/src/input/input.js | 7 +-
packages/core/src/items/itemsStyle.js | 4 +-
.../core/src/no_results/noResultsStyle.js | 5 +-
packages/core/src/styles/styles.js | 4 +-
packages/core/src/tree.js | 48 +++++++++----
.../{treeStyle.js => treeContainerStyle.js} | 6 +-
.../core/src/tree_container/tree_container.js | 9 +--
packages/docs/stories/core.stories.js | 68 +++++++++++++++----
packages/material_ui_tree/package.json | 16 ++---
.../material_ui_tree/src/header/header.js | 6 +-
packages/material_ui_tree/src/input/input.js | 14 ++--
packages/material_ui_tree/src/item/item.js | 4 +-
packages/material_ui_tree/src/items/items.js | 15 ++--
.../material_ui_tree/src/material_ui_tree.js | 6 +-
.../src/no_results/no_results.js | 12 +++-
.../src/tree_container/tree_container.js | 19 ++----
20 files changed, 175 insertions(+), 104 deletions(-)
create mode 100644 packages/core/src/hooks/use_components_refs.js
delete mode 100644 packages/core/src/hooks/use_ref_height.js
rename packages/core/src/tree_container/{treeStyle.js => treeContainerStyle.js} (75%)
diff --git a/packages/core/src/header/header.js b/packages/core/src/header/header.js
index cfdbb5b..4451d6c 100644
--- a/packages/core/src/header/header.js
+++ b/packages/core/src/header/header.js
@@ -6,6 +6,7 @@ export const BackIconRenderer = () => <>⬅️</>;
const Header = props => {
const {
+ headerRef,
parents = [],
onClick,
title = "",
@@ -13,7 +14,7 @@ const Header = props => {
backIconRenderer: BackIcon = BackIconRenderer
} = props;
return (
- <div css={getStyles("header", props)}>
+ <div ref={headerRef} css={getStyles("header", props)}>
{parents.length > 0 && (
<>
<span css={getStyles("headerBackIcon", props)} onClick={onClick}>
diff --git a/packages/core/src/hooks/use_components_refs.js b/packages/core/src/hooks/use_components_refs.js
new file mode 100644
index 0000000..5f1db6d
--- /dev/null
+++ b/packages/core/src/hooks/use_components_refs.js
@@ -0,0 +1,16 @@
+import { useRef } from "react";
+
+const useComponentsRefs = () => {
+ const containerRef = useRef();
+ const headerRef = useRef();
+ const inputRef = useRef();
+
+ const itemsHeight =
+ containerRef?.current?.clientHeight -
+ headerRef?.current?.clientHeight -
+ inputRef?.current?.clientHeight;
+
+ return { containerRef, headerRef, inputRef, itemsHeight };
+};
+
+export default useComponentsRefs;
diff --git a/packages/core/src/hooks/use_leaves_manager.js b/packages/core/src/hooks/use_leaves_manager.js
index 6a5b219..e75b91c 100644
--- a/packages/core/src/hooks/use_leaves_manager.js
+++ b/packages/core/src/hooks/use_leaves_manager.js
@@ -10,6 +10,8 @@ const useLeavesManager = ({ structure, parents, currentDepth }) => {
const [searchTerm, setSearchTerm] = useState("");
const [leaves, setLeaves] = useState([]);
+ const onInputChange = event => setSearchTerm(event?.target?.value || "");
+
useEffect(() => {
const leaves = structure
.filter(
@@ -22,7 +24,7 @@ const useLeavesManager = ({ structure, parents, currentDepth }) => {
setLeaves(removeDuplicateLeafs(leaves));
}, [searchTerm, parents, currentDepth]);
- return { searchTerm, setSearchTerm, leaves };
+ return { searchTerm, setSearchTerm, onInputChange, leaves };
};
export default useLeavesManager;
diff --git a/packages/core/src/hooks/use_ref_height.js b/packages/core/src/hooks/use_ref_height.js
deleted file mode 100644
index 5bc28b0..0000000
--- a/packages/core/src/hooks/use_ref_height.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useTreeHeight = ({ ref }) => {
- const [treeHeight, setTreeHeight] = useState(0);
-
- useEffect(() => {
- ref.current && setTreeHeight(ref.current.getBoundingClientRect().height);
- }, [ref]);
-
- return treeHeight;
-};
-
-export default useTreeHeight;
diff --git a/packages/core/src/input/input.js b/packages/core/src/input/input.js
index 7ab5455..4a53078 100644
--- a/packages/core/src/input/input.js
+++ b/packages/core/src/input/input.js
@@ -6,20 +6,21 @@ export const InputIconRenderer = () => <>🔍</>;
const Input = props => {
const {
+ inputRef,
searchTerm,
- setSearchTerm,
+ onInputChange,
getStyles,
inputIconRenderer: InputIcon = InputIconRenderer
} = props;
return (
- <div css={getStyles("inputWrapper", props)}>
+ <div ref={inputRef} css={getStyles("inputWrapper", props)}>
<span css={getStyles("searchInput", props)}>
<InputIcon />
</span>
<input
css={getStyles("input", props)}
value={searchTerm}
- onChange={e => setSearchTerm(e.target.value)}
+ onChange={onInputChange}
/>
</div>
);
diff --git a/packages/core/src/items/itemsStyle.js b/packages/core/src/items/itemsStyle.js
index 2b74e6a..06d91d9 100644
--- a/packages/core/src/items/itemsStyle.js
+++ b/packages/core/src/items/itemsStyle.js
@@ -1,4 +1,4 @@
-export default () => ({
- maxHeight: "203px",
+export default ({ itemsHeight }) => ({
+ maxHeight: itemsHeight,
overflowY: "auto"
});
diff --git a/packages/core/src/no_results/noResultsStyle.js b/packages/core/src/no_results/noResultsStyle.js
index eb567dc..5cd3f21 100644
--- a/packages/core/src/no_results/noResultsStyle.js
+++ b/packages/core/src/no_results/noResultsStyle.js
@@ -1,8 +1,9 @@
-export const css = () => ({
+export const css = ({ itemsHeight }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
- marginTop: "30px"
+ justifyContent: "center",
+ height: itemsHeight
});
export const icon = () => ({
diff --git a/packages/core/src/styles/styles.js b/packages/core/src/styles/styles.js
index d3e5669..bd1435a 100644
--- a/packages/core/src/styles/styles.js
+++ b/packages/core/src/styles/styles.js
@@ -1,4 +1,4 @@
-import treeCss from "../tree_container/treeStyle";
+import containerCss from "../tree_container/treeContainerStyle";
import {
wrapperCss as headerWrapperCss,
backIconCss as headerBackIconCss
@@ -22,7 +22,7 @@ import {
} from "../no_results/noResultsStyle";
export const defaultStyles = {
- tree: treeCss,
+ container: containerCss,
header: headerWrapperCss,
headerBackIcon: headerBackIconCss,
item: itemCss,
diff --git a/packages/core/src/tree.js b/packages/core/src/tree.js
index d383ff9..de7c103 100644
--- a/packages/core/src/tree.js
+++ b/packages/core/src/tree.js
@@ -1,6 +1,6 @@
/** @jsx jsx */
import { jsx } from "@emotion/core";
-import React, { useRef } from "react";
+import React from "react";
import { defaultStyles } from "./styles/styles";
import ItemDefault from "./item/item";
@@ -12,13 +12,19 @@ import useLeavesManager from "./hooks/use_leaves_manager";
import useItemCallbacks from "./hooks/use_item_callbacks";
import TreeContainerRenderer from "./tree_container/tree_container";
import ItemsRenderer from "./items/items";
-import useTreeHeight from "./hooks/use_ref_height";
+import useContainerHeight from "./hooks/use_components_refs";
+
+const DEFAULT_WIDTH = 230;
+const DEFAULT_HEIGHT = 300;
+const PIXEL_SUFFIX = "px";
const Tree = props => {
const {
structure = [],
title,
onSelect,
+ width,
+ height,
noResultsText = "No matching results",
headerRenderer: Header = HeaderDefault,
backIconRenderer,
@@ -39,22 +45,32 @@ const Tree = props => {
return custom ? custom(base, props) : base;
};
- const ref = useRef();
- const treeHeight = useTreeHeight({ ref });
+ const {
+ containerRef,
+ headerRef,
+ inputRef,
+ itemsHeight
+ } = useContainerHeight();
const { onClick, onBackClick, currentDepth, parents } = useItemCallbacks(
onSelect
);
- const { searchTerm, setSearchTerm, leaves } = useLeavesManager({
+ const { searchTerm, onInputChange, leaves } = useLeavesManager({
structure,
parents,
currentDepth
});
return (
- <TreeContainer getStyles={getStyles} innerRef={ref}>
+ <TreeContainer
+ containerRef={containerRef}
+ getStyles={getStyles}
+ width={(width || DEFAULT_WIDTH) + PIXEL_SUFFIX}
+ height={(height || DEFAULT_HEIGHT) + PIXEL_SUFFIX}
+ >
<Header
+ headerRef={headerRef}
parents={parents}
title={title}
onClick={onBackClick}
@@ -64,12 +80,13 @@ const Tree = props => {
{title}
</Header>
<Input
+ inputRef={inputRef}
getStyles={getStyles}
searchTerm={searchTerm}
- setSearchTerm={setSearchTerm}
+ onInputChange={onInputChange}
inputIconRenderer={inputIconRenderer}
/>
- <Items getStyles={getStyles} treeHeight={treeHeight}>
+ <Items getStyles={getStyles} itemsHeight={itemsHeight}>
{leaves &&
leaves.length > 0 &&
leaves.map(item => (
@@ -81,14 +98,15 @@ const Tree = props => {
forwardIconRenderer={forwardIconRenderer}
/>
))}
- {leaves && leaves.length === 0 && (
- <NoResults
- text={noResultsText}
- getStyles={getStyles}
- noResultsIconRenderer={noResultsIconRenderer}
- />
- )}
</Items>
+ {leaves && leaves.length === 0 && (
+ <NoResults
+ itemsHeight={itemsHeight}
+ text={noResultsText}
+ getStyles={getStyles}
+ noResultsIconRenderer={noResultsIconRenderer}
+ />
+ )}
</TreeContainer>
);
};
diff --git a/packages/core/src/tree_container/treeStyle.js b/packages/core/src/tree_container/treeContainerStyle.js
similarity index 75%
rename from packages/core/src/tree_container/treeStyle.js
rename to packages/core/src/tree_container/treeContainerStyle.js
index ea13bcf..c56620f 100644
--- a/packages/core/src/tree_container/treeStyle.js
+++ b/packages/core/src/tree_container/treeContainerStyle.js
@@ -1,6 +1,6 @@
-export default () => ({
- width: "230px",
- height: "280px",
+export default ({ width, height }) => ({
+ width: width,
+ height: height,
backgroundColor: "#F8F9FA",
boxShadow: "0 6px 10px 0 rgba(27, 32, 70, 0.09)",
border: "1px solid #E1E4EB",
diff --git a/packages/core/src/tree_container/tree_container.js b/packages/core/src/tree_container/tree_container.js
index f1d745d..b83173a 100644
--- a/packages/core/src/tree_container/tree_container.js
+++ b/packages/core/src/tree_container/tree_container.js
@@ -3,13 +3,10 @@ import { jsx } from "@emotion/core";
import React from "react";
const TreeContainerRenderer = props => {
- const {
- getStyles,
- children
- } = props;
+ const { containerRef, getStyles, children } = props;
return (
- <div css={getStyles("tree", props)}>
- {children}
+ <div ref={containerRef} css={getStyles("container", props)}>
+ {children}
</div>
);
};
diff --git a/packages/docs/stories/core.stories.js b/packages/docs/stories/core.stories.js
index e29caf6..aaab250 100644
--- a/packages/docs/stories/core.stories.js
+++ b/packages/docs/stories/core.stories.js
@@ -1,21 +1,32 @@
import React from "react";
-import MaterialUITree from "@kenshooui/material_ui_tree";
import Tree from "@kenshooui/react-tree";
+import MaterialUITree from "@kenshooui/material-tree";
import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
- root: {
+ wrapper: {
+ padding: 40,
display: "flex",
- flexDirection: "row"
+ justifyContent: "start",
+ alignItems: "start"
},
- tree: {
- padding: 20
+ item: {
+ display: "flex",
+ alignItems: "center",
+ marginRight: 25,
+ flexDirection: "column"
+ },
+ title: {
+ fontSize: 16,
+ color: "#747070",
+ marginBottom: 16,
+ fontWeight: "bold"
}
});
export default {
title: "Tree",
- component: MaterialUITree
+ component: Tree
};
const structure = [
@@ -43,23 +54,50 @@ const structure = [
export const Basic = () => {
const classes = useStyles();
+ return (
+ <div className={classes.wrapper}>
+ <div className={classes.item}>
+ <div className={classes.title}>Default Dimensions</div>
+ <Tree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ />
+ </div>
+ <div className={classes.item}>
+ <div className={classes.title}>Custom Dimensions</div>
+ <Tree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ width={200}
+ height={200}
+ />
+ </div>
+ </div>
+ );
+};
+export const MaterialTheme = () => {
+ const classes = useStyles();
return (
- <div className={classes.root}>
- <div className={classes.tree}>
+ <div className={classes.wrapper}>
+ <div className={classes.item}>
+ <div className={classes.title}>Default Dimensions</div>
<MaterialUITree
structure={structure}
title={"Choose an item"}
onSelect={item => alert(item)}
- width={300}
- height={400}
/>
</div>
- <div className={classes.tree}>
- <Tree
+ <div className={classes.item}>
+ <div className={classes.title}>Custom Dimensions</div>
+ <MaterialUITree
structure={structure}
title={"Choose an item"}
onSelect={item => alert(item)}
+ width={250}
+ height={350}
/>
</div>
</div>
@@ -67,5 +105,9 @@ export const Basic = () => {
};
Basic.story = {
- name: "basic configuration"
+ name: "Basic configuration"
+};
+
+MaterialTheme.story = {
+ name: "Material Theme"
};
diff --git a/packages/material_ui_tree/package.json b/packages/material_ui_tree/package.json
index e5880bb..1c1859d 100644
--- a/packages/material_ui_tree/package.json
+++ b/packages/material_ui_tree/package.json
@@ -1,22 +1,22 @@
{
- "name": "@kenshooui/material_ui_tree",
+ "name": "@kenshooui/material-tree",
"version": "1.0.0",
- "main": "dist/material_ui_tree.cjs.js",
- "module": "dist/material_ui_tree.esm.js",
+ "main": "dist/material-tree.cjs.js",
+ "module": "dist/material-tree.esm.js",
"scripts": {},
"repository": "https://github.com/kenshoo/react-tree.git",
"author": "ui@kenshoo.com",
"license": "MIT",
"peerDependencies": {
"@kenshooui/react-tree": "^1.0.0",
+ "@material-ui/core": "^4.11.2",
+ "@material-ui/icons": "^4.11.2",
"react": "^16.12.0"
},
"devDependencies": {
- "react": "^16.12.0"
- },
- "dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
- "classnames": "^2.2.6"
- }
+ "react": "^16.12.0"
+ },
+ "dependencies": {}
}
diff --git a/packages/material_ui_tree/src/header/header.js b/packages/material_ui_tree/src/header/header.js
index 4d67482..8033fab 100644
--- a/packages/material_ui_tree/src/header/header.js
+++ b/packages/material_ui_tree/src/header/header.js
@@ -12,10 +12,10 @@ const useStyles = makeStyles(() => ({
}
}));
-const MaterialUIHeader = ({ parents = [], onClick, title = "" }) => {
+const MaterialUIHeader = ({ headerRef, parents = [], onClick, title = "" }) => {
const classes = useStyles();
return (
- <>
+ <div ref={headerRef}>
<CardActions className={classes.root}>
{parents.length > 0 && (
<IconButton size={"small"}>
@@ -27,7 +27,7 @@ const MaterialUIHeader = ({ parents = [], onClick, title = "" }) => {
</Typography>
</CardActions>
<Divider />
- </>
+ </div>
);
};
diff --git a/packages/material_ui_tree/src/input/input.js b/packages/material_ui_tree/src/input/input.js
index a5f41f2..f1fb08c 100644
--- a/packages/material_ui_tree/src/input/input.js
+++ b/packages/material_ui_tree/src/input/input.js
@@ -13,18 +13,20 @@ const useStyles = makeStyles(() => ({
}
}));
+const noop = () => {};
+
const MaterialUIInputRenderer = ({
+ inputRef,
searchTerm = "",
- setSearchTerm = () => {}
+ onInputChange = noop
}) => {
const classes = useStyles();
return (
- <>
+ <div ref={inputRef}>
<CardActions className={classes.root}>
<InputBase
- id="input-with-icon-adornment"
value={searchTerm}
- onChange={e => setSearchTerm(e.target.value)}
+ onChange={onInputChange}
startAdornment={
<InputAdornment position="start">
<Search />
@@ -33,14 +35,14 @@ const MaterialUIInputRenderer = ({
endAdornment={
searchTerm !== "" && (
<IconButton size={"small"}>
- <Clear onClick={() => setSearchTerm("")} />
+ <Clear onClick={onInputChange} />
</IconButton>
)
}
/>
</CardActions>
<Divider />
- </>
+ </div>
);
};
diff --git a/packages/material_ui_tree/src/item/item.js b/packages/material_ui_tree/src/item/item.js
index b4a3d74..56b2d53 100644
--- a/packages/material_ui_tree/src/item/item.js
+++ b/packages/material_ui_tree/src/item/item.js
@@ -4,6 +4,8 @@ import { ChevronRight } from "@material-ui/icons";
import ListItem from "@material-ui/core/ListItem";
import SearchedItem from "./searched_item";
+const noop = () => {};
+
const MaterialUIItemRenderer = props => {
const {
searchTerm = "",
@@ -12,7 +14,7 @@ const MaterialUIItemRenderer = props => {
hasChild: false,
currentDepth: 0
},
- onClick = () => {}
+ onClick = noop
} = props;
const searchIndex = item[item.length - 1]
.toLowerCase()
diff --git a/packages/material_ui_tree/src/items/items.js b/packages/material_ui_tree/src/items/items.js
index 150b9f3..66a8888 100644
--- a/packages/material_ui_tree/src/items/items.js
+++ b/packages/material_ui_tree/src/items/items.js
@@ -2,15 +2,18 @@ import React from "react";
import List from "@material-ui/core/List";
import makeStyles from "@material-ui/core/styles/makeStyles";
-const useStyles = makeStyles(({ treeHeight }) => ({
+const ITEMS_PADDING = 16;
+
+const useStyles = makeStyles({
root: {
- overflow: "auto",
- maxHeight: treeHeight - 48 - 42
+ overflowY: "auto",
+ overflowX: "hidden",
+ maxHeight: props => props.itemsHeight - ITEMS_PADDING
}
-}));
+});
-const MaterialUIItemsRenderer = ({ children, treeHeight }) => {
- const classes = useStyles({ treeHeight });
+const MaterialUIItemsRenderer = ({ children, itemsHeight }) => {
+ const classes = useStyles({ itemsHeight });
return (
<List className={classes.root} component="nav">
{children}
diff --git a/packages/material_ui_tree/src/material_ui_tree.js b/packages/material_ui_tree/src/material_ui_tree.js
index 42b0f60..2644a9a 100644
--- a/packages/material_ui_tree/src/material_ui_tree.js
+++ b/packages/material_ui_tree/src/material_ui_tree.js
@@ -25,9 +25,9 @@ const MaterialUITree = ({
structure={structure}
title={title}
onSelect={onSelect}
- treeContainerRenderer={props =>
- treeContainerRenderer({ ...props, width, height })
- }
+ width={width}
+ height={height}
+ treeContainerRenderer={treeContainerRenderer}
headerRenderer={headerRenderer}
inputRenderer={inputRenderer}
itemRenderer={itemRenderer}
diff --git a/packages/material_ui_tree/src/no_results/no_results.js b/packages/material_ui_tree/src/no_results/no_results.js
index 3b59af3..e034f6a 100644
--- a/packages/material_ui_tree/src/no_results/no_results.js
+++ b/packages/material_ui_tree/src/no_results/no_results.js
@@ -3,16 +3,22 @@ import { Warning } from "@material-ui/icons";
import Typography from "@material-ui/core/Typography";
import makeStyles from "@material-ui/core/styles/makeStyles";
+const ITEMS_PADDING = 16;
+
const useStyles = makeStyles({
root: {
display: "flex",
flexDirection: "column",
- alignItems: "center"
+ alignItems: "center",
+ justifyContent: "center",
+ height: props => props.itemsHeight - ITEMS_PADDING
}
});
-const MaterialUINoResults = ({ text }) => {
- const classes = useStyles();
+const MaterialUINoResults = ({ text, itemsHeight }) => {
+ const classes = useStyles({
+ itemsHeight
+ });
return (
<div className={classes.root}>
<Warning fontSize="large" color="disabled" />
diff --git a/packages/material_ui_tree/src/tree_container/tree_container.js b/packages/material_ui_tree/src/tree_container/tree_container.js
index d049936..62e2dd1 100644
--- a/packages/material_ui_tree/src/tree_container/tree_container.js
+++ b/packages/material_ui_tree/src/tree_container/tree_container.js
@@ -2,25 +2,18 @@ import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
-const DEFAULT_WIDTH = 230;
-const DEFAULT_HEIGHT = 300;
-const PIXEL_SUFFIX = "px";
-
-const useStyles = makeStyles(({ width, height }) => ({
+const useStyles = makeStyles({
root: {
- width: (width || DEFAULT_WIDTH) + PIXEL_SUFFIX,
- height: (height || DEFAULT_HEIGHT) + PIXEL_SUFFIX
+ width: props => props.width,
+ height: props => props.height
}
-}));
+});
const MaterialUIContainerRenderer = props => {
- const { children, width, height } = props;
+ const { containerRef, children, width, height } = props;
const classes = useStyles({ width, height });
- const Container = React.forwardRef((props, ref) => (
- <div {...props} ref={ref} />
- ));
return (
- <Card raised={true} className={classes.root} component={Container}>
+ <Card ref={containerRef} raised={true} className={classes.root}>
{children}
</Card>
);
From d1a365a57d05a45d69817fc7c38f36b3c97c5b0f Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Wed, 6 Jan 2021 18:38:13 +0200
Subject: [PATCH 5/7] changes after second review
---
packages/core/src/hooks/use_leaves_manager.js | 2 +-
packages/core/src/items/itemsStyle.js | 4 ++--
packages/core/src/no_results/noResultsStyle.js | 4 ++--
packages/core/src/tree.js | 4 ++--
packages/material_ui_tree/src/header/header.js | 5 ++++-
packages/material_ui_tree/src/items/items.js | 6 +++---
packages/material_ui_tree/src/no_results/no_results.js | 6 +++---
7 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/packages/core/src/hooks/use_leaves_manager.js b/packages/core/src/hooks/use_leaves_manager.js
index e75b91c..ba82b81 100644
--- a/packages/core/src/hooks/use_leaves_manager.js
+++ b/packages/core/src/hooks/use_leaves_manager.js
@@ -10,7 +10,7 @@ const useLeavesManager = ({ structure, parents, currentDepth }) => {
const [searchTerm, setSearchTerm] = useState("");
const [leaves, setLeaves] = useState([]);
- const onInputChange = event => setSearchTerm(event?.target?.value || "");
+ const onInputChange = event => setSearchTerm(event.target.value || "");
useEffect(() => {
const leaves = structure
diff --git a/packages/core/src/items/itemsStyle.js b/packages/core/src/items/itemsStyle.js
index 06d91d9..b7ec733 100644
--- a/packages/core/src/items/itemsStyle.js
+++ b/packages/core/src/items/itemsStyle.js
@@ -1,4 +1,4 @@
-export default ({ itemsHeight }) => ({
- maxHeight: itemsHeight,
+export default ({ height }) => ({
+ maxHeight: height,
overflowY: "auto"
});
diff --git a/packages/core/src/no_results/noResultsStyle.js b/packages/core/src/no_results/noResultsStyle.js
index 5cd3f21..1e48362 100644
--- a/packages/core/src/no_results/noResultsStyle.js
+++ b/packages/core/src/no_results/noResultsStyle.js
@@ -1,9 +1,9 @@
-export const css = ({ itemsHeight }) => ({
+export const css = ({ height }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
- height: itemsHeight
+ height: height
});
export const icon = () => ({
diff --git a/packages/core/src/tree.js b/packages/core/src/tree.js
index de7c103..2e139e0 100644
--- a/packages/core/src/tree.js
+++ b/packages/core/src/tree.js
@@ -86,7 +86,7 @@ const Tree = props => {
onInputChange={onInputChange}
inputIconRenderer={inputIconRenderer}
/>
- <Items getStyles={getStyles} itemsHeight={itemsHeight}>
+ <Items getStyles={getStyles} height={itemsHeight}>
{leaves &&
leaves.length > 0 &&
leaves.map(item => (
@@ -101,7 +101,7 @@ const Tree = props => {
</Items>
{leaves && leaves.length === 0 && (
<NoResults
- itemsHeight={itemsHeight}
+ height={itemsHeight}
text={noResultsText}
getStyles={getStyles}
noResultsIconRenderer={noResultsIconRenderer}
diff --git a/packages/material_ui_tree/src/header/header.js b/packages/material_ui_tree/src/header/header.js
index 8033fab..0d36a39 100644
--- a/packages/material_ui_tree/src/header/header.js
+++ b/packages/material_ui_tree/src/header/header.js
@@ -9,6 +9,9 @@ import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(() => ({
root: {
padding: "8px 16px"
+ },
+ button: {
+ marginLeft: -8
}
}));
@@ -18,7 +21,7 @@ const MaterialUIHeader = ({ headerRef, parents = [], onClick, title = "" }) => {
<div ref={headerRef}>
<CardActions className={classes.root}>
{parents.length > 0 && (
- <IconButton size={"small"}>
+ <IconButton className={classes.button} size={"small"}>
<ChevronLeft onClick={onClick} />
</IconButton>
)}
diff --git a/packages/material_ui_tree/src/items/items.js b/packages/material_ui_tree/src/items/items.js
index 66a8888..e33e178 100644
--- a/packages/material_ui_tree/src/items/items.js
+++ b/packages/material_ui_tree/src/items/items.js
@@ -8,12 +8,12 @@ const useStyles = makeStyles({
root: {
overflowY: "auto",
overflowX: "hidden",
- maxHeight: props => props.itemsHeight - ITEMS_PADDING
+ maxHeight: props => props.height - ITEMS_PADDING
}
});
-const MaterialUIItemsRenderer = ({ children, itemsHeight }) => {
- const classes = useStyles({ itemsHeight });
+const MaterialUIItemsRenderer = ({ children, height }) => {
+ const classes = useStyles({ height });
return (
<List className={classes.root} component="nav">
{children}
diff --git a/packages/material_ui_tree/src/no_results/no_results.js b/packages/material_ui_tree/src/no_results/no_results.js
index e034f6a..0c1283c 100644
--- a/packages/material_ui_tree/src/no_results/no_results.js
+++ b/packages/material_ui_tree/src/no_results/no_results.js
@@ -11,13 +11,13 @@ const useStyles = makeStyles({
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
- height: props => props.itemsHeight - ITEMS_PADDING
+ height: props => props.height - ITEMS_PADDING
}
});
-const MaterialUINoResults = ({ text, itemsHeight }) => {
+const MaterialUINoResults = ({ text, height }) => {
const classes = useStyles({
- itemsHeight
+ height
});
return (
<div className={classes.root}>
From 99a65ce3b5d03acc2da00c2c2f9a06a49dd84eb4 Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Thu, 7 Jan 2021 10:13:22 +0200
Subject: [PATCH 6/7] renaming
---
.../core/src/hooks/use_components_refs.js | 6 ++--
packages/docs/stories/core.stories.js | 6 ++--
.../material_ui_tree/src/header/header.js | 11 +++++--
packages/material_ui_tree/src/index.js | 4 +--
packages/material_ui_tree/src/input/input.js | 4 +--
packages/material_ui_tree/src/item/item.js | 4 +--
packages/material_ui_tree/src/items/items.js | 4 +--
.../{material_ui_tree.js => material_tree.js} | 30 ++++++++++---------
.../src/no_results/no_results.js | 4 +--
9 files changed, 41 insertions(+), 32 deletions(-)
rename packages/material_ui_tree/src/{material_ui_tree.js => material_tree.js} (51%)
diff --git a/packages/core/src/hooks/use_components_refs.js b/packages/core/src/hooks/use_components_refs.js
index 5f1db6d..9d9caa4 100644
--- a/packages/core/src/hooks/use_components_refs.js
+++ b/packages/core/src/hooks/use_components_refs.js
@@ -6,9 +6,9 @@ const useComponentsRefs = () => {
const inputRef = useRef();
const itemsHeight =
- containerRef?.current?.clientHeight -
- headerRef?.current?.clientHeight -
- inputRef?.current?.clientHeight;
+ (containerRef?.current?.clientHeight || 0) -
+ (headerRef?.current?.clientHeight || 0) -
+ (inputRef?.current?.clientHeight || 0);
return { containerRef, headerRef, inputRef, itemsHeight };
};
diff --git a/packages/docs/stories/core.stories.js b/packages/docs/stories/core.stories.js
index aaab250..6d959c5 100644
--- a/packages/docs/stories/core.stories.js
+++ b/packages/docs/stories/core.stories.js
@@ -1,6 +1,6 @@
import React from "react";
import Tree from "@kenshooui/react-tree";
-import MaterialUITree from "@kenshooui/material-tree";
+import MaterialTree from "@kenshooui/material-tree";
import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
@@ -84,7 +84,7 @@ export const MaterialTheme = () => {
<div className={classes.wrapper}>
<div className={classes.item}>
<div className={classes.title}>Default Dimensions</div>
- <MaterialUITree
+ <MaterialTree
structure={structure}
title={"Choose an item"}
onSelect={item => alert(item)}
@@ -92,7 +92,7 @@ export const MaterialTheme = () => {
</div>
<div className={classes.item}>
<div className={classes.title}>Custom Dimensions</div>
- <MaterialUITree
+ <MaterialTree
structure={structure}
title={"Choose an item"}
onSelect={item => alert(item)}
diff --git a/packages/material_ui_tree/src/header/header.js b/packages/material_ui_tree/src/header/header.js
index 0d36a39..fdd69e7 100644
--- a/packages/material_ui_tree/src/header/header.js
+++ b/packages/material_ui_tree/src/header/header.js
@@ -15,7 +15,14 @@ const useStyles = makeStyles(() => ({
}
}));
-const MaterialUIHeader = ({ headerRef, parents = [], onClick, title = "" }) => {
+const noop = () => {};
+
+const MaterialHeaderRenderer = ({
+ headerRef,
+ parents = [],
+ onClick = noop,
+ title = ""
+}) => {
const classes = useStyles();
return (
<div ref={headerRef}>
@@ -34,4 +41,4 @@ const MaterialUIHeader = ({ headerRef, parents = [], onClick, title = "" }) => {
);
};
-export default MaterialUIHeader;
+export default MaterialHeaderRenderer;
diff --git a/packages/material_ui_tree/src/index.js b/packages/material_ui_tree/src/index.js
index 012b4c7..10e07b4 100644
--- a/packages/material_ui_tree/src/index.js
+++ b/packages/material_ui_tree/src/index.js
@@ -1,3 +1,3 @@
-import MaterialUITree from "./material_ui_tree";
+import MaterialTree from "./material_tree";
-export default MaterialUITree;
+export default MaterialTree;
diff --git a/packages/material_ui_tree/src/input/input.js b/packages/material_ui_tree/src/input/input.js
index f1fb08c..d29f9a4 100644
--- a/packages/material_ui_tree/src/input/input.js
+++ b/packages/material_ui_tree/src/input/input.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles(() => ({
const noop = () => {};
-const MaterialUIInputRenderer = ({
+const MaterialInputRenderer = ({
inputRef,
searchTerm = "",
onInputChange = noop
@@ -46,4 +46,4 @@ const MaterialUIInputRenderer = ({
);
};
-export default MaterialUIInputRenderer;
+export default MaterialInputRenderer;
diff --git a/packages/material_ui_tree/src/item/item.js b/packages/material_ui_tree/src/item/item.js
index 56b2d53..c04c04a 100644
--- a/packages/material_ui_tree/src/item/item.js
+++ b/packages/material_ui_tree/src/item/item.js
@@ -6,7 +6,7 @@ import SearchedItem from "./searched_item";
const noop = () => {};
-const MaterialUIItemRenderer = props => {
+const MaterialItemRenderer = props => {
const {
searchTerm = "",
item: { item, hasChild, currentDepth } = {
@@ -37,4 +37,4 @@ const MaterialUIItemRenderer = props => {
);
};
-export default MaterialUIItemRenderer;
+export default MaterialItemRenderer;
diff --git a/packages/material_ui_tree/src/items/items.js b/packages/material_ui_tree/src/items/items.js
index e33e178..533acdf 100644
--- a/packages/material_ui_tree/src/items/items.js
+++ b/packages/material_ui_tree/src/items/items.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles({
}
});
-const MaterialUIItemsRenderer = ({ children, height }) => {
+const MaterialItemsRenderer = ({ children, height }) => {
const classes = useStyles({ height });
return (
<List className={classes.root} component="nav">
@@ -21,4 +21,4 @@ const MaterialUIItemsRenderer = ({ children, height }) => {
);
};
-export default MaterialUIItemsRenderer;
+export default MaterialItemsRenderer;
diff --git a/packages/material_ui_tree/src/material_ui_tree.js b/packages/material_ui_tree/src/material_tree.js
similarity index 51%
rename from packages/material_ui_tree/src/material_ui_tree.js
rename to packages/material_ui_tree/src/material_tree.js
index 2644a9a..17afc67 100644
--- a/packages/material_ui_tree/src/material_ui_tree.js
+++ b/packages/material_ui_tree/src/material_tree.js
@@ -1,24 +1,26 @@
import React from "react";
import Tree from "@kenshooui/react-tree";
-import MaterialUIItemRenderer from "./item/item";
-import MaterialUIInputRenderer from "./input/input";
+import MaterialItemRenderer from "./item/item";
+import MaterialInputRenderer from "./input/input";
import MaterialUIContainerRenderer from "./tree_container/tree_container";
-import MaterialUIHeader from "./header/header";
-import MaterialUIItemsRenderer from "./items/items";
-import MaterialUINoResults from "./no_results/no_results";
+import MaterialHeaderRenderer from "./header/header";
+import MaterialItemsRenderer from "./items/items";
+import MaterialNoResultsRenderer from "./no_results/no_results";
-const MaterialUITree = ({
+const noop = () => {};
+
+const MaterialTree = ({
structure = [],
- title,
- onSelect,
+ title = "",
+ onSelect = noop,
width,
height,
treeContainerRenderer = MaterialUIContainerRenderer,
- headerRenderer = MaterialUIHeader,
- inputRenderer = MaterialUIInputRenderer,
- itemRenderer = MaterialUIItemRenderer,
- itemsRenderer = MaterialUIItemsRenderer,
- noResultsRenderer = MaterialUINoResults
+ headerRenderer = MaterialHeaderRenderer,
+ inputRenderer = MaterialInputRenderer,
+ itemRenderer = MaterialItemRenderer,
+ itemsRenderer = MaterialItemsRenderer,
+ noResultsRenderer = MaterialNoResultsRenderer
}) => {
return (
<Tree
@@ -37,4 +39,4 @@ const MaterialUITree = ({
);
};
-export default MaterialUITree;
+export default MaterialTree;
diff --git a/packages/material_ui_tree/src/no_results/no_results.js b/packages/material_ui_tree/src/no_results/no_results.js
index 0c1283c..3ce3832 100644
--- a/packages/material_ui_tree/src/no_results/no_results.js
+++ b/packages/material_ui_tree/src/no_results/no_results.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
}
});
-const MaterialUINoResults = ({ text, height }) => {
+const MaterialNoResultsRenderer = ({ text, height }) => {
const classes = useStyles({
height
});
@@ -27,4 +27,4 @@ const MaterialUINoResults = ({ text, height }) => {
);
};
-export default MaterialUINoResults;
+export default MaterialNoResultsRenderer;
From a711428296d7a47f09bbc192baa2774ea5b1de82 Mon Sep 17 00:00:00 2001
From: liatgo <liat.gofshtein@kenshoo.com>
Date: Thu, 7 Jan 2021 14:48:05 +0200
Subject: [PATCH 7/7] Add clear to core and add selected item support
---
packages/core/src/hooks/use_item_callbacks.js | 8 +++++--
packages/core/src/input/input.js | 9 +++++++-
packages/core/src/input/inputStyle.js | 7 ++++++
packages/core/src/item/basic_item.js | 7 ++++--
packages/core/src/item/item.js | 14 ++++++++---
packages/core/src/item/itemStyle.js | 4 ++++
.../item/searched_item/searchedItemStyle.js | 9 ++++----
packages/core/src/styles/styles.js | 9 +++++++-
packages/core/src/tree.js | 22 ++++++++++++++----
packages/docs/stories/core.stories.js | 18 +++++++++++++++
.../material_ui_tree/src/item/basic_item.js | 14 +++++++++--
packages/material_ui_tree/src/item/item.js | 17 ++++++++++++--
.../src/item/searched_item.js | 23 +++++++++++++------
.../material_ui_tree/src/material_tree.js | 4 +++-
14 files changed, 135 insertions(+), 30 deletions(-)
diff --git a/packages/core/src/hooks/use_item_callbacks.js b/packages/core/src/hooks/use_item_callbacks.js
index 94cb31f..7550bae 100644
--- a/packages/core/src/hooks/use_item_callbacks.js
+++ b/packages/core/src/hooks/use_item_callbacks.js
@@ -1,14 +1,17 @@
import { useState } from "react";
-const useItemCallbacks = onSelect => {
+const useItemCallbacks = ({ onSelect, markSelectedItem }) => {
const [currentDepth, setCurrentDepth] = useState(0);
const [parents, setParents] = useState([]);
+ const [selectedItem, setSelectedItem] = useState({ item: [], leaf: "" });
const onClick = (label, item, hasChild) => {
if (hasChild) {
setParents(parents.concat(label));
setCurrentDepth(currentDepth + 1);
} else {
+ markSelectedItem &&
+ setSelectedItem({ item, leaf: item[item.length - 1] });
onSelect(item);
}
};
@@ -24,7 +27,8 @@ const useItemCallbacks = onSelect => {
currentDepth,
setCurrentDepth,
parents,
- setParents
+ setParents,
+ selectedItem
};
};
diff --git a/packages/core/src/input/input.js b/packages/core/src/input/input.js
index 4a53078..bb6a160 100644
--- a/packages/core/src/input/input.js
+++ b/packages/core/src/input/input.js
@@ -3,6 +3,7 @@ import { jsx } from "@emotion/core";
import React from "react";
export const InputIconRenderer = () => <>🔍</>;
+export const ClearIconRenderer = () => <>✘️</>;
const Input = props => {
const {
@@ -10,7 +11,8 @@ const Input = props => {
searchTerm,
onInputChange,
getStyles,
- inputIconRenderer: InputIcon = InputIconRenderer
+ inputIconRenderer: InputIcon = InputIconRenderer,
+ clearIconRenderer: ClearIcon = ClearIconRenderer
} = props;
return (
<div ref={inputRef} css={getStyles("inputWrapper", props)}>
@@ -22,6 +24,11 @@ const Input = props => {
value={searchTerm}
onChange={onInputChange}
/>
+ {searchTerm !== "" && (
+ <span css={getStyles("clearInput", props)} onClick={onInputChange}>
+ <ClearIcon />
+ </span>
+ )}
</div>
);
};
diff --git a/packages/core/src/input/inputStyle.js b/packages/core/src/input/inputStyle.js
index d0a2c60..1744af8 100644
--- a/packages/core/src/input/inputStyle.js
+++ b/packages/core/src/input/inputStyle.js
@@ -22,6 +22,13 @@ export const searchIconCss = () => ({
left: "8px"
});
+export const clearIconCss = () => ({
+ position: "absolute",
+ top: "8px",
+ right: "8px",
+ cursor: "pointer"
+});
+
export const wrapperCss = () => ({
position: "relative"
});
diff --git a/packages/core/src/item/basic_item.js b/packages/core/src/item/basic_item.js
index 0ffb54f..52e1e92 100644
--- a/packages/core/src/item/basic_item.js
+++ b/packages/core/src/item/basic_item.js
@@ -1,7 +1,10 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
import React from "react";
-const BasicItem = ({ label = "" }) => {
- return <span>{label}</span>;
+const BasicItem = props => {
+ const { label = "", getStyles } = props;
+ return <span css={getStyles("selectedItem", props)}>{label}</span>;
};
export default BasicItem;
diff --git a/packages/core/src/item/item.js b/packages/core/src/item/item.js
index a112151..2a74abe 100644
--- a/packages/core/src/item/item.js
+++ b/packages/core/src/item/item.js
@@ -6,6 +6,7 @@ import SearchedItem from "./searched_item/searched_item";
import BasicItem from "./basic_item";
export const ForwardIconRenderer = () => <>➡️</>;
+const defaultSelectedItem = { item: [], leaf: "" };
const ItemRenderer = props => {
const {
@@ -17,8 +18,10 @@ const ItemRenderer = props => {
currentDepth: 0
},
onClick,
- forwardIconRenderer: ForwardIcon = ForwardIconRenderer
+ forwardIconRenderer: ForwardIcon = ForwardIconRenderer,
+ selectedItem = defaultSelectedItem
} = props;
+ const isItemSelected = item.toString() === selectedItem.item.toString();
const searchIndex = item[item.length - 1]
.toLowerCase()
.indexOf(searchTerm.trim().toLowerCase());
@@ -33,13 +36,18 @@ const ItemRenderer = props => {
searchIndex={searchIndex}
searchTerm={searchTerm.trim()}
getStyles={getStyles}
+ isSelected={
+ isItemSelected && item[item.length - 1] === selectedItem.leaf
+ }
/>
)}
{searchTerm === "" && (
<BasicItem
+ getStyles={getStyles}
label={item[currentDepth]}
- searchIndex={searchIndex}
- searchTerm={searchTerm.trim()}
+ isSelected={
+ isItemSelected && item[currentDepth] === selectedItem.leaf
+ }
/>
)}
{hasChild && (
diff --git a/packages/core/src/item/itemStyle.js b/packages/core/src/item/itemStyle.js
index 08f46a7..52bf79f 100644
--- a/packages/core/src/item/itemStyle.js
+++ b/packages/core/src/item/itemStyle.js
@@ -18,3 +18,7 @@ export const css = props => ({
});
export const forwardIconCss = () => ({});
+
+export const selectedItem = props => ({
+ fontWeight: props.isSelected ? 600 : 400
+});
diff --git a/packages/core/src/item/searched_item/searchedItemStyle.js b/packages/core/src/item/searched_item/searchedItemStyle.js
index 8d315ab..f74bb55 100644
--- a/packages/core/src/item/searched_item/searchedItemStyle.js
+++ b/packages/core/src/item/searched_item/searchedItemStyle.js
@@ -1,13 +1,14 @@
export const initialCss = props => ({
- color: "#545769"
+ color: "#545769",
+ fontWeight: props.isSelected ? 600 : 400
});
-export const highlightCss = props => ({
+export const highlightCss = () => ({
fontWeight: 600,
- color: "#2020e1"
+ color: "#268DEC"
});
-export const parentsCss = props => ({
+export const parentsCss = () => ({
color: "#98A1B8",
marginTop: "2px"
});
diff --git a/packages/core/src/styles/styles.js b/packages/core/src/styles/styles.js
index bd1435a..afb763c 100644
--- a/packages/core/src/styles/styles.js
+++ b/packages/core/src/styles/styles.js
@@ -3,7 +3,11 @@ import {
wrapperCss as headerWrapperCss,
backIconCss as headerBackIconCss
} from "../header/headerStyle";
-import { css as itemCss, forwardIconCss } from "../item/itemStyle";
+import {
+ css as itemCss,
+ forwardIconCss,
+ selectedItem as selectedItemCss
+} from "../item/itemStyle";
import {
highlightCss,
initialCss as searchItemInitialCss,
@@ -13,6 +17,7 @@ import itemsCss from "../items/itemsStyle";
import {
css as inputCss,
searchIconCss as inputSearchIconCss,
+ clearIconCss as clearSearchIconCss,
wrapperCss as inputWrapperCss
} from "../input/inputStyle";
import {
@@ -35,7 +40,9 @@ export const defaultStyles = {
noResultsText: noResultsTextCss,
input: inputCss,
searchInput: inputSearchIconCss,
+ clearInput: clearSearchIconCss,
forwardIcon: forwardIconCss,
+ selectedItem: selectedItemCss,
inputWrapper: inputWrapperCss
};
diff --git a/packages/core/src/tree.js b/packages/core/src/tree.js
index 2e139e0..d0b1509 100644
--- a/packages/core/src/tree.js
+++ b/packages/core/src/tree.js
@@ -30,12 +30,14 @@ const Tree = props => {
backIconRenderer,
inputRenderer: Input = InputDefault,
inputIconRenderer,
+ clearIconRenderer,
noResultsRenderer: NoResults = NoResultsDefault,
noResultsIconRenderer,
itemRenderer: Item = ItemDefault,
itemsRenderer: Items = ItemsRenderer,
forwardIconRenderer,
- treeContainerRenderer: TreeContainer = TreeContainerRenderer
+ treeContainerRenderer: TreeContainer = TreeContainerRenderer,
+ markSelectedItem = false
} = props;
const getStyles = (key, props = {}) => {
@@ -52,14 +54,22 @@ const Tree = props => {
itemsHeight
} = useContainerHeight();
- const { onClick, onBackClick, currentDepth, parents } = useItemCallbacks(
- onSelect
- );
+ const {
+ onClick,
+ onBackClick,
+ currentDepth,
+ parents,
+ selectedItem
+ } = useItemCallbacks({
+ onSelect,
+ markSelectedItem
+ });
const { searchTerm, onInputChange, leaves } = useLeavesManager({
structure,
parents,
- currentDepth
+ currentDepth,
+ selectedItem
});
return (
@@ -85,6 +95,7 @@ const Tree = props => {
searchTerm={searchTerm}
onInputChange={onInputChange}
inputIconRenderer={inputIconRenderer}
+ clearIconRenderer={clearIconRenderer}
/>
<Items getStyles={getStyles} height={itemsHeight}>
{leaves &&
@@ -96,6 +107,7 @@ const Tree = props => {
item={item}
onClick={onClick}
forwardIconRenderer={forwardIconRenderer}
+ selectedItem={selectedItem}
/>
))}
</Items>
diff --git a/packages/docs/stories/core.stories.js b/packages/docs/stories/core.stories.js
index 6d959c5..0aa2389 100644
--- a/packages/docs/stories/core.stories.js
+++ b/packages/docs/stories/core.stories.js
@@ -64,6 +64,15 @@ export const Basic = () => {
onSelect={item => alert(item)}
/>
</div>
+ <div className={classes.item}>
+ <div className={classes.title}>Mark selected item</div>
+ <Tree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ markSelectedItem={true}
+ />
+ </div>
<div className={classes.item}>
<div className={classes.title}>Custom Dimensions</div>
<Tree
@@ -90,6 +99,15 @@ export const MaterialTheme = () => {
onSelect={item => alert(item)}
/>
</div>
+ <div className={classes.item}>
+ <div className={classes.title}>Mark selected item</div>
+ <MaterialTree
+ structure={structure}
+ title={"Choose an item"}
+ onSelect={item => alert(item)}
+ markSelectedItem={true}
+ />
+ </div>
<div className={classes.item}>
<div className={classes.title}>Custom Dimensions</div>
<MaterialTree
diff --git a/packages/material_ui_tree/src/item/basic_item.js b/packages/material_ui_tree/src/item/basic_item.js
index 2b809ff..7d7bac8 100644
--- a/packages/material_ui_tree/src/item/basic_item.js
+++ b/packages/material_ui_tree/src/item/basic_item.js
@@ -1,8 +1,18 @@
import React from "react";
import ListItemText from "@material-ui/core/ListItemText";
+import { makeStyles } from "@material-ui/core/styles";
-const BasicItem = ({ label = "" }) => {
- return <ListItemText primary={label} />;
+const useStyles = makeStyles({
+ selected: {
+ fontWeight: props => (props.isSelected ? 600 : 400)
+ }
+});
+
+const BasicItem = ({ label = "", isSelected = false }) => {
+ const classes = useStyles({ isSelected });
+ return (
+ <ListItemText primary={<span className={classes.selected}>{label}</span>} />
+ );
};
export default BasicItem;
diff --git a/packages/material_ui_tree/src/item/item.js b/packages/material_ui_tree/src/item/item.js
index c04c04a..142e80e 100644
--- a/packages/material_ui_tree/src/item/item.js
+++ b/packages/material_ui_tree/src/item/item.js
@@ -5,6 +5,7 @@ import ListItem from "@material-ui/core/ListItem";
import SearchedItem from "./searched_item";
const noop = () => {};
+const defaultSelectedItem = { item: [], leaf: "" };
const MaterialItemRenderer = props => {
const {
@@ -14,8 +15,10 @@ const MaterialItemRenderer = props => {
hasChild: false,
currentDepth: 0
},
- onClick = noop
+ onClick = noop,
+ selectedItem = defaultSelectedItem
} = props;
+ const isItemSelected = item.toString() === selectedItem.item.toString();
const searchIndex = item[item.length - 1]
.toLowerCase()
.indexOf(searchTerm.trim().toLowerCase());
@@ -29,9 +32,19 @@ const MaterialItemRenderer = props => {
item={item}
searchIndex={searchIndex}
searchTerm={searchTerm.trim()}
+ isSelected={
+ isItemSelected && item[item.length - 1] === selectedItem.leaf
+ }
+ />
+ )}
+ {searchTerm === "" && (
+ <BasicItem
+ label={item[currentDepth]}
+ isSelected={
+ isItemSelected && item[currentDepth] === selectedItem.leaf
+ }
/>
)}
- {searchTerm === "" && <BasicItem label={item[currentDepth]} />}
{hasChild && <ChevronRight />}
</ListItem>
);
diff --git a/packages/material_ui_tree/src/item/searched_item.js b/packages/material_ui_tree/src/item/searched_item.js
index 82def86..d0d98eb 100644
--- a/packages/material_ui_tree/src/item/searched_item.js
+++ b/packages/material_ui_tree/src/item/searched_item.js
@@ -3,14 +3,23 @@ import ListItemText from "@material-ui/core/ListItemText";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles({
boldText: {
- fontWeight: "bold"
+ fontWeight: 600,
+ color: "#268DEC"
+ },
+ selected: {
+ fontWeight: props => (props.isSelected ? 600 : 400)
}
-}));
+});
-const SearchedItem = ({ item = [""], searchIndex = 0, searchTerm = "" }) => {
- const classes = useStyles();
+const SearchedItem = ({
+ item = [""],
+ searchIndex = 0,
+ searchTerm = "",
+ isSelected = false
+}) => {
+ const classes = useStyles({ isSelected });
const leaf = item[item.length - 1];
const parents = item.slice(0, item.length - 1).join(" / ");
@@ -18,13 +27,13 @@ const SearchedItem = ({ item = [""], searchIndex = 0, searchTerm = "" }) => {
<ListItemText
primary={
<>
- <Typography component="span">
+ <Typography component="span" className={classes.selected}>
{leaf.substring(0, searchIndex)}
</Typography>
<Typography component="span" className={classes.boldText}>
{leaf.substring(searchIndex, searchIndex + searchTerm.length)}
</Typography>
- <Typography component="span">
+ <Typography component="span" className={classes.selected}>
{leaf.substring(searchIndex + searchTerm.length)}
</Typography>
</>
diff --git a/packages/material_ui_tree/src/material_tree.js b/packages/material_ui_tree/src/material_tree.js
index 17afc67..5d37bfc 100644
--- a/packages/material_ui_tree/src/material_tree.js
+++ b/packages/material_ui_tree/src/material_tree.js
@@ -20,7 +20,8 @@ const MaterialTree = ({
inputRenderer = MaterialInputRenderer,
itemRenderer = MaterialItemRenderer,
itemsRenderer = MaterialItemsRenderer,
- noResultsRenderer = MaterialNoResultsRenderer
+ noResultsRenderer = MaterialNoResultsRenderer,
+ markSelectedItem = false
}) => {
return (
<Tree
@@ -35,6 +36,7 @@ const MaterialTree = ({
itemRenderer={itemRenderer}
itemsRenderer={itemsRenderer}
noResultsRenderer={noResultsRenderer}
+ markSelectedItem={markSelectedItem}
/>
);
};