@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/src/tree/types.ts

@@ -21,22 +21,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  type BadgeType,
-  type ChildProp,
-  type CssProp,
-  type Elements,
-  type IconProps,
-  type RefProp,
-  type TestProps,
-} from "@react-fabric/core/dist/types/types";
+import type { BadgeType } from "@/core/dist/types/components/badge/Badge";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type ChildProp, type CssProp, 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>;
+  label: React.ReactNode;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * full text to be used for querying purposes
    */
@@ -53,29 +51,29 @@ interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
    * disable selection
    */
   disabled?: boolean;
-  data?: T;
+  data: T;
 }
 
 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<T> extends CssProp, TestProps {
   id: string;
-  label: Elements<JSX.Element>;
+  label: React.ReactNode;
   queryable?: string;
   badge?: string | number | BadgeType;
   disabled?: boolean;
   leaf: boolean;
   open: boolean;
-  children?: InternalNode[];
+  children?: InternalNode<T>[];
   level: number;
   loading: boolean;
   filtered: boolean;
@@ -84,36 +82,71 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
   loaded: boolean;
   parent?: string;
   empty?: boolean;
+  icon?: IconProps;
   errored?: string;
   selected?: true;
   childSelected?: true;
   checked: 0 | 1 | 2;
-  data?: AnyObject;
+  data: T;
   last?: boolean;
   lines: Array<0 | 1 | 2 | 3>;
 }
 
-export interface TreeNodeProps extends ChildProp {
-  node: InternalNode;
+export interface TreeNodeProps<T> extends ChildProp {
+  node: InternalNode<T>;
   expanders: [string, string];
-  defaultNodeIcon?: string;
-  defaultLeafIcon?: string;
+  defaultNodeIcon?: string | React.ReactElement;
+  defaultLeafIcon?: string | React.ReactElement;
   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: T) => void;
 }
 
 export interface TreeRef {
   select: (id: string) => void;
   open: (id: string) => void;
+  openAndLoad: (list: string[]) => void;
 }
 
-export interface TreePanelProps<T extends KeyValue = KeyValue>
-  extends TestProps,
-    RefProp<TreeRef> {
+export type TreePanelProps<T extends KeyValue = KeyValue> = BaseTreePanelProps<T> &
+  (
+    | {
+        /**
+         * enable multi select
+         */
+        multiple?: 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;
+      }
+  );
+
+export interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
   /**
    * make tree searchable
@@ -128,17 +161,18 @@ 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
    */
   checked?: string[];
+  selected?: string | string[];
   /**
    * default node icon
    */
@@ -158,31 +192,36 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
   /**
    * callback for lazy loading tree items
    */
-  onLoad?: (
-    id: string,
-  ) =>
-    | Promise<Array<TreeNodeType<T>> | undefined>
-    | Array<TreeNodeType<T>>
-    | undefined;
+  onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | 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";
+  onSelect?: (id: string | string[], data: T) => void;
+
+  sorter?: false | ((a: TreeNodeType<T>, b: TreeNodeType<T>) => number);
+  makeLabel?: (node: T) => React.ReactNode;
+  makeIcon?: (node: T) => React.ReactElement;
+
+  defaultExpanded?: string[];
+  onExpandToggle?: (id: string[]) => void;
+
+  leafClassName?: string;
+  nodeClassName?: string;
+}

package/src/tree/useTree.ts

@@ -22,18 +22,11 @@
  */
 
 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 {
-  filterTree,
-  flattenTree,
-  makeTreeMap,
-  refactorTree,
-  updateChecked,
-  updateSelection,
-} from "./utils";
+import type { BaseTreePanelProps, InternalNode, TreeNodeType } from "./types";
+import { filterTree, flattenTree, makeTreeMap, refactorTree, updateChecked, updateSelection } from "./utils";
 
 type TreeActions =
   /**
@@ -47,11 +40,15 @@ type TreeActions =
   /**
    * update selected item
    */
-  | { type: "select"; id: string }
+  | { type: "select"; id: string | string[] }
   /**
    * 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,98 +68,224 @@ 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;
+interface TreeState<T extends KeyValue> {
+  items: InternalNode<T>[];
+  itemMap: Map<string, InternalNode<T>>;
+  tree: InternalNode<T>[];
+  query?: string;
+  selected?: string | string[];
   checked?: string[];
 }
 
-const createItemList = memoizeOne((items) => items);
+const createItemList = memoizeOne((items) => items as unknown);
 
-export const useTree = <T extends KeyValue>({
+export function 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;
-}) => {
-  const componentEvents = useRef({ onSelect, onChecked });
+  defaultExpanded,
+  onExpandToggle,
+}: Partial<BaseTreePanelProps<T>>) {
+  const eventSelect = onSelect ?? (() => undefined);
+  const eventChecked = onChecked ?? (() => undefined);
+  const intialExpandRef = useRef([...(defaultExpanded ?? EMPTY_ARRAY)]);
+  const itemList = createItemList(items) as TreeNodeType<T>[];
 
-  const itemList = createItemList(items);
+  const fireExpandToggle = useCallback(
+    (itemMap: InternalNode<T>[]) => {
+      const expandedList = itemMap.filter((node) => node.open).map((node) => node.id);
+      setTimeout(() => onExpandToggle?.(expandedList), 100);
+    },
+    [onExpandToggle],
+  );
+
+  const loadChildren = useCallback(
+    (node: InternalNode<T>) => {
+      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<T>(resp, { sorter, defaultExpanded }, { level: node.level + 1, parent: node.id });
+            })
+            .finally(() => {
+              node.loading = false;
+              dispatch({ type: "loaded" });
+              if (intialExpandRef.current?.length > 0)
+                dispatch({
+                  type: "expand",
+                  id: intialExpandRef.current.shift() as unknown as string,
+                });
+            });
+        }, 100);
+      } else {
+        dispatch({ type: "loaded" });
+        if (intialExpandRef.current?.length > 0)
+          dispatch({
+            type: "expand",
+            id: intialExpandRef.current.shift() as unknown as string,
+          });
+      }
+    },
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+    [onLoad],
+  );
+
+  const fireSelected = useDebounce((nodeId: string | string[], 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) => {
+    (state: TreeState<T>, action: TreeActions) => {
       if (action.type === "load") {
-        state.items = refactorTree(action.items);
-        state.itemMap = makeTreeMap(state.items);
+        state.items = refactorTree(action.items, { sorter, defaultExpanded });
+        state.itemMap = makeTreeMap<T>(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) {
+          if (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);
+            if (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);
+          if (!node.leaf && node.children?.length) node.open = true;
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return { ...state };
       }
       if (action.type === "collapseAll") {
         state.itemMap.forEach((node) => {
-          !node.leaf && (node.open = false);
+          if (!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<T>(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);
+          // @ts-expect-error ignore
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+          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],
+        );
+        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,23 +295,28 @@ export const useTree = <T extends KeyValue>({
       items: [],
       tree: [],
       checked: [],
+      query: "",
     },
   );
 
-  useEffect(() => {
-    componentEvents.current = { onSelect, onChecked };
-  }, [onSelect, onChecked]);
-
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    if (itemList.length && intialExpandRef.current?.length > 0)
+      dispatch({
+        type: "expand",
+        id: intialExpandRef.current.shift() as unknown as string,
+      });
+    if (selected) dispatch({ type: "select", id: selected });
+    if (checked) dispatch({ type: "checked", id: checked });
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [itemList]);
 
   useEffect(() => {
-    selected && dispatch({ type: "select", id: selected });
+    if (selected) dispatch({ type: "select", id: selected });
   }, [selected]);
 
   useEffect(() => {
-    checked && dispatch({ type: "checked", id: checked });
+    if (checked) dispatch({ type: "checked", id: checked });
   }, [checked]);
 
   const toggleExpand = useCallback((id: string) => {
@@ -199,14 +327,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) {
+      intialExpandRef.current = [...expandList];
+      dispatch({
+        type: "expand",
+        id: intialExpandRef.current.shift() as unknown as string,
+      });
+    }
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -215,18 +353,25 @@ 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,
   };
-};
+}