@react-fabric/data 1.0.0-beta.3 → 1.0.0-beta.31

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
    */
@@ -99,6 +107,10 @@ const _VirtualGallery = <T extends KeyValue>({
   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,
       };
     }),
   );
@@ -203,31 +216,23 @@ 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 lastIndex = (lastItem ?? 0) * columnCount + columnCount;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem * columnCount] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastIndex >= count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
@@ -243,7 +248,7 @@ const _VirtualGallery = <T extends KeyValue>({
     () => ({
       scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start",
+          align: "auto",
         });
       },
       hilight(index) {
@@ -251,7 +256,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
@@ -275,6 +280,7 @@ const _VirtualGallery = <T extends KeyValue>({
       className={classNames(
         "area-content bg-base overflow-auto contain-strict",
       )}
+      {...aria}
     >
       <div
         className={classNames(
@@ -284,20 +290,25 @@ const _VirtualGallery = <T extends KeyValue>({
         <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 }) => (
               <div
-                className="flex"
+                className="flex justify-start"
                 key={key}
                 data-index={index}
                 ref={measureElement}

package/src/virtual/List.tsx

@@ -29,6 +29,7 @@
  */
 
 import { Skeleton, useDebounce } 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";
@@ -54,9 +55,9 @@ export interface VirtualListRef {
   unhilight: () => void;
 }
 
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -73,6 +74,8 @@ export interface VirtualListProps<T> {
    * full width list
    */
   fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -85,6 +88,7 @@ export interface VirtualListProps<T> {
    * data list
    */
   items: T[];
+  total?: number;
   initialScroll?: number;
   /**
    * loading state
@@ -108,8 +112,11 @@ const createItemList = memoizeOne((items) => items);
 
 const _VirtualList = <T extends KeyValue>({
   items,
+  total = 0,
   children,
   fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   orientation = "vertical",
   defaultHeight: height = 48,
@@ -120,20 +127,21 @@ const _VirtualList = <T extends KeyValue>({
   onLoadMore,
   onScroll,
   listRef,
+  ...aria
 }: VirtualListProps<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;
     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,
       };
     }),
   );
@@ -199,22 +207,22 @@ const _VirtualList = <T extends KeyValue>({
   }, [itemList, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastItem === count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
@@ -227,14 +235,14 @@ const _VirtualList = <T extends KeyValue>({
     listRef,
     () => ({
       scrollToItem(index) {
-        virtualizer.scrollToIndex(index, { align: "start" });
+        virtualizer.scrollToIndex(index, { align: "auto" });
       },
       hilight(index) {
         scrollerRef.current
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current
@@ -258,6 +266,7 @@ const _VirtualList = <T extends KeyValue>({
       className={classNames(
         "area-content bg-base overflow-auto contain-strict",
       )}
+      {...aria}
     >
       <div
         className={classNames(
@@ -275,12 +284,16 @@ const _VirtualList = <T extends KeyValue>({
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={
               orientation === "vertical"
-                ? { height: virtualizer.getTotalSize() }
-                : { width: virtualizer.getTotalSize() }
+                ? { height: virtualizer.getTotalSize() + extraSize }
+                : { width: virtualizer.getTotalSize() + extraSize }
             }
           >
             <div
@@ -304,9 +317,9 @@ const _VirtualList = <T extends KeyValue>({
               </div>
             ))}
           </div>
-          {onLoadMore && (
-            <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
-              {loading && <Skeleton />}
+          {loading && (
+            <div className={orientation === "horizontal" ? "min-w-16" : ""}>
+              <Skeleton />
             </div>
           )}
         </div>