@trackunit/react-table 0.0.222-alpha-71e42cacef.0 → 0.0.222

package/index.cjs.js

@@ -588,6 +588,60 @@ const Sorting = ({ columns, }) => {
                                 }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = React.useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = React.useState();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const nextPage = React.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = React.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = React.useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onReset, props.pageSize]);
+    return React.useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -808,5 +862,6 @@ exports.fromTUSortToTanStack = fromTUSortToTanStack;
 exports.fromTUSortToTanStackSite = fromTUSortToTanStackSite;
 exports.fromTanStackToTUSort = fromTanStackToTUSort;
 exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
+exports.useRelayPagination = useRelayPagination;
 exports.useTable = useTable;
 exports.useTableSelection = useTableSelection;

package/index.esm.js

@@ -563,6 +563,60 @@ const Sorting = ({ columns, }) => {
                                 }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const nextPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onReset, props.pageSize]);
+    return useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -770,4 +824,4 @@ const fromTanStackToTUSortSite = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable, useTableSelection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.222-alpha-71e42cacef.0",
+  "version": "0.0.222",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,7 +12,6 @@
     "react-router-dom": "6.18.0",
     "@tanstack/react-table": "^8.10.7",
     "@trackunit/react-table-base-components": "*",
-    "@trackunit/react-table-pagination": "*",
     "@trackunit/react-form-components": "*",
     "immutability-helper": "^3.1.1",
     "react-dnd": "14.0.5",

package/src/Table.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps } from "@trackunit/react-components";
-import { RelayPagination } from "@trackunit/react-table-pagination";
+import { RelayPagination } from "./types";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
     pagination: RelayPagination;
     headerLeftActions?: React.ReactNode;

package/src/index.d.ts

@@ -5,6 +5,7 @@ export * from "./menus/ColumnFilter";
 export * from "./menus/RowSpacing";
 export * from "./menus/Sorting";
 export * from "./types";
+export * from "./useRelayPagination";
 export * from "./useTable";
 export * from "./useTableSelection";
 export * from "./utils";

package/src/types.d.ts

@@ -9,4 +9,17 @@ declare module "@tanstack/react-table" {
         isCustomField?: boolean;
     }
 }
+export interface RelayPageInfo {
+    count?: number | null;
+    endCursor?: string | null;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    startCursor?: string | null;
+}
+export interface RelayPagination {
+    nextPage: () => void;
+    previousPage: () => void;
+    pageInfo?: RelayPageInfo;
+    isLoading: boolean;
+}
 export type Alignment = "left" | "center" | "right";

package/src/useInfiniteScroll.d.ts

@@ -1,6 +1,6 @@
 import { VirtualItem } from "@tanstack/react-virtual";
-import { RelayPagination } from "@trackunit/react-table-pagination";
 import { RefObject } from "react";
+import { RelayPagination } from "./types";
 interface InfiniteScrollProps {
     pagination: RelayPagination;
     containerRef: RefObject<HTMLDivElement>;

package/src/useRelayPagination.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from "react";
+import { RelayPageInfo, RelayPagination } from "./types";
+export interface RelayPaginationProps {
+    pageSize?: number;
+    onReset?: () => void;
+}
+export interface RelayPaginationQueryVariables {
+    first?: number | null;
+    last?: number | null;
+    before?: string | null;
+    after?: string | null;
+}
+export interface RelayTableSupport extends RelayPagination {
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    reset: () => void;
+    setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
+}
+export interface RelayPaginationSupport {
+    variables: RelayPaginationQueryVariables;
+    table: RelayTableSupport;
+}
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;