next-data-kit 7.4.1 → 7.6.0

package/dist/index.cjs

@@ -11,6 +11,7 @@ var SwitchPrimitive = require('@radix-ui/react-switch');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var SelectPrimitive = require('@radix-ui/react-select');
+var reactIntersectionObserver = require('react-intersection-observer');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -611,6 +612,7 @@ var useDataKit = (props) => {
       mounted.current = false;
     };
   }, []);
+  const hasNextPage = page * limit < total;
   return {
     page,
     limit,
@@ -620,7 +622,7 @@ var useDataKit = (props) => {
     query,
     items,
     total,
-    state: { isLoading, error },
+    state: { isLoading, error, hasNextPage },
     actions: {
       setPage,
       setLimit,
@@ -1799,6 +1801,240 @@ var DataKitInner = (props, ref) => {
   ] });
 };
 var DataKit = React2__namespace.default.forwardRef(DataKitInner);
+var DataKitInfinityInner = (props, ref) => {
+  const {
+    action,
+    query,
+    filterConfig,
+    filters = [],
+    limit: limitConfig,
+    defaultSort = [],
+    className,
+    autoFetch = true,
+    debounce: debounce2 = 300,
+    state: stateMode = "memory",
+    inverse = false,
+    manual = false,
+    pullDownToRefresh,
+    children
+  } = props;
+  const containerRef = React2.useRef(null);
+  const scrollContainerRef = React2.useRef(null);
+  const [allItems, setAllItems] = React2.useState([]);
+  const [isFilterOpen, setIsFilterOpen] = React2.useState(false);
+  const [isPullRefreshing, setIsPullRefreshing] = React2.useState(false);
+  const [pullStartY, setPullStartY] = React2.useState(0);
+  const [pullDistance, setPullDistance] = React2.useState(0);
+  const overlayContainer = containerRef.current;
+  const pullThreshold = pullDownToRefresh?.threshold ?? 50;
+  const dataKit = useDataKit({
+    action,
+    filterConfig,
+    autoFetch: false,
+    // We'll control fetching manually
+    debounce: debounce2,
+    state: stateMode,
+    initial: {
+      limit: limitConfig?.default ?? 10,
+      query: query ?? {},
+      sorts: defaultSort,
+      filter: filters.reduce((acc, f) => {
+        if (f.defaultValue !== void 0) acc[f.id] = f.defaultValue;
+        return acc;
+      }, {})
+    }
+  });
+  const { ref: loadMoreRef, inView } = reactIntersectionObserver.useInView({
+    threshold: 0,
+    rootMargin: "100px"
+  });
+  React2__namespace.default.useImperativeHandle(ref, () => dataKit, [dataKit]);
+  const handleResetFilters = React2.useCallback(() => {
+    filters.forEach((f) => {
+      dataKit.actions.setFilter(f.id, f.defaultValue ?? (f.type === "BOOLEAN" ? false : ""));
+    });
+  }, [filters, dataKit.actions]);
+  const loadMore = React2.useCallback(async () => {
+    if (dataKit.state.isLoading || !dataKit.state.hasNextPage) return;
+    dataKit.actions.setPage(dataKit.page + 1);
+  }, [dataKit]);
+  const resetAndFetch = React2.useCallback(async () => {
+    setAllItems([]);
+    dataKit.actions.setPage(1);
+    await dataKit.actions.refresh();
+  }, [dataKit.actions]);
+  const handleTouchStart = React2.useCallback((e) => {
+    if (!pullDownToRefresh?.isActive) return;
+    const scrollTop = scrollContainerRef.current?.scrollTop ?? 0;
+    if (scrollTop === 0 && e.touches && e.touches[0]) {
+      setPullStartY(e.touches[0].clientY);
+    }
+  }, [pullDownToRefresh?.isActive]);
+  const handleTouchMove = React2.useCallback((e) => {
+    if (!pullDownToRefresh?.isActive || pullStartY === 0) return;
+    if (!e.touches || !e.touches[0]) return;
+    const scrollTop = scrollContainerRef.current?.scrollTop ?? 0;
+    if (scrollTop === 0) {
+      const distance = e.touches[0].clientY - pullStartY;
+      if (distance > 0) {
+        setPullDistance(Math.min(distance, pullThreshold * 2));
+        if (distance > pullThreshold * 2) {
+          e.preventDefault();
+        }
+      }
+    }
+  }, [pullDownToRefresh?.isActive, pullStartY, pullThreshold]);
+  const handleTouchEnd = React2.useCallback(async () => {
+    if (!pullDownToRefresh?.isActive) return;
+    if (pullDistance > pullThreshold) {
+      setIsPullRefreshing(true);
+      await resetAndFetch();
+      setIsPullRefreshing(false);
+    }
+    setPullStartY(0);
+    setPullDistance(0);
+  }, [pullDownToRefresh?.isActive, pullDistance, pullThreshold, resetAndFetch]);
+  React2.useEffect(() => {
+    if (!pullDownToRefresh?.isActive) return;
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.addEventListener("touchstart", handleTouchStart);
+    container.addEventListener("touchmove", handleTouchMove, { passive: false });
+    container.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      container.removeEventListener("touchstart", handleTouchStart);
+      container.removeEventListener("touchmove", handleTouchMove);
+      container.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [pullDownToRefresh?.isActive, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  React2.useEffect(() => {
+    if (autoFetch && dataKit.page === 1 && allItems.length === 0) {
+      dataKit.actions.refresh();
+    }
+  }, [autoFetch]);
+  React2.useEffect(() => {
+    if (dataKit.items.length > 0) {
+      setAllItems((prev) => {
+        if (dataKit.page === 1) {
+          return dataKit.items;
+        }
+        const newItems = dataKit.items.filter(
+          (newItem) => !prev.some((existingItem) => existingItem.id === newItem.id)
+        );
+        return inverse ? [...newItems, ...prev] : [...prev, ...newItems];
+      });
+    }
+  }, [dataKit.items, dataKit.page, inverse]);
+  React2.useEffect(() => {
+    if (inView && !inverse) {
+      loadMore();
+    }
+  }, [inView, inverse, loadMore]);
+  React2.useEffect(() => {
+    if (!inverse) return;
+    const handleScroll = () => {
+      const container2 = scrollContainerRef.current;
+      if (!container2) return;
+      if (container2.scrollTop === 0 && !dataKit.state.isLoading && dataKit.state.hasNextPage) {
+        loadMore();
+      }
+    };
+    const container = scrollContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+      return () => container.removeEventListener("scroll", handleScroll);
+    }
+    return void 0;
+  }, [inverse, loadMore, dataKit.state.isLoading, dataKit.state.hasNextPage]);
+  const enhancedDataKit = {
+    ...dataKit,
+    items: allItems
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `flex flex-col ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isFilterOpen, onOpenChange: setIsFilterOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "mr-1.5 size-4" }),
+            "Filters"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", className: "w-80", container: overlayContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: filters.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: f.label }),
+              f.type === "TEXT" && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  className: "h-9 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+                  placeholder: f.placeholder,
+                  value: dataKit.filter[f.id] ?? "",
+                  onChange: (e) => dataKit.actions.setFilter(f.id, e.target.value)
+                }
+              ),
+              f.type === "SELECT" && /* @__PURE__ */ jsxRuntime.jsxs(
+                Select,
+                {
+                  value: String(dataKit.filter[f.id] || "__all__"),
+                  onValueChange: (v) => dataKit.actions.setFilter(f.id, v === "__all__" ? "" : v),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { container: overlayContainer, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "__all__", children: "All" }),
+                      f.dataset?.map((d) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: d.id, children: d.label }, d.id))
+                    ] })
+                  ]
+                }
+              ),
+              f.type === "BOOLEAN" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: f.placeholder ?? "Enable" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Switch,
+                  {
+                    checked: Boolean(dataKit.filter[f.id]),
+                    onCheckedChange: (c) => dataKit.actions.setFilter(f.id, c)
+                  }
+                )
+              ] })
+            ] }, f.id)) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-between border-t pt-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: handleResetFilters, children: "Reset" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: () => setIsFilterOpen(false), children: "Done" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: resetAndFetch, disabled: dataKit.state.isLoading, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `mr-1.5 size-4 ${dataKit.state.isLoading ? "animate-spin" : ""}` }),
+          "Refresh"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 text-sm text-muted-foreground", children: [
+        allItems.length,
+        " loaded"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: "relative flex-1 overflow-auto", children: [
+      pullDownToRefresh?.isActive && pullDistance > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 top-0 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-all",
+          style: { height: `${pullDistance}px` },
+          children: pullDistance > pullThreshold ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Pull to refresh" })
+        }
+      ),
+      isPullRefreshing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }),
+      inverse && dataKit.state.hasNextPage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-4", children: dataKit.state.isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }),
+      manual ? children(enhancedDataKit) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children(enhancedDataKit),
+        !dataKit.state.isLoading && allItems.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-48 items-center justify-center text-muted-foreground", children: "No results found." })
+      ] }),
+      !inverse && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: "flex items-center justify-center py-4", children: !manual && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        dataKit.state.isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin text-muted-foreground" }),
+        !dataKit.state.isLoading && !dataKit.state.hasNextPage && allItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "You're all set" })
+      ] }) })
+    ] })
+  ] });
+};
+React2__namespace.default.forwardRef(DataKitInfinityInner);
 
 exports.DataKit = DataKit;
 exports.DataKitContext = DefaultDataKitContext;