@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.52

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,104 @@ export const useTree = <T extends KeyValue>({
   items = EMPTY_ARRAY,
   checked = EMPTY_ARRAY,
   selected,
+  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>>) => {
   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);
+      setTimeout(() => onExpandToggle?.(expandedList), 100);
+    },
+    [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,13 +200,18 @@ 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);
-        state.tree = flattenTree(state.items);
-        return { ...state };
+        if (onQuery) {
+          onQuery(action.query ?? "");
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+          return { ...state };
+        }
       }
       if (action.type === "select") {
         if (state.selected) {
@@ -149,7 +219,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 +254,12 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    itemList.length &&
+      intialExpand.current?.length > 0 &&
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
   }, [itemList]);
 
   useEffect(() => {
@@ -215,9 +294,13 @@ 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,

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: defaultExpanded.includes(node.id) && !!node.children?.length,
       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,
+          },
+        ),
     });
   });
 
@@ -106,6 +114,13 @@ 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;
 };

package/src/virtual/Gallery.tsx

@@ -22,6 +22,7 @@
  */
 
 import { Skeleton, useDebounce, useEffectDebugger } from "@react-fabric/core";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import classNames from "classnames";
@@ -47,9 +48,9 @@ export interface VirtualGalleryRef {
   unhilight: () => void;
 }
 
-export interface VirtualGalleryProps<T> {
+export interface VirtualGalleryProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -66,6 +67,12 @@ export interface VirtualGalleryProps<T> {
    * default item width
    */
   defaultWidth?: number;
+  /**
+   * full width list
+   */
+  fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -74,6 +81,7 @@ export interface VirtualGalleryProps<T> {
    * data list
    */
   items: T[];
+  total?: number;
   /**
    * loading state
    */
@@ -86,7 +94,7 @@ export interface VirtualGalleryProps<T> {
   /**
    * load more callback
    */
-  onLoadMore?: () => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -95,10 +103,14 @@ export interface VirtualGalleryProps<T> {
 
 const createItemList = memoize((items) => items);
 
-const _VirtualGallery = <T extends KeyValue>({
+const _VirtualGallery = <T extends AnyObject>({
   items,
   children,
   columns,
+  fullWidth,
+  maxWidth,
+  minWidth,
+  total = 0,
   padding = "md",
   defaultHeight: height = 48,
   defaultWidth: width = 48,
@@ -108,20 +120,21 @@ const _VirtualGallery = <T extends KeyValue>({
   onLoadMore,
   onScroll,
   galleryRef,
+  ...aria
 }: VirtualGalleryProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -137,9 +150,19 @@ const _VirtualGallery = <T extends KeyValue>({
       if (scrollerRef.current) {
         const el = scrollerRef.current;
         const handler = () => {
+          const pad = parseInt(
+            getComputedStyle(el.firstElementChild?.firstElementChild as any)
+              .padding ?? 8,
+          );
           setColumnCount(
             columns ??
-              Math.max(1, Math.floor(((el?.offsetWidth ?? 800) - 32) / width)),
+              Math.max(
+                1,
+                Math.floor(
+                  ((el?.offsetWidth ?? 800) - 32 - (isNaN(pad) ? 8 : pad) * 2) /
+                    width,
+                ),
+              ),
           );
         };
         const ob = new ResizeObserver(handler);
@@ -159,6 +182,7 @@ const _VirtualGallery = <T extends KeyValue>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
+    overscan: 2,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
@@ -203,31 +227,24 @@ const _VirtualGallery = <T extends KeyValue>({
   }, [count, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (
-        lastItem &&
-        !loading &&
-        lastItem.index * columnCount + columnCount >= count - 1
-      )
-        onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (
-      onLoadMore &&
-      firstItem !== undefined &&
-      items[firstItem * columnCount] === null
-    ) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const firstIndex = firstItem * columnCount;
+      const lastIndex = (lastItem ?? 0) * columnCount + columnCount;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstIndex] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastIndex >= count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstIndex);
+      } else if (!loading && canLoadNextPage) {
+        db(lastIndex + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
@@ -243,7 +260,7 @@ const _VirtualGallery = <T extends KeyValue>({
     () => ({
       scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
       },
       hilight(index) {
@@ -251,7 +268,7 @@ const _VirtualGallery = <T extends KeyValue>({
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current
@@ -272,35 +289,39 @@ const _VirtualGallery = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
+      {...aria}
     >
       <div
         className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+          "flex flex-nowrap justify-center gap-2 min-h-full",
         )}
       >
         <div
           className={classNames(
             "box-content",
+            fullWidth && "flex-1",
             padding === "sm" && "p-1",
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={{
-              height: virtualizer.getTotalSize(),
+              height: virtualizer.getTotalSize() + extraSize,
             }}
           >
             <div style={{ height: virtualItems[0]?.start }} />
-            {virtualItems.map(({ key, index, measureElement }) => (
+            {virtualItems.map(({ key, index }) => (
               <div
                 className="flex"
                 key={key}
                 data-index={index}
-                ref={measureElement}
+                ref={virtualizer.measureElement}
               >
                 {columnMap.map((col) => (
                   <div
@@ -346,4 +367,37 @@ const _VirtualGallery = <T extends KeyValue>({
 _VirtualGallery.displayName = "VirtualGallery";
 
 const GenericMemo: <T>(c: T) => T = memo;
+
+/**
+ * VirtualGallery component provides a virtualized gallery view for displaying a large list of items efficiently.
+ * It supports features like fixed columns, loading states, and customizable item rendering.
+ * The component uses virtualization to render only the visible items, improving performance for large datasets.
+ * It also provides a scroller for easy navigation through the items.
+ *
+ * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
+ * @returns {JSX.Element} The rendered VirtualGallery component.
+ *
+ * @example
+ * ```jsx
+ * <VirtualGallery
+ *   items={items}
+ *   columns={3}
+ *   defaultHeight={100}
+ *   defaultWidth={100}
+ *   fullWidth={true}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualGallery>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-virtualgallery--docs}
+ * @see {@link https://tanstack.com/docs/react-virtual/latest/overview}
+ */
 export const VirtualGallery = GenericMemo(_VirtualGallery);