Additions: add clear button in core + add selected item support

packages/core/src/hooks/use_item_callbacks.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-const useItemCallbacks = onSelect => {
+const useItemCallbacks = ({ onSelect }) => {
   const [currentDepth, setCurrentDepth] = useState(0);
   const [parents, setParents] = useState([]);
 

packages/core/src/input/input.js

@@ -3,14 +3,16 @@ import { jsx } from "@emotion/core";
 import React from "react";
 
 export const InputIconRenderer = () => <>🔍</>;
+export const ClearIconRenderer = () => <>✘️</>;
 
 const Input = props => {
   const {
     inputRef,
     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 !== "" && (
+        <button css={getStyles("clearInput", props)} onClick={onInputChange}>
+          <ClearIcon />
+        </button>
+      )}
     </div>
   );
 };

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"
 });

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;

packages/core/src/item/item.js

@@ -17,8 +17,11 @@ const ItemRenderer = props => {
       currentDepth: 0
     },
     onClick,
-    forwardIconRenderer: ForwardIcon = ForwardIconRenderer
+    forwardIconRenderer: ForwardIcon = ForwardIconRenderer,
+    selectedItem
   } = 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
           label={item[currentDepth]}
-          searchIndex={searchIndex}
-          searchTerm={searchTerm.trim()}
+          getStyles={getStyles}
+          isSelected={
+            isItemSelected && item[currentDepth] === selectedItem.leaf
+          }
         />
       )}
       {hasChild && (

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
+});

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"
 });

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
 };
 

packages/core/src/tree.js

@@ -31,12 +31,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,
+    selectedItem
   } = props;
 
   const getStyles = (key, props = {}) => {
@@ -53,9 +55,9 @@ const Tree = props => {
     itemsHeight
   } = useContainerHeight();
 
-  const { onClick, onBackClick, currentDepth, parents } = useItemCallbacks(
+  const { onClick, onBackClick, currentDepth, parents } = useItemCallbacks({
     onSelect
-  );
+  });
 
   const { searchTerm, onInputChange, leaves } = useLeavesManager({
     structure,
@@ -89,6 +91,7 @@ const Tree = props => {
         searchTerm={searchTerm}
         onInputChange={onInputChange}
         inputIconRenderer={inputIconRenderer}
+        clearIconRenderer={clearIconRenderer}
       />
       <Items styles={styles} getStyles={getStyles} height={itemsHeight}>
         {leaves &&
@@ -100,6 +103,7 @@ const Tree = props => {
               item={item}
               onClick={onClick}
               forwardIconRenderer={forwardIconRenderer}
+              selectedItem={selectedItem}
             />
           ))}
       </Items>

packages/docs/stories/core.stories.js

@@ -8,6 +8,7 @@ import {
   CustomSearchIcon,
   customStyles
 } from "./custom_renderers";
+import { MarkSelectedItemTree } from "./mark_selected_items_tree";
 
 const useStyles = makeStyles({
   wrapper: {
@@ -90,6 +91,10 @@ export const Basic = () => {
           styles={customStyles}
         />
       </div>
+      <div className={classes.item}>
+        <div className={classes.title}>Mark selected item</div>
+        <MarkSelectedItemTree structure={structure} treeComponent={Tree} />
+      </div>
       <div className={classes.item}>
         <div className={classes.title}>Custom Dimensions</div>
         <Tree
@@ -127,6 +132,13 @@ export const MaterialTheme = () => {
           inputIconRenderer={CustomSearchIcon}
         />
       </div>
+      <div className={classes.item}>
+        <div className={classes.title}>Mark selected item</div>
+        <MarkSelectedItemTree
+          structure={structure}
+          treeComponent={MaterialTree}
+        />
+      </div>
       <div className={classes.item}>
         <div className={classes.title}>Custom Dimensions</div>
         <MaterialTree

packages/docs/stories/mark_selected_items_tree.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+export const MarkSelectedItemTree = ({
+  structure,
+  treeComponent: TreeComponent
+}) => {
+  const [selectedItem, setSelectedItem] = useState({ item: [], leaf: "" });
+  return (
+    <TreeComponent
+      structure={structure}
+      title={"Choose an item"}
+      onSelect={item => {
+        setSelectedItem({ item, leaf: item[item.length - 1] });
+        alert(item);
+      }}
+      selectedItem={selectedItem}
+    />
+  );
+};

packages/material_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;

packages/material_tree/src/item/item.js

@@ -15,8 +15,11 @@ const MaterialItemRenderer = props => {
       currentDepth: 0
     },
     onClick = noop,
+    selectedItem,
     forwardIconRenderer: ForwardIcon = ChevronRight
   } = props;
+
+  const isItemSelected = item.toString() === selectedItem?.item?.toString();
   const searchIndex = item[item.length - 1]
     .toLowerCase()
     .indexOf(searchTerm.trim().toLowerCase());
@@ -30,9 +33,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 && <ForwardIcon />}
     </ListItem>
   );

packages/material_tree/src/item/searched_item.js

@@ -3,28 +3,37 @@ 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(" / ");
 
   return (
     <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>
         </>

packages/material_tree/src/material_tree.js

@@ -26,7 +26,8 @@ const MaterialTree = ({
   itemsRenderer = MaterialItemsRenderer,
   noResultsRenderer = MaterialNoResultsRenderer,
   noResultsText,
-  noResultsIconRenderer
+  noResultsIconRenderer,
+  selectedItem
 }) => {
   return (
     <Tree
@@ -47,6 +48,7 @@ const MaterialTree = ({
       noResultsRenderer={noResultsRenderer}
       noResultsText={noResultsText}
       noResultsIconRenderer={noResultsIconRenderer}
+      selectedItem={selectedItem}
     />
   );
 };