@polaritybit/smart-table - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useCallback, createContext, useContext, useState, useEffect } from 'react';
+import { useMemo, useCallback, createContext, useContext, useRef, useEffect, useState } from 'react';
 import { uniq, concat, isNil, mergeWith, splitEvery, ascend, descend, sort, path, prop } from 'ramda';
 
+function isIntrinsicComponent(Component) {
+  return !(typeof Component === "function" || typeof Component === "object" && Component.prototype && Component.prototype.isReactComponent);
+}
+
 function deepMerge(v1, v2) {
@@ -141,15 +145,37 @@ if (Array.isArray(v1) && Array.isArray(v2)) {
 
-function usePagination(items = [], pageSize = 10) {
+function useStableCallback(fn) {
+  const ref = useRef(fn);
+  useEffect(() => {
+    ref.current = fn;
+  });
+  const stableCallback = useCallback((...args) => ref.current(...args), []);
+  return stableCallback;
+}
+
+function usePagination({ items = [], options, onPageChange }) {
   const [activePage, setActivePage] = useState(0);
+  const stableOnPageChange = useStableCallback(
+    onPageChange ?? (() => {
+    })
+  );
   useEffect(() => {
     setActivePage(0);
-  }, [pageSize]);
+  }, [options?.pageSize]);
+  useEffect(() => {
+    stableOnPageChange?.(activePage);
+  }, [activePage, stableOnPageChange]);
   const [pageItems, pageCount] = useMemo(() => {
-    const pages = splitEvery(pageSize, items);
-    if (pages.length === 0) {
-      return [[], 0];
+    if (!options?.totalItems) {
+      const pages = splitEvery(options?.pageSize ?? DEFAULT_PAGE_SIZE, items);
+      if (pages.length === 0) {
+        return [[], 0];
+      }
+      const pageItems3 = pages[activePage] || [];
+      const pageCount3 = pages.length;
+      return [pageItems3, pageCount3];
     }
-    const pageItems2 = pages[activePage] || [];
-    return [pageItems2, pages.length];
-  }, [items, pageSize, activePage]);
+    const pageCount2 = Math.ceil(options.totalItems / options.pageSize);
+    const pageItems2 = items;
+    return [pageItems2, pageCount2];
+  }, [items, options?.pageSize, options?.totalItems, activePage]);
   return { pageItems, pageCount, activePage, setActivePage };
@@ -186,6 +212,3 @@ }
 
-function isIntrinsicComponent(Component) {
-  return !(typeof Component === "function" || typeof Component === "object" && Component.prototype && Component.prototype.isReactComponent);
-}
-
+const DEFAULT_PAGE_SIZE = 25;
 function TableHeader({ column, sortProperties, onSort, config }) {
@@ -244,3 +267,4 @@ const _config = useConfig(config);
   defaultSortProperties,
-  pageSize = 20,
+  paginationOptions,
+  onPageChange,
   config
@@ -254,6 +278,12 @@ }) {
   const sortedItems = useSort(items, sortProperties.property, sortProperties.direction);
-  const { pageItems, pageCount, activePage, setActivePage } = usePagination(sortedItems, pageSize);
+  const { pageItems, pageCount, activePage, setActivePage } = usePagination({
+    items: sortedItems,
+    options: paginationOptions,
+    onPageChange
+  });
   useEffect(() => {
-    setActivePage(0);
-  }, [items, setActivePage]);
+    if (!paginationOptions?.totalItems) {
+      setActivePage(0);
+    }
+  }, [items, setActivePage, paginationOptions?.totalItems]);
   const handleSortPropertyChange = useCallback(
@@ -339,3 +369,7 @@ function handleSortPropertyChange2(property) {
                   width: column.width,
-                  children: column.getValue?.(item, activePage * pageSize + index, sortedItems) ?? item[column.key] ?? column.value
+                  children: column.getValue?.(
+                    item,
+                    activePage * (paginationOptions?.pageSize ?? DEFAULT_PAGE_SIZE) + index,
+                    sortedItems
+                  ) ?? item[column.key] ?? column.value
                 },
@@ -342,0 +376,0 @@ column.key

dist/lib/hooks/use-pagination.hook.d.ts

@@ -1,2 +0,11 @@
-export declare function usePagination<T>(items?: T[], pageSize?: number): {
+export type PaginationOptions = {
+    pageSize: number;
+    totalItems?: number;
+};
+export type PaginationHookData<T> = {
+    items: T[];
+    options?: PaginationOptions;
+    onPageChange?: (page: number) => void;
+};
+export declare function usePagination<T>({ items, options, onPageChange }: PaginationHookData<T>): {
     pageItems: T[];
@@ -3,0 +12,0 @@ pageCount: number;

dist/lib/smart-table.component.d.ts

 import { SortDirection, SortPredicate, SortPredicateResult } from './hooks/use-sort.hook';
 import { DeepPartial, SmartTableConfig } from './smart-table-config.context';
+export declare const DEFAULT_PAGE_SIZE = 25;
+export type PaginationOptions = {
+    pageSize: number;
+    totalItems?: number;
+};
 export type TableColumn<T = Record<string, unknown>> = {
@@ -38,6 +43,7 @@ key: string;
     defaultSortProperties?: SortProperties<T>;
-    pageSize?: number;
     config?: DeepPartial<SmartTableConfig>;
+    paginationOptions?: PaginationOptions;
+    onPageChange?: (page: number) => void;
 };
 export declare function TableHeader<T>({ column, sortProperties, onSort, config }: TableHeaderProps<T>): JSX.Element;
-export declare function SmartTable<T extends Record<string, unknown>>({ columns, items, getItemKey, tableClassName, rowClassName, commonCellClassName, headerRowClassName, onRowClick, parseDatasetValue, defaultSortProperties, pageSize, config, }: TableProps<T>): JSX.Element;
+export declare function SmartTable<T extends Record<string, unknown>>({ columns, items, getItemKey, tableClassName, rowClassName, commonCellClassName, headerRowClassName, onRowClick, parseDatasetValue, defaultSortProperties, paginationOptions, onPageChange, config, }: TableProps<T>): JSX.Element;

package.json

 {
 	"name": "@polaritybit/smart-table",
 	"private": false,
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/lib/hooks/use-pagination.hook.ts

 import { splitEvery } from 'ramda'
 import { useMemo, useState, useEffect } from 'react'
+import { useStableCallback } from './use-stable-callback.hook'
+import { DEFAULT_PAGE_SIZE } from '../smart-table.component'
 
-export function usePagination<T>(items: T[] = [], pageSize = 10) {
+export type PaginationOptions = {
+	pageSize: number
+	totalItems?: number
+}
+
+export type PaginationHookData<T> = {
+	items: T[]
+	options?: PaginationOptions
+	onPageChange?: (page: number) => void
+}
+
+export function usePagination<T>({ items = [], options, onPageChange }: PaginationHookData<T>) {
 	const [activePage, setActivePage] = useState(0)
+	const stableOnPageChange = useStableCallback(
+		onPageChange ??
+			(() => {
+				// Do nothing
+			}),
+	)
 
 	useEffect(() => {
 		setActivePage(0)
-	}, [pageSize])
+	}, [options?.pageSize])
 
+	useEffect(() => {
+		stableOnPageChange?.(activePage)
+	}, [activePage, stableOnPageChange])
+
 	const [pageItems, pageCount] = useMemo(() => {
-		const pages = splitEvery(pageSize, items)
+		if (!options?.totalItems) {
+			const pages = splitEvery(options?.pageSize ?? DEFAULT_PAGE_SIZE, items)
 
-		if (pages.length === 0) {
-			return [[], 0]
+			if (pages.length === 0) {
+				return [[], 0]
+			}
+
+			const pageItems = pages[activePage] || []
+			const pageCount = pages.length
+
+			return [pageItems, pageCount]
 		}
 
-		const pageItems = pages[activePage] || []
+		const pageCount = Math.ceil(options.totalItems / options.pageSize)
+		const pageItems = items
 
-		return [pageItems, pages.length]
-	}, [items, pageSize, activePage])
+		return [pageItems, pageCount]
+	}, [items, options?.pageSize, options?.totalItems, activePage])
 
 	return { pageItems, pageCount, activePage, setActivePage }
 }

No alert changes

Improved metrics

Total package byte prevSize

61525

increased by7.33%

Number of package files

32

increased by6.67%

Lines of code

1383

increased by8.39%

No dependency changes