@react-fabric/data 1.0.0-beta.54 → 1.0.0-beta.56

package/src/tree/useTree.ts

@@ -22,7 +22,7 @@
  */
 
 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 {
@@ -56,6 +56,10 @@ type TreeActions =
    * update item check state
    */
   | { type: "checked"; id: string[] }
+  /**
+   * toggle item select, used as action handler
+   */
+  | { type: "toggleSelect"; id: string }
   /**
    * toggle item check, used as action handler
    */
@@ -85,6 +89,7 @@ interface TreeState {
   items: InternalNode[];
   itemMap: Map<string, InternalNode>;
   tree: InternalNode[];
+  query?: string;
   selected?: string;
   checked?: string[];
 }
@@ -105,7 +110,7 @@ export const useTree = <T extends KeyValue>({
   onExpandToggle,
 }: Partial<TreePanelProps<T>>) => {
   const componentEvents = useRef({ onSelect, onChecked });
-  const intialExpand = useRef(defaultExpanded ?? EMPTY_ARRAY);
+  const intialExpand = useRef([...(defaultExpanded ?? EMPTY_ARRAY)]);
   const itemList = createItemList(items);
 
   const fireExpandToggle = useCallback(
@@ -122,23 +127,26 @@ export const useTree = <T extends KeyValue>({
     (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,
-              });
-          });
+        // 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 &&
@@ -151,12 +159,36 @@ export const useTree = <T extends KeyValue>({
     [onLoad],
   );
 
+  const fireSelected = useDebounce(
+    (nodeId: string, data: T) => {
+      componentEvents.current.onSelect?.(nodeId, data);
+    },
+    [onSelect],
+  );
+
+  const fireChecked = useDebounce(
+    (leafs: string[], nodes: string[], partials: string[]) => {
+      componentEvents.current.onChecked?.(leafs, nodes, partials);
+    },
+    [onChecked],
+  );
+
+  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, { 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") {
@@ -171,7 +203,8 @@ export const useTree = <T extends KeyValue>({
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
-        state.selected && updateSelection(state.itemMap, state.selected, true);
+        state.selected = updateSelection(state.itemMap, selected, true);
+        state.checked?.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state };
       }
       if (action.type === "expand") {
@@ -206,36 +239,60 @@ export const useTree = <T extends KeyValue>({
       }
       if (action.type === "filter") {
         if (onQuery) {
-          onQuery(action.query ?? "");
+          // 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 };
         }
+        return { ...state, query: action.query };
+      }
+      if (action.type === "toggleSelect") {
+        if (!onSelect) {
+          if (state.selected) {
+            updateSelection(state.itemMap, state.selected);
+          }
+          state.selected = updateSelection(state.itemMap, action.id, true);
+          state.tree = flattenTree(state.items);
+        } else {
+          fireSelected(action.id, 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 = updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
-        componentEvents.current.onSelect?.(
-          action.id,
-          state.itemMap.get(action.id)?.data,
-        );
-        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;
@@ -245,6 +302,7 @@ export const useTree = <T extends KeyValue>({
       items: [],
       tree: [],
       checked: [],
+      query: "",
     },
   );
 
@@ -260,6 +318,8 @@ export const useTree = <T extends KeyValue>({
         type: "expand",
         id: intialExpand.current.shift() as unknown as string,
       });
+    selected && dispatch({ type: "select", id: selected });
+    checked && dispatch({ type: "checked", id: checked });
   }, [itemList]);
 
   useEffect(() => {
@@ -279,13 +339,20 @@ export const useTree = <T extends KeyValue>({
   }, []);
 
   const select = useCallback((id: string) => {
-    dispatch({ type: "select", id });
+    dispatch({ type: "toggleSelect", id });
   }, []);
 
   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 string });
+    }
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -304,10 +371,13 @@ export const useTree = <T extends KeyValue>({
 
   return {
     tree: state.tree,
+    query: state.query,
+    selected: state.selected,
     toggleExpand,
     expandAll,
     collapseAll,
     toggleCheck,
+    expandAndLoad,
     select,
     expand,
     onFilter,

package/src/tree/utils.ts

@@ -127,10 +127,10 @@ export const flattenTree = (
 
 export const updateSelection = (
   nodes: Map<string, InternalNode>,
-  id: string,
+  id?: string,
   selected?: true,
 ) => {
-  const node = nodes.get(id);
+  const node = nodes.get(id ?? "");
   if (node) {
     // change selection
     node.selected = selected;
@@ -139,16 +139,22 @@ export const updateSelection = (
     while (parent) {
       const parentNode = nodes.get(parent);
       parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode?.parent;
     }
+    return id;
   }
 };
 
-export const updateChecked = (list: Map<string, AnyObject>, id: 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 === undefined ? (node.checked === 0 ? 1 : 0) : checked;
     // check all children
     node.children &&
       getChildren(node.children).forEach(

package/src/virtual/Gallery.tsx

@@ -189,7 +189,7 @@ const _VirtualGallery = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[2]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&

package/src/virtual/List.tsx

@@ -159,7 +159,7 @@ const _VirtualList = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[2]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&