Support Material-UI tree (#143)

* Support Material-UI tree

* failed trial to pass ref

* fix paddings

* changes after review

* changes after second review

* renaming

Author: liatgo

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_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

@@ -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>
   );

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,4 +1,4 @@
-import treeCss from "../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,

packages/core/src/tree.js

@@ -10,23 +10,32 @@ 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 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,
-    className,
+    width,
+    height,
     noResultsText = "No matching results",
-    styles,
     headerRenderer: Header = HeaderDefault,
     backIconRenderer,
     inputRenderer: Input = InputDefault,
     inputIconRenderer,
     noResultsRenderer: NoResults = NoResultsDefault,
     noResultsIconRenderer,
     itemRenderer: Item = ItemDefault,
-    forwardIconRenderer
+    itemsRenderer: Items = ItemsRenderer,
+    forwardIconRenderer,
+    treeContainerRenderer: TreeContainer = TreeContainerRenderer
   } = props;
 
   const getStyles = (key, props = {}) => {
@@ -36,19 +45,32 @@ const Tree = props => {
     return custom ? custom(base, props) : base;
   };
 
+  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 (
-    <div css={getStyles("tree", props)}>
+    <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}
@@ -58,12 +80,13 @@ const Tree = props => {
         {title}
       </Header>
       <Input
+        inputRef={inputRef}
         getStyles={getStyles}
         searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
+        onInputChange={onInputChange}
         inputIconRenderer={inputIconRenderer}
       />
-      <div css={getStyles("items", props)}>
+      <Items getStyles={getStyles} height={itemsHeight}>
         {leaves &&
           leaves.length > 0 &&
           leaves.map(item => (
@@ -75,15 +98,16 @@ const Tree = props => {
               forwardIconRenderer={forwardIconRenderer}
             />
           ))}
-        {leaves && leaves.length === 0 && (
-          <NoResults
-            text={noResultsText}
-            getStyles={getStyles}
-            noResultsIconRenderer={noResultsIconRenderer}
-          />
-        )}
-      </div>
-    </div>
+      </Items>
+      {leaves && leaves.length === 0 && (
+        <NoResults
+          height={itemsHeight}
+          text={noResultsText}
+          getStyles={getStyles}
+          noResultsIconRenderer={noResultsIconRenderer}
+        />
+      )}
+    </TreeContainer>
   );
 };
 

packages/core/src/treeStyle.js renamed to 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",