Core clear and mark selected

packages/core/src/header/header.js

@@ -6,14 +6,15 @@ export const BackIconRenderer = () => <>⬅️</>;
 
 const Header = props => {
   const {
+    headerRef,
     parents = [],
     onClick,
     title = "",
     getStyles,
     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}>

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 || 0) -
+    (headerRef?.current?.clientHeight || 0) -
+    (inputRef?.current?.clientHeight || 0);
+
+  return { containerRef, headerRef, inputRef, itemsHeight };
+};
+
+export default useComponentsRefs;

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

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;

packages/core/src/input/input.js

@@ -3,24 +3,32 @@ import { jsx } from "@emotion/core";
 import React from "react";
 
 export const InputIconRenderer = () => <>🔍</>;
+export const ClearIconRenderer = () => <>✘️</>;
 
 const Input = props => {
   const {
+    inputRef,
     searchTerm,
-    setSearchTerm,
+    onInputChange,
     getStyles,
-    inputIconRenderer: InputIcon = InputIconRenderer
+    inputIconRenderer: InputIcon = InputIconRenderer,
+    clearIconRenderer: ClearIcon = ClearIconRenderer
   } = 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}
       />
+      {searchTerm !== "" && (
+        <span css={getStyles("clearInput", props)} onClick={onInputChange}>
+          <ClearIcon />
+        </span>
+      )}
     </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

@@ -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 && (

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

packages/core/src/items/itemsStyle.js

@@ -1,4 +1,4 @@
-export default () => ({
-  maxHeight: "203px",
+export default ({ height }) => ({
+  maxHeight: height,
   overflowY: "auto"
 });

packages/core/src/no_results/noResultsStyle.js

@@ -1,8 +1,9 @@
-export const css = () => ({
+export const css = ({ height }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  marginTop: "30px"
+  justifyContent: "center",
+  height: height
 });
 
 export const icon = () => ({

packages/core/src/styles/styles.js

@@ -1,9 +1,13 @@
-import treeCss from "../treeStyle";
+import containerCss from "../tree_container/treeContainerStyle";
 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 {
@@ -22,7 +27,7 @@ import {
 } from "../no_results/noResultsStyle";
 
 export const defaultStyles = {
-  tree: treeCss,
+  container: containerCss,
   header: headerWrapperCss,
   headerBackIcon: headerBackIconCss,
   item: itemCss,
@@ -35,7 +40,9 @@ export const defaultStyles = {
   noResultsText: noResultsTextCss,
   input: inputCss,
   searchInput: inputSearchIconCss,
+  clearInput: clearSearchIconCss,
   forwardIcon: forwardIconCss,
+  selectedItem: selectedItemCss,
   inputWrapper: inputWrapperCss
 };