@react-fabric/data 1.0.0-beta.8 → 1.0.1

package/src/virtual/Gallery.tsx

@@ -23,9 +23,8 @@
 
 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 { cn, debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import classNames from "classnames";
 import memoize from "memoize-one";
 import {
   memo,
@@ -49,11 +48,7 @@ export interface VirtualGalleryRef {
 }
 
 export interface VirtualGalleryProps<T> extends TestProps {
-  children: (props: {
-    data: T;
-    index: number;
-    isLast: boolean;
-  }) => ReactElement;
+  children: (props: { item: T; index: number; isLast: boolean }) => ReactElement;
   galleryRef?: Ref<VirtualGalleryRef | undefined>;
   /**
    * fixed columns
@@ -67,6 +62,12 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * default item width
    */
   defaultWidth?: number;
+  /**
+   * full width list
+   */
+  fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -75,6 +76,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   /**
    * loading state
    */
@@ -87,19 +89,23 @@ export interface VirtualGalleryProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: () => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
   onScroll?: (top: number) => void;
 }
 
-const createItemList = memoize((items) => items);
+const createItemList = memoize((items) => items as never);
 
-const _VirtualGallery = <T extends KeyValue>({
+const VirtualGalleryComponent = <T extends AnyObject>({
   items,
   children,
   columns,
+  fullWidth,
+  maxWidth,
+  minWidth,
+  total = 0,
   padding = "md",
   defaultHeight: height = 48,
   defaultWidth: width = 48,
@@ -112,36 +118,33 @@ const _VirtualGallery = <T extends KeyValue>({
   ...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, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
 
   const scrollerRef = useRef<HTMLDivElement>(null);
   const [columnCount, setColumnCount] = useState(1);
-  const columnMap = useMemo(
-    () => new Array(columnCount).fill(0).map((_, idx) => idx),
-    [columnCount],
-  );
+  const columnMap = useMemo(() => new Array(columnCount).fill(0).map((_, idx) => idx), [columnCount]);
   useEffectDebugger(
     () => {
       if (scrollerRef.current) {
         const el = scrollerRef.current;
         const handler = () => {
+          const pad = parseInt(getComputedStyle(el.firstElementChild?.firstElementChild as HTMLElement).padding ?? 8);
           setColumnCount(
-            columns ??
-              Math.max(1, Math.floor(((el?.offsetWidth ?? 800) - 32) / width)),
+            columns ?? Math.max(1, Math.floor(((el?.offsetWidth ?? 800) - 32 - (isNaN(pad) ? 8 : pad) * 2) / width)),
           );
         };
         const ob = new ResizeObserver(handler);
@@ -161,183 +164,162 @@ const _VirtualGallery = <T extends KeyValue>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
+    overscan: 0,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
 
-  const currentIndex = useRef(0);
+  const currentIndexRef = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
-    if (
-      scrollerRef.current &&
-      virtualItems[0] &&
-      scrollerRef.current.scrollTop < virtualItems[0].size
-    )
-      currentIndex.current = 0;
+    currentIndexRef.current = virtualItems[0]?.index ?? 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size)
+      currentIndexRef.current = 0;
   }, [virtualItems]);
 
   const calculateActiveScroll = useCallback(() => {
-    const {
-      scrollTop = 0,
-      scrollHeight = 0,
-      offsetHeight = 0,
-    } = (scrollerRef.current ?? {}) as HTMLElement;
+    const { scrollTop = 0, scrollHeight = 0, offsetHeight = 0 } = (scrollerRef.current ?? {}) as HTMLElement;
     if (scrollHeight === offsetHeight) return 0;
 
     if (scrollTop === 0) return 1;
     if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
 
     return 3;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
 
   const [scrollActive, setScrollActive] = useState(0);
-  const fireScrollEvent = useDebounce(
-    (idx: number) => onScroll?.(currentIndex.current * idx),
-    [onScroll],
-  );
+  const fireScrollEvent = useDebounce((idx: number) => onScroll?.(currentIndexRef.current * idx), [onScroll]);
   const handleScroll = useCallback(() => {
     setScrollActive(calculateActiveScroll());
     fireScrollEvent(columnCount);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [columnCount, onLoadMore]);
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setScrollActive(calculateActiveScroll());
   }, [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]);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
-      initialScroll &&
-        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-          align: "start",
-        });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      if (initialScroll) {
+        const tmr = setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+            align: "start",
+          });
+        }, 200);
+        return () => {
+          clearTimeout(tmr);
+        };
+      }
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [columnCount, initialScroll, itemList]);
 
   useImperativeHandle(
     galleryRef,
     () => ({
       scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
       },
       hilight(index) {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
-        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+        const el = scrollerRef.current?.querySelector("[data-selected='true']") as HTMLElement;
+        if (el) el.dataset.selected = "false";
+        virtualizer.scrollToIndex(Math.floor(index), {
+          align: "auto",
         });
         setTimeout(() => {
-          scrollerRef.current
-            ?.querySelector(`[data-index="${index}"]`)
-            ?.classList.add("hilight", "ring-1");
+          const el = scrollerRef.current?.querySelector(`[data-index="${index}"]`) as HTMLElement;
+          if (el) el.dataset.selected = "true";
         }, 100);
       },
       unhilight() {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
+        const el = scrollerRef.current?.querySelector("[data-selected='true']") as HTMLElement;
+        if (el) el.dataset.selected = "false";
       },
     }),
     [virtualizer, columnCount],
   );
 
   return (
-    <div
-      ref={scrollerRef}
-      onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
-      {...aria}
-    >
-      <div
-        className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
-        )}
-      >
+    <div ref={scrollerRef} onScroll={handleScroll} className={cn("area-content bg-default overflow-auto")} {...aria}>
+      <div className={cn("flex flex-nowrap justify-center gap-2 min-h-full")}>
         <div
-          className={classNames(
+          className={cn(
             "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 }) => (
-              <div
-                className="flex"
-                key={key}
-                data-index={index}
-                ref={measureElement}
-              >
+            {virtualItems.map(({ key, index }) => (
+              <div className="flex" key={key} data-index={index} ref={virtualizer.measureElement}>
                 {columnMap.map((col) => (
                   <div
                     key={`${key}:${col}`}
                     data-index={index * columnCount + col}
-                    className={classNames("grid rounded-capped")}
+                    className={cn("grid rounded-capped")}
+                    style={{
+                      minWidth: width,
+                      minHeight: height,
+                    }}
                   >
-                    {itemList[index * columnCount + col] &&
-                      children(
-                        itemList[index * columnCount + col] as AnyObject,
-                      )}
+                    {itemList[index * columnCount + col]?.item
+                      ? children(itemList[index * columnCount + col])
+                      : itemList[index * columnCount + col]?.item === null && <Skeleton className="p-2" />}
                   </div>
                 ))}
               </div>
             ))}
-            {onLoadMore && (
-              <div className="h-16">{loading && <Skeleton />}</div>
+            {loading && (
+              <div>
+                <Skeleton />
+              </div>
             )}
           </div>
         </div>
         {!hideScroller && (
-          <div className={classNames("self-end sticky bottom-2")}>
+          <div className={cn("self-end sticky bottom-2")}>
             <Scroller
               vertical
               scrollActive={scrollActive}
               onStart={() => virtualizer.scrollToIndex(0)}
-              onPrevious={() =>
-                scrollerRef.current &&
-                virtualizer.scrollBy(-scrollerRef.current.offsetHeight)
-              }
-              onNext={() =>
-                scrollerRef.current &&
-                virtualizer.scrollBy(scrollerRef.current.offsetHeight)
-              }
+              onPrevious={() => scrollerRef.current && virtualizer.scrollBy(-scrollerRef.current.offsetHeight)}
+              onNext={() => scrollerRef.current && virtualizer.scrollBy(scrollerRef.current.offsetHeight)}
               onEnd={() => virtualizer.scrollToIndex(count - 1)}
             />
           </div>
@@ -346,7 +328,34 @@ const _VirtualGallery = <T extends KeyValue>({
     </div>
   );
 };
-_VirtualGallery.displayName = "VirtualGallery";
 
 const GenericMemo: <T>(c: T) => T = memo;
-export const VirtualGallery = GenericMemo(_VirtualGallery);
+
+/**
+ * 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.
+ *
+ * @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://tanstack.com/docs/react-virtual/latest/overview}
+ */
+export const VirtualGallery = GenericMemo(VirtualGalleryComponent);