@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/src/tree/types.ts

@@ -21,22 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type BadgeType,
   type ChildProp,
   type CssProp,
   type Elements,
-  type IconProps,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 
-interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+interface TreeBaseNode<T> extends CssProp, TestProps {
   id: string;
   /**
    * display label
    */
   label: Elements<JSX.Element>;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * full text to be used for querying purposes
    */
@@ -60,14 +64,14 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
   (
     | { leaf: true; children?: never }
     | {
-        leaf?: false;
+        leaf?: boolean;
         children?: Array<TreeNodeType<T>>;
         open?: boolean;
         iconOpen?: string;
       }
   );
 
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode extends CssProp, TestProps {
   id: string;
   label: Elements<JSX.Element>;
   queryable?: string;
@@ -84,6 +88,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
   loaded: boolean;
   parent?: string;
   empty?: boolean;
+  icon?: IconProps;
   errored?: string;
   selected?: true;
   childSelected?: true;
@@ -96,22 +101,59 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
 export interface TreeNodeProps extends ChildProp {
   node: InternalNode;
   expanders: [string, string];
-  defaultNodeIcon?: string;
-  defaultLeafIcon?: string;
+  defaultNodeIcon?: Elements<JSX.Element>;
+  defaultLeafIcon?: Elements<JSX.Element>;
   noLines?: boolean;
   selectable?: true | "leafOnly";
   checkable?: true | "leafOnly";
+  leafClassName?: string;
+  nodeClassName?: string;
   onToggle: (id: string) => void;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, shiftKey?: boolean) => void;
   onChecked: (id: string) => void;
+  onClick?: (id: string, node: any) => void;
 }
 
 export interface TreeRef {
   select: (id: string) => void;
   open: (id: string) => void;
+  openAndLoad: (list: string[]) => void;
 }
 
-export interface TreePanelProps<T extends KeyValue = KeyValue>
+export type TreePanelProps<T extends KeyValue = KeyValue> =
+  BaseTreePanelProps<T> &
+    (
+      | {
+          /**
+           * enable multi select
+           */
+          multiple?: never | false;
+          /**
+           * selected item id
+           */
+          selected?: string;
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string, data: T) => void;
+        }
+      | {
+          /**
+           * enable multi select
+           */
+          multiple: true;
+          /**
+           * selected item id
+           */
+          selected?: string[];
+          /**
+           * callback on selection of tree node
+           */
+          onSelect?: (id: string[], data: T) => void;
+        }
+    );
+
+interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   extends TestProps,
     RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
@@ -128,13 +170,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
    */
   selectable?: true | "leafOnly";
   /**
-   * enable checkable
+   * enable multi select
    */
-  checkable?: true | "leafOnly";
+  multiple?: boolean;
   /**
-   * selected item id
+   * enable checkable
    */
-  selected?: string;
+  checkable?: true | "leafOnly";
   /**
    * checked items
    */
@@ -165,24 +207,32 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
     | Array<TreeNodeType<T>>
     | undefined;
   /**
-   * callback on selection of tree node
+   * callback to load tree using search query
    */
-  onSelect?: (id: string) => void;
+  onQuery?: (query: string) => void;
   /**
-   * callback on change of checked list
+   * callback on click of tree node
    */
-  onChecked?: (leafs: string[], nodes: string[]) => void;
+  onClick?: (id: string, data: T) => void;
   /**
-   * item label renderer
+   * callback on change of checked list
+   * @param leafs - list of checked leaf nodes
+   * @param nodes - list of checked nodes
+   * @param partials - list of partially checked nodes
    */
-  renderer?: (data: T) => JSX.Element;
+  onChecked?: (leafs: string[], nodes: string[], partials: string[]) => void;
   /**
    * item filter matcher
    */
   matcher?: (data: T, query: string) => boolean;
-}
 
-export const iconExpandAll =
-  "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-export const iconCollapseAll =
-  "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
+  sorter?: false | ((a: T, b: T) => number);
+  makeLabel?: (node: T) => Elements<JSX.Element>;
+  makeIcon?: (node: T) => Elements<JSX.Element>;
+
+  defaultExpanded?: string[];
+  onExpandToggle?: (id: string[]) => void;
+
+  leafClassName?: string;
+  nodeClassName?: string;
+}

package/src/tree/useTree.ts

@@ -22,10 +22,20 @@
  */
 
 import { useDebounce } from "@react-fabric/core";
-import { EMPTY_ARRAY } from "@react-fabric/utilities";
+import { EMPTY_ARRAY, isEmpty } from "@react-fabric/utilities";
 import memoizeOne from "memoize-one";
-import { useCallback, useEffect, useReducer, useRef } from "react";
-import { type InternalNode, type TreeNodeType } from "./types";
+import {
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+  useEffectEvent,
+} from "react";
+import {
+  type InternalNode,
+  type TreeNodeType,
+  type TreePanelProps,
+} from "./types";
 import {
   filterTree,
   flattenTree,
@@ -52,6 +62,10 @@ type TreeActions =
    * update item check state
    */
   | { type: "checked"; id: string[] }
+  /**
+   * toggle item select, used as action handler
+   */
+  | { type: "toggleSelect"; id: string; shiftKey?: boolean }
   /**
    * toggle item check, used as action handler
    */
@@ -71,13 +85,18 @@ type TreeActions =
   /**
    * collapse all nodes
    */
-  | { type: "collapseAll" };
+  | { type: "collapseAll" }
+  /**
+   * loaded dynamic nodes
+   */
+  | { type: "loaded" };
 
 interface TreeState {
   items: InternalNode[];
   itemMap: Map<string, InternalNode>;
   tree: InternalNode[];
-  selected?: string;
+  query?: string;
+  selected?: AnyObject;
   checked?: string[];
 }
 
@@ -87,47 +106,139 @@ export const useTree = <T extends KeyValue>({
   items = EMPTY_ARRAY,
   checked = EMPTY_ARRAY,
   selected,
+  multiple,
+  sorter,
   matcher,
+  onLoad,
+  onQuery,
   onSelect,
   onChecked,
-}: {
-  items?: Array<TreeNodeType<T>>;
-  selected?: string;
-  checked?: string[];
-  onSelect?: (id: string) => void;
-  onChecked?: (leafs: string[], nodes: string[]) => void;
-  matcher?: (data: T, query: string) => boolean;
+  defaultExpanded,
+  onExpandToggle,
+}: Partial<TreePanelProps<T>> & {
+  selected?: AnyObject;
+  multiple?: boolean;
 }) => {
-  const componentEvents = useRef({ onSelect, onChecked });
-
+  const eventSelect = useEffectEvent(onSelect ?? (() => undefined));
+  const eventChecked = useEffectEvent(onChecked ?? (() => undefined));
+  const intialExpand = useRef([...(defaultExpanded ?? EMPTY_ARRAY)]);
   const itemList = createItemList(items);
 
+  const fireExpandToggle = useCallback(
+    (itemMap: InternalNode[]) => {
+      const expandedList = itemMap
+        .filter((node) => node.open)
+        .map((node) => node.id);
+      setTimeout(() => onExpandToggle?.(expandedList), 100);
+    },
+    [onExpandToggle],
+  );
+
+  const loadChildren = useCallback(
+    (node: InternalNode) => {
+      if (node.open && !node.leaf && !node.children?.length) {
+        node.loading = true;
+        // delay onload callback to avoid state issues
+        setTimeout(() => {
+          void Promise.resolve(onLoad?.(node.id))
+            .then((resp = EMPTY_ARRAY) => {
+              node.children = refactorTree(
+                resp,
+                { sorter, defaultExpanded },
+                { level: node.level + 1, parent: node.id },
+              );
+            })
+            .finally(() => {
+              node.loading = false;
+              dispatch({ type: "loaded" });
+              intialExpand.current?.length > 0 &&
+                dispatch({
+                  type: "expand",
+                  id: intialExpand.current.shift() as unknown as string,
+                });
+            });
+        }, 100);
+      } else {
+        dispatch({ type: "loaded" });
+        intialExpand.current?.length > 0 &&
+          dispatch({
+            type: "expand",
+            id: intialExpand.current.shift() as unknown as string,
+          });
+      }
+    },
+    [onLoad],
+  );
+
+  const fireSelected = useDebounce((nodeId: any, data: T) => {
+    eventSelect(nodeId, data);
+  }, []);
+
+  const fireChecked = useDebounce(
+    (leafs: string[], nodes: string[], partials: string[]) => {
+      eventChecked(leafs, nodes, partials);
+    },
+    [],
+  );
+
+  const fireQuery = useDebounce(
+    (query: string) => {
+      onQuery?.(query);
+    },
+    [onQuery],
+  );
+
   const [state, dispatch] = useReducer(
     (state: TreeState, action: TreeActions) => {
       if (action.type === "load") {
-        state.items = refactorTree(action.items);
+        state.items = refactorTree(action.items, { sorter, defaultExpanded });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
+        state.selected = undefined;
+        state.checked = undefined;
+        state.query = "";
         return { ...state };
       }
       if (action.type === "toggleExpand") {
         const node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return { ...state };
+        }
+      }
+      if (action.type === "loaded") {
+        state.itemMap = makeTreeMap(state.items);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
+        state.selected = selected;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple,
+          selected,
+        });
+        state.checked?.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state };
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         const node = state.itemMap.get(action.id);
-        node && (node.open = true);
-        state.tree = flattenTree(state.items);
-        return { ...state };
+        if (node && !node.leaf) {
+          node.open = true;
+          let parentId = node.parent;
+          while (parentId) {
+            const node = state.itemMap.get(parentId);
+            node && (node.open = true);
+            parentId = node?.parent;
+          }
+          loadChildren(node);
+          return { ...state };
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach((node) => {
-          !node.leaf && (node.open = true);
+          !node.leaf && node.children?.length && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -135,34 +246,77 @@ export const useTree = <T extends KeyValue>({
         state.itemMap.forEach((node) => {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = flattenTree(state.items);
         return { ...state };
       }
       if (action.type === "filter") {
-        filterTree(state.itemMap, action.query, matcher);
+        if (onQuery) {
+          // TODO: onQuery should provide new tree listing
+          // save current tree state as preQueryState
+          // on clearing filter restore preQueryState
+          if (!isEmpty(action.query)) {
+            // state.prevItems = state.items;
+            fireQuery(action.query);
+          } else {
+            // state.items = state.prevItems;
+            // build tree map
+          }
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+        }
+        return { ...state, query: action.query };
+      }
+      if (action.type === "toggleSelect") {
+        if (multiple) {
+          const isSelected = state.selected?.includes(action.id);
+          if (action.shiftKey && isSelected)
+            state.selected =
+              state.selected?.filter((id: string) => id !== action.id) ?? [];
+          else if (action.shiftKey && !isSelected)
+            state.selected = [...(state.selected ?? []), action.id];
+          else state.selected = [action.id];
+        } else {
+          state.selected = action.id;
+        }
+        updateSelection({
+          nodes: state.itemMap,
+          selected: state.selected,
+          multiple,
+        });
         state.tree = flattenTree(state.items);
+        fireSelected(state.selected, state.itemMap.get(action.id)?.data);
         return { ...state };
       }
       if (action.type === "select") {
-        if (state.selected) {
-          updateSelection(state.itemMap, state.selected);
-        }
-        updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
+        updateSelection({
+          nodes: state.itemMap,
+          multiple,
+          selected: action.id,
+        });
         state.tree = flattenTree(state.items);
-        componentEvents.current.onSelect?.(action.id);
-        return { ...state, selected: action.id };
+        return { ...state };
       }
       if (action.type === "toggleCheck") {
         updateChecked(state.itemMap, action.id);
-        const checkList: string[][] = [[], []];
+        const checkList: string[][] = [[], [], []];
         Array.from(state.itemMap.values())
-          .filter((node) => node.checked === 1)
-          .forEach((node) => checkList[node.leaf ? 0 : 1].push(node.id));
-        componentEvents.current.onChecked?.(checkList[0], checkList[1]);
-        return { ...state };
+          .filter((node) => node.checked !== 0)
+          .forEach((node) =>
+            checkList[node.leaf ? 0 : node.checked].push(node.id),
+          );
+        fireChecked(
+          checkList[0], // leafs
+          checkList[1], // nodes
+          checkList[2], // partials
+        );
+        return { ...state, checked: checkList[0] };
       }
       if (action.type === "checked") {
-        action.id.forEach((id) => updateChecked(state.itemMap, id));
+        state.itemMap.forEach((item) => (item.checked = 0));
+        action.id.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state, checked: action.id };
       }
       return state;
@@ -172,15 +326,20 @@ export const useTree = <T extends KeyValue>({
       items: [],
       tree: [],
       checked: [],
+      query: "",
     },
   );
 
-  useEffect(() => {
-    componentEvents.current = { onSelect, onChecked };
-  }, [onSelect, onChecked]);
-
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    itemList.length &&
+      intialExpand.current?.length > 0 &&
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
+    selected && dispatch({ type: "select", id: selected });
+    checked && dispatch({ type: "checked", id: checked });
   }, [itemList]);
 
   useEffect(() => {
@@ -199,14 +358,24 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "toggleCheck", id });
   }, []);
 
-  const select = useCallback((id: string) => {
-    dispatch({ type: "select", id });
+  const select = useCallback((id: string, shiftKey = false) => {
+    dispatch({ type: "toggleSelect", id, shiftKey });
   }, []);
 
   const expand = useCallback((id: string) => {
     dispatch({ type: "expand", id });
   }, []);
 
+  const expandAndLoad = useCallback((expandList: string[]) => {
+    if (expandList.length > 0) {
+      intialExpand.current = [...expandList];
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
+    }
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -215,16 +384,23 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "collapseAll" });
   }, []);
 
-  const onFilter = useDebounce((query: string) => {
-    dispatch({ type: "filter", query });
-  }, []);
+  const onFilter = useDebounce(
+    (query: string) => {
+      dispatch({ type: "filter", query });
+    },
+    [],
+    300,
+  );
 
   return {
     tree: state.tree,
+    query: state.query,
+    selected: state.selected,
     toggleExpand,
     expandAll,
     collapseAll,
     toggleCheck,
+    expandAndLoad,
     select,
     expand,
     onFilter,

package/src/tree/utils.ts

@@ -21,10 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { compareValues, isString, matchString } from "@react-fabric/utilities";
+import {
+  compareValues,
+  isArray,
+  isString,
+  matchString,
+} from "@react-fabric/utilities";
 import { type InternalNode, type TreeNodeType } from "./types";
 
-const sorter = (a: TreeNodeType, b: TreeNodeType) => {
+const defaultSorter = (a: TreeNodeType, b: TreeNodeType) => {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return compareValues()(a.label, b.label);
 };
@@ -48,13 +53,17 @@ const getIntermediate = (list: AnyObject[] = []) => {
 // convert node item to internal node used by the tree
 export const refactorTree = (
   nodes: TreeNodeType[],
+  {
+    sorter = defaultSorter,
+    defaultExpanded = [],
+  }: { sorter?: any; defaultExpanded?: string[] },
   options: { level: number; parent?: string } = { level: 0, parent: undefined },
 ) => {
   const list: InternalNode[] = [];
-
-  nodes.sort(sorter).forEach((node) => {
+  if (sorter !== false) nodes = nodes.sort(sorter);
+  nodes.forEach((node) => {
     list.push({
-      open: false,
+      open: defaultExpanded.includes(node.id) && !!node.children?.length,
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -66,10 +75,14 @@ export const refactorTree = (
       leaf: !!node.leaf,
       children:
         node.children &&
-        refactorTree(node.children, {
-          level: options.level + 1,
-          parent: node.id,
-        }),
+        refactorTree(
+          node.children,
+          { sorter, defaultExpanded },
+          {
+            level: options.level + 1,
+            parent: node.id,
+          },
+        ),
     });
   });
 
@@ -106,34 +119,59 @@ export const flattenTree = (
           [...lines, idx === filtered.length - 1 ? 0 : 1],
         ),
       );
+    node.open &&
+      node.children?.length === 0 &&
+      list.push({
+        empty: true,
+        leaf: true,
+        lines: [...lines, idx === filtered.length - 1 ? 0 : 1, 2],
+      } as any);
   });
   return list;
 };
 
-export const updateSelection = (
-  nodes: Map<string, InternalNode>,
-  id: string,
-  selected?: true,
-) => {
-  const node = nodes.get(id);
+const selectNode = (nodes: Map<string, InternalNode>, id?: string) => {
+  const node = nodes.get(id ?? "");
   if (node) {
     // change selection
-    node.selected = selected;
+    node.selected = true;
     // update all parent childSelected flag
     let parent = node.parent;
     while (parent) {
       const parentNode = nodes.get(parent);
-      parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      parentNode && (parentNode.childSelected = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode?.parent;
     }
   }
 };
 
-export const updateChecked = (list: Map<string, AnyObject>, id: string) => {
+export const updateSelection = ({
+  nodes,
+  multiple,
+  selected,
+}: {
+  nodes: Map<string, InternalNode>;
+  multiple?: boolean;
+  selected?: string | string[];
+}) => {
+  nodes.forEach((node) => {
+    node.selected = undefined;
+    node.childSelected = undefined;
+  });
+  multiple && isArray(selected)
+    ? selected?.forEach((id) => selectNode(nodes, id))
+    : selectNode(nodes, selected as string);
+};
+
+export const updateChecked = (
+  list: Map<string, AnyObject>,
+  id: string,
+  checked?: 0 | 1 | 2,
+) => {
   const node = list.get(id);
   if (node) {
-    node.checked = node.checked === 1 ? 0 : 1;
+    node.checked = checked ?? node.checked === 0 ? 1 : 0;
     // check all children
     node.children &&
       getChildren(node.children).forEach(