@react-fabric/data 1.0.0-beta.25 → 1.0.0-beta.27

package/src/tree/useTree.ts

@@ -25,7 +25,11 @@ import { useDebounce } from "@react-fabric/core";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
 import memoizeOne from "memoize-one";
 import { useCallback, useEffect, useReducer, useRef } from "react";
-import { type InternalNode, type TreeNodeType } from "./types";
+import {
+  type InternalNode,
+  type TreeNodeType,
+  type TreePanelProps,
+} from "./types";
 import {
   filterTree,
   flattenTree,
@@ -71,7 +75,11 @@ type TreeActions =
   /**
    * collapse all nodes
    */
-  | { type: "collapseAll" };
+  | { type: "collapseAll" }
+  /**
+   * loaded dynamic nodes
+   */
+  | { type: "loaded" };
 
 interface TreeState {
   items: InternalNode[];
@@ -87,47 +95,103 @@ export const useTree = <T extends KeyValue>({
   items = EMPTY_ARRAY,
   checked = EMPTY_ARRAY,
   selected,
+  sorter,
   matcher,
+  onLoad,
   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>>) => {
   const componentEvents = useRef({ onSelect, onChecked });
-
+  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);
+      onExpandToggle?.(expandedList);
+    },
+    [onExpandToggle],
+  );
+
+  const loadChildren = useCallback(
+    (node: InternalNode) => {
+      if (node.open && !node.leaf && !node.children?.length) {
+        node.loading = true;
+        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,
+              });
+          });
+      } else {
+        dispatch({ type: "loaded" });
+        intialExpand.current?.length > 0 &&
+          dispatch({
+            type: "expand",
+            id: intialExpand.current.shift() as unknown as string,
+          });
+      }
+    },
+    [onLoad],
+  );
+
   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);
         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 && updateSelection(state.itemMap, state.selected, true);
         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,6 +199,7 @@ export const useTree = <T extends KeyValue>({
         state.itemMap.forEach((node) => {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -149,7 +214,10 @@ export const useTree = <T extends KeyValue>({
         }
         updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
-        componentEvents.current.onSelect?.(action.id);
+        componentEvents.current.onSelect?.(
+          action.id,
+          state.itemMap.get(action.id)?.data,
+        );
         return { ...state, selected: action.id };
       }
       if (action.type === "toggleCheck") {
@@ -181,6 +249,11 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    intialExpand.current?.length > 0 &&
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
   }, [itemList]);
 
   useEffect(() => {

package/src/tree/utils.ts

@@ -24,7 +24,7 @@
 import { compareValues, 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 +48,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: false, // defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -66,10 +70,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,
+          },
+        ),
     });
   });