react-resource-ui 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -73,7 +73,8 @@ function useResource(config) {
   const getData = (0, import_react.useMemo)(() => normalizeSource(source), [source]);
   const prevScrollTop = (0, import_react.useRef)(0);
   const scrollRef = (0, import_react.useRef)(null);
-  const hasMore = (0, import_react.useRef)(true);
+  const [hasNext, setHasNext] = (0, import_react.useState)(true);
+  const total = (0, import_react.useRef)(null);
   async function asyncNormalize(localPage) {
     const params = {
       page: localPage,
@@ -92,12 +93,14 @@ function useResource(config) {
   async function orchestrator() {
     const isPageMode = pagination?.type === "page";
     prevScrollTop.current = scrollTop;
-    const cached = cache.current[page];
+    const localPage = page;
+    const cached = cache.current[localPage];
     if (isPageMode && cached) {
       setData(cached);
       return;
     }
-    const localPage = page;
+    setHasNext(true);
+    total.current = null;
     requestTracker.current += 1;
     const currentRequestId = requestTracker.current;
     setLoading(true);
@@ -113,9 +116,21 @@ function useResource(config) {
       setError(result.error);
       return;
     }
-    const rawData = result.data;
-    if (!rawData || rawData.length < 1) return;
-    if (rawData.length < pageSize) hasMore.current = false;
+    let rawData;
+    if (Array.isArray(result.data)) {
+      rawData = result.data;
+    } else {
+      total.current = result.data.total;
+      rawData = result.data.data;
+    }
+    if (total.current !== null) {
+      setHasNext(localPage < Math.ceil(total.current / pageSize));
+    } else {
+      if (rawData.length < pageSize) {
+        setHasNext(false);
+      }
+    }
+    if (!rawData) return;
     setData((prev) => {
       if (isPageMode) return rawData;
       const indexStart = (localPage - 1) * pageSize;
@@ -135,7 +150,7 @@ function useResource(config) {
     }
   }
   (0, import_react.useEffect)(() => {
-    if (!hasMore.current) return;
+    if (!hasNext) return;
     if (pagination?.type !== "infinite") return;
     const el = scrollRef.current;
     if (!el) return;
@@ -145,7 +160,7 @@ function useResource(config) {
         setPage((prev) => prev + 1);
       })();
     }
-  }, [scrollTop, pagination?.type, loading]);
+  }, [scrollTop, pagination?.type, loading, hasNext]);
   (0, import_react.useEffect)(() => {
     orchestrator();
   }, [page, pageSize, source, pagination?.type]);
@@ -168,39 +183,59 @@ function useResource(config) {
   let offsetY = 0;
   let totalHeight = 0;
   if (shouldVirtualize) {
-    const total = data.length;
+    const total2 = data.length;
     const rawStart = Math.floor(scrollTop / itemHeight);
     const startIndex = Math.max(0, rawStart - 2);
     const visibleCount = Math.ceil(containerHeight / itemHeight);
-    const endIndex = Math.min(startIndex + visibleCount + 4, total);
+    const endIndex = Math.min(startIndex + visibleCount + 4, total2);
     finalData = data.slice(startIndex, endIndex);
     offsetY = itemHeight * startIndex;
-    totalHeight = total * itemHeight;
+    totalHeight = total2 * itemHeight;
   }
-  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef };
+  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef, hasNext };
 }
 
 // src/components/DataTable.tsx
-var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTable(props) {
-  const { data, loading, error, page, setPage, setScrollTop, type, virtualization } = props;
-  const isFetchingRef = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
-    isFetchingRef.current = false;
-  }, [data]);
+  const {
+    data,
+    loading,
+    error,
+    page,
+    setPage,
+    setScrollTop,
+    type,
+    virtualization,
+    hasNext
+  } = props;
+  const offsetY = props.offsetY ?? 0;
+  const totalHeight = props.totalHeight ?? 0;
+  const itemHeight = 50;
+  const colCount = data[0] ? Object.keys(data[0]).length : 1;
   if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Loading..." });
   if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: error.message });
-  if ((props.totalItems ?? data.length) === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No Data to create Table" });
+  if ((props.totalItems ?? data.length) === 0)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No Data to create Table" });
   const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Object.keys(data[0]).map((val) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: val }, val)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.map((val, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Object.keys(val).map((key) => {
-      const value = val[key];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: value != null ? value.toString() : "-" }, key);
-    }) }, index)) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
+      virtualization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { style: { height: offsetY }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: colCount }) }),
+      data.map((val, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Object.keys(val).map((key) => {
+        const value = val[key];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cell", children: value != null ? value.toString() : "-" }) }, key);
+      }) }, index)),
+      virtualization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "tr",
+        {
+          style: {
+            height: totalHeight - offsetY - data.length * itemHeight
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: colCount })
+        }
+      )
+    ] })
   ] });
-  const offsetY = props.offsetY ?? 0;
-  const totalHeight = props.totalHeight ?? 0;
   const finalTable = virtualization ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -209,29 +244,33 @@ function DataTable(props) {
       onScroll: (e) => {
         setScrollTop(e.currentTarget.scrollTop);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            transform: `translateY(${offsetY}px)`,
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0
-          },
-          children: content
-        }
-      ) })
+      children: content
     }
   ) : content;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     type === "page" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => Math.max(prev - 1, 1)), children: "prev" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: page }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => prev + 1), children: "next" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          onClick: () => setPage((prev) => {
+            if (hasNext) return prev + 1;
+            return prev;
+          }),
+          children: "next"
+        }
+      )
     ] }),
     finalTable,
-    type === "loadmore" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => prev + 1), children: "load more" })
+    type === "loadmore" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        disabled: !hasNext,
+        onClick: () => setPage((prev) => prev + 1),
+        children: "load more"
+      }
+    )
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -5,7 +5,10 @@ type ResourceParams = {
     page?: number;
     pageSize?: number;
 };
-type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[]>);
+type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[] | {
+    data: T[];
+    total: number;
+}>);
 
 type PaginationConfig = {
     type: "page" | "loadmore" | "infinite";
@@ -32,6 +35,7 @@ declare function useResource<T>(config: Config<T>): {
     totalHeight: number;
     totalItems: number;
     scrollRef: react.RefObject<HTMLDivElement | null>;
+    hasNext: boolean;
 };
 
 type DataTableProps<T extends Record<string, unknown>> = {
@@ -47,6 +51,7 @@ type DataTableProps<T extends Record<string, unknown>> = {
     totalHeight?: number;
     totalItems?: number;
     scrollRef?: React.RefObject<HTMLDivElement> | null;
+    hasNext: boolean;
 };
 declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -5,7 +5,10 @@ type ResourceParams = {
     page?: number;
     pageSize?: number;
 };
-type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[]>);
+type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[] | {
+    data: T[];
+    total: number;
+}>);
 
 type PaginationConfig = {
     type: "page" | "loadmore" | "infinite";
@@ -32,6 +35,7 @@ declare function useResource<T>(config: Config<T>): {
     totalHeight: number;
     totalItems: number;
     scrollRef: react.RefObject<HTMLDivElement | null>;
+    hasNext: boolean;
 };
 
 type DataTableProps<T extends Record<string, unknown>> = {
@@ -47,6 +51,7 @@ type DataTableProps<T extends Record<string, unknown>> = {
     totalHeight?: number;
     totalItems?: number;
     scrollRef?: React.RefObject<HTMLDivElement> | null;
+    hasNext: boolean;
 };
 declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -46,7 +46,8 @@ function useResource(config) {
   const getData = useMemo(() => normalizeSource(source), [source]);
   const prevScrollTop = useRef(0);
   const scrollRef = useRef(null);
-  const hasMore = useRef(true);
+  const [hasNext, setHasNext] = useState(true);
+  const total = useRef(null);
   async function asyncNormalize(localPage) {
     const params = {
       page: localPage,
@@ -65,12 +66,14 @@ function useResource(config) {
   async function orchestrator() {
     const isPageMode = pagination?.type === "page";
     prevScrollTop.current = scrollTop;
-    const cached = cache.current[page];
+    const localPage = page;
+    const cached = cache.current[localPage];
     if (isPageMode && cached) {
       setData(cached);
       return;
     }
-    const localPage = page;
+    setHasNext(true);
+    total.current = null;
     requestTracker.current += 1;
     const currentRequestId = requestTracker.current;
     setLoading(true);
@@ -86,9 +89,21 @@ function useResource(config) {
       setError(result.error);
       return;
     }
-    const rawData = result.data;
-    if (!rawData || rawData.length < 1) return;
-    if (rawData.length < pageSize) hasMore.current = false;
+    let rawData;
+    if (Array.isArray(result.data)) {
+      rawData = result.data;
+    } else {
+      total.current = result.data.total;
+      rawData = result.data.data;
+    }
+    if (total.current !== null) {
+      setHasNext(localPage < Math.ceil(total.current / pageSize));
+    } else {
+      if (rawData.length < pageSize) {
+        setHasNext(false);
+      }
+    }
+    if (!rawData) return;
     setData((prev) => {
       if (isPageMode) return rawData;
       const indexStart = (localPage - 1) * pageSize;
@@ -108,7 +123,7 @@ function useResource(config) {
     }
   }
   useEffect(() => {
-    if (!hasMore.current) return;
+    if (!hasNext) return;
     if (pagination?.type !== "infinite") return;
     const el = scrollRef.current;
     if (!el) return;
@@ -118,7 +133,7 @@ function useResource(config) {
         setPage((prev) => prev + 1);
       })();
     }
-  }, [scrollTop, pagination?.type, loading]);
+  }, [scrollTop, pagination?.type, loading, hasNext]);
   useEffect(() => {
     orchestrator();
   }, [page, pageSize, source, pagination?.type]);
@@ -141,39 +156,59 @@ function useResource(config) {
   let offsetY = 0;
   let totalHeight = 0;
   if (shouldVirtualize) {
-    const total = data.length;
+    const total2 = data.length;
     const rawStart = Math.floor(scrollTop / itemHeight);
     const startIndex = Math.max(0, rawStart - 2);
     const visibleCount = Math.ceil(containerHeight / itemHeight);
-    const endIndex = Math.min(startIndex + visibleCount + 4, total);
+    const endIndex = Math.min(startIndex + visibleCount + 4, total2);
     finalData = data.slice(startIndex, endIndex);
     offsetY = itemHeight * startIndex;
-    totalHeight = total * itemHeight;
+    totalHeight = total2 * itemHeight;
   }
-  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef };
+  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef, hasNext };
 }
 
 // src/components/DataTable.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function DataTable(props) {
-  const { data, loading, error, page, setPage, setScrollTop, type, virtualization } = props;
-  const isFetchingRef = useRef2(false);
-  useEffect2(() => {
-    isFetchingRef.current = false;
-  }, [data]);
+  const {
+    data,
+    loading,
+    error,
+    page,
+    setPage,
+    setScrollTop,
+    type,
+    virtualization,
+    hasNext
+  } = props;
+  const offsetY = props.offsetY ?? 0;
+  const totalHeight = props.totalHeight ?? 0;
+  const itemHeight = 50;
+  const colCount = data[0] ? Object.keys(data[0]).length : 1;
   if (loading) return /* @__PURE__ */ jsx("div", { children: "Loading..." });
   if (error) return /* @__PURE__ */ jsx("div", { children: error.message });
-  if ((props.totalItems ?? data.length) === 0) return /* @__PURE__ */ jsx("p", { children: "No Data to create Table" });
+  if ((props.totalItems ?? data.length) === 0)
+    return /* @__PURE__ */ jsx("p", { children: "No Data to create Table" });
   const content = /* @__PURE__ */ jsxs("table", { children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: Object.keys(data[0]).map((val) => /* @__PURE__ */ jsx("th", { children: val }, val)) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: data.map((val, index) => /* @__PURE__ */ jsx("tr", { children: Object.keys(val).map((key) => {
-      const value = val[key];
-      return /* @__PURE__ */ jsx("td", { children: value != null ? value.toString() : "-" }, key);
-    }) }, index)) })
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      virtualization && /* @__PURE__ */ jsx("tr", { style: { height: offsetY }, children: /* @__PURE__ */ jsx("td", { colSpan: colCount }) }),
+      data.map((val, index) => /* @__PURE__ */ jsx("tr", { children: Object.keys(val).map((key) => {
+        const value = val[key];
+        return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: "cell", children: value != null ? value.toString() : "-" }) }, key);
+      }) }, index)),
+      virtualization && /* @__PURE__ */ jsx(
+        "tr",
+        {
+          style: {
+            height: totalHeight - offsetY - data.length * itemHeight
+          },
+          children: /* @__PURE__ */ jsx("td", { colSpan: colCount })
+        }
+      )
+    ] })
   ] });
-  const offsetY = props.offsetY ?? 0;
-  const totalHeight = props.totalHeight ?? 0;
   const finalTable = virtualization ? /* @__PURE__ */ jsx(
     "div",
     {
@@ -182,29 +217,33 @@ function DataTable(props) {
       onScroll: (e) => {
         setScrollTop(e.currentTarget.scrollTop);
       },
-      children: /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            transform: `translateY(${offsetY}px)`,
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0
-          },
-          children: content
-        }
-      ) })
+      children: content
     }
   ) : content;
   return /* @__PURE__ */ jsxs("div", { children: [
     type === "page" && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => Math.max(prev - 1, 1)), children: "prev" }),
       /* @__PURE__ */ jsx("span", { children: page }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => prev + 1), children: "next" })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPage((prev) => {
+            if (hasNext) return prev + 1;
+            return prev;
+          }),
+          children: "next"
+        }
+      )
     ] }),
     finalTable,
-    type === "loadmore" && /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => prev + 1), children: "load more" })
+    type === "loadmore" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        disabled: !hasNext,
+        onClick: () => setPage((prev) => prev + 1),
+        children: "load more"
+      }
+    )
   ] });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resource-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A high-level data orchestration hook for React with pagination, caching, and virtualization",
   "type": "module",
   "main": "dist/index.cjs",