@dust-tt/sparkle 0.2.225 → 0.2.226

package/src/components/PaginatedCitationsGrid.tsx

@@ -1,3 +1,4 @@
+import { PaginationState } from "@tanstack/react-table";
 import { useState } from "react";
 import React from "react";
 
@@ -21,7 +22,10 @@ export function PaginatedCitationsGrid({
   items,
   maxItemsPerPage = 9,
 }: PaginatedCitationsGridProps) {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: maxItemsPerPage,
+  });
   const cols = 3;
   const rows = Math.ceil(Math.min(maxItemsPerPage, items.length) / cols);
 
@@ -29,10 +33,11 @@ export function PaginatedCitationsGrid({
     return null;
   }
 
+  const { pageIndex, pageSize } = pagination;
   // Calculate start index.
-  const startIndex = (currentPage - 1) * maxItemsPerPage;
+  const startIndex = pageIndex * pageSize;
   // Slice items for current page.
-  const paginatedItems = items.slice(startIndex, startIndex + maxItemsPerPage);
+  const paginatedItems = items.slice(startIndex, startIndex + pageSize);
 
   return (
     <div className="s-flex s-w-full s-flex-col">
@@ -65,12 +70,12 @@ export function PaginatedCitationsGrid({
         )}
       >
         <Pagination
-          itemsCount={items.length}
-          maxItemsPerPage={maxItemsPerPage}
+          rowCount={items.length}
+          pagination={pagination}
+          setPagination={setPagination}
           size="xs"
           showDetails={false}
           showPageButtons={false}
-          onButtonClick={(pageNb) => setCurrentPage(pageNb)}
         />
       </div>
     </div>

package/src/components/Pagination.tsx

@@ -1,5 +1,5 @@
+import { PaginationState } from "@tanstack/react-table";
 import React, { useCallback } from "react";
-import { useState } from "react";
 
 import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
@@ -11,42 +11,49 @@ type Size = "sm" | "xs";
 const pagesShownInControls = 7;
 
 interface PaginationProps {
-  itemsCount: number;
-  maxItemsPerPage: number;
-  onButtonClick: (pageNumber: number) => void;
   size?: Size;
   showDetails?: boolean;
   showPageButtons?: boolean;
+  rowCount: number;
+  pagination: PaginationState;
+  setPagination: (pagination: PaginationState) => void;
 }
 
 export function Pagination({
-  itemsCount,
-  maxItemsPerPage,
-  onButtonClick,
   size = "sm",
   showDetails = true,
   showPageButtons = true,
+  rowCount,
+  pagination,
+  setPagination,
 }: PaginationProps) {
-  const numPages = Math.ceil(itemsCount / maxItemsPerPage);
+  // pageIndex is 0-based
+  const { pageIndex, pageSize } = pagination;
+
+  const numPages = Math.ceil(rowCount / pageSize);
+
+  const canNextPage = pagination.pageIndex < numPages - 1;
+  const canPreviousPage = pageIndex > 0;
+  const nextPage = () => setPagination({ pageSize, pageIndex: pageIndex + 1 });
+  const previousPage = () =>
+    setPagination({ pageSize, pageIndex: pageIndex - 1 });
+
   const controlsAreHidden = Boolean(numPages <= 1);
-  const [currentPage, setCurrentPage] = useState(1);
-  const firstFileOnPageIndex =
-    currentPage * maxItemsPerPage - maxItemsPerPage + 1;
-  const lastFileOnPageIndex =
-    itemsCount > currentPage * maxItemsPerPage
-      ? currentPage * maxItemsPerPage
-      : itemsCount;
+  const firstItemOnPageIndex = pageIndex * pageSize + 1;
+  const lastItemOnPageIndex =
+    rowCount > (pageIndex + 1) * pageSize
+      ? (pageIndex + 1) * pageSize
+      : rowCount;
 
   const onPaginationButtonClick = useCallback(
-    (pageNb: number) => {
-      setCurrentPage(pageNb);
-      onButtonClick(pageNb);
+    (pageIndex: number) => {
+      setPagination({ pageSize, pageIndex });
     },
-    [onButtonClick, setCurrentPage]
+    [pageIndex, setPagination]
   );
 
   const pageButtons: React.ReactNode[] = getPageButtons(
-    currentPage,
+    pageIndex,
     numPages,
     pagesShownInControls,
     onPaginationButtonClick,
@@ -73,11 +80,9 @@ export function Pagination({
           label="previous"
           labelVisible={false}
           disabledTooltip={true}
-          disabled={currentPage === 1 ? true : false}
+          disabled={!canPreviousPage}
           icon={ChevronLeftIcon}
-          onClick={() => {
-            onPaginationButtonClick(currentPage - 1);
-          }}
+          onClick={previousPage}
         />
 
         <div
@@ -96,11 +101,9 @@ export function Pagination({
           label="next"
           labelVisible={false}
           disabledTooltip={true}
-          disabled={currentPage === numPages ? true : false}
+          disabled={!canNextPage}
           icon={ChevronRightIcon}
-          onClick={() => {
-            onPaginationButtonClick(currentPage + 1);
-          }}
+          onClick={nextPage}
         />
       </div>
 
@@ -112,8 +115,8 @@ export function Pagination({
         )}
       >
         {controlsAreHidden
-          ? `${itemsCount} items`
-          : `Showing ${firstFileOnPageIndex}-${lastFileOnPageIndex} of ${itemsCount} items`}
+          ? `${rowCount} items`
+          : `Showing ${firstItemOnPageIndex}-${lastItemOnPageIndex} of ${rowCount} items`}
       </span>
     </div>
   );
@@ -135,7 +138,7 @@ function renderPageNumber(
       )}
       onClick={() => onPageClick(pageNumber)}
     >
-      {pageNumber}
+      {pageNumber + 1}
     </button>
   );
 }
@@ -164,7 +167,7 @@ function getPageButtons(
 
   // If total pages are less than or equal to slots, show all pages
   if (totalPages <= slots) {
-    for (let i = 1; i <= totalPages; i++) {
+    for (let i = 0; i < totalPages; i++) {
       pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
     }
     return pagination;
@@ -174,25 +177,23 @@ function getPageButtons(
   const halfSlots = Math.floor(remainingSlots / 2);
 
   // Ensure current page is within bounds
-  currentPage = Math.max(1, Math.min(currentPage, totalPages));
-
-  pagination.push(renderPageNumber(1, currentPage, onPageClick, size)); // Always show the first page
+  currentPage = Math.max(0, Math.min(currentPage, totalPages - 1));
 
+  pagination.push(renderPageNumber(0, currentPage, onPageClick, size)); // Always show the first page
   // Determine the range of pages to display
   let start, end;
-  if (currentPage <= halfSlots + 2) {
-    start = 2;
-    end = remainingSlots;
-  } else if (currentPage >= totalPages - halfSlots - 1) {
-    start = totalPages - remainingSlots + 1;
-    end = totalPages - 1;
+  if (currentPage <= halfSlots + 1) {
+    start = 1;
+    end = remainingSlots - 1;
+  } else if (currentPage >= totalPages - halfSlots - 2) {
+    start = totalPages - remainingSlots;
+    end = totalPages - 2;
   } else {
     start = currentPage - halfSlots + 1;
     end = currentPage + halfSlots - 1;
   }
-
   // Add ellipsis if there is a gap between the first page and the start of the range
-  if (start > 2) {
+  if (start > 1) {
     pagination.push(renderEllipses(size));
   }
 
@@ -202,11 +203,13 @@ function getPageButtons(
   }
 
   // Add ellipsis if there is a gap between the end of the range and the last page
-  if (end < totalPages - 1) {
+  if (end < totalPages - 2) {
     pagination.push(renderEllipses(size));
   }
 
-  pagination.push(renderPageNumber(totalPages, currentPage, onPageClick, size)); // Always show the last page
+  pagination.push(
+    renderPageNumber(totalPages - 1, currentPage, onPageClick, size)
+  ); // Always show the last page
 
   return pagination;
 }

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useHashParams";
+export * from "./usePaginationFromUrl";

package/src/hooks/useHashParams.ts

@@ -0,0 +1,95 @@
+/**
+ * Original code from : https://www.npmjs.com/package/use-hash-param
+ * ISC License
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+const getHashSearchParams = (location: Location): [string, URLSearchParams] => {
+  const hash = location.hash.slice(1);
+  const [prefix, query] = hash.split("?");
+
+  return [prefix, new URLSearchParams(query)];
+};
+
+const getHashParam = (key: string, defaultValue?: string) => {
+  if (typeof window === "undefined") {
+    return defaultValue;
+  }
+
+  const [, searchParams] = getHashSearchParams(window.location);
+
+  return searchParams.get(key) ?? defaultValue;
+};
+
+const setHashParam = (
+  key: string,
+  value: string | undefined,
+  shouldReplaceState: boolean
+) => {
+  if (typeof window !== "undefined") {
+    const [prefix, searchParams] = getHashSearchParams(window.location);
+
+    if (typeof value === "undefined" || value === "") {
+      searchParams.delete(key);
+    } else {
+      searchParams.set(key, value);
+    }
+
+    const search = searchParams.toString();
+    const hash = search ? `${prefix}?${search}` : prefix;
+    if (shouldReplaceState && "replaceState" in history) {
+      history.replaceState(null, "", `#${hash}`);
+    } else {
+      window.location.hash = hash;
+    }
+  }
+};
+
+type Updater = (prevValue?: string) => string;
+type SetterOptions = {
+  history: "replace" | "push";
+};
+type Setter = (value?: string | Updater, options?: SetterOptions) => void;
+
+/**
+ * @param key The parameter-name to use from the hash-string query string.
+ * @param defaultValue A default value to use if the parameter is not specified and on the server.
+ * @returns A two-tuple, the first element is the selected param value (either extracted from the hash param or the default value).
+ *  The second element is a setter function to change the param value.
+ */
+
+export const useHashParam = (
+  key: string,
+  defaultValue?: string
+): [string | undefined, Setter] => {
+  const [innerValue, setInnerValue] = useState<string | undefined>(() =>
+    getHashParam(key, defaultValue)
+  );
+
+  useEffect(() => {
+    const handleHashChange = () =>
+      setInnerValue(getHashParam(key, defaultValue));
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [key]);
+
+  const setValue = useCallback<Setter>(
+    (
+      newValue?: string | Updater,
+      options: SetterOptions = { history: "replace" }
+    ) => {
+      const newInnerValue =
+        typeof newValue === "function"
+          ? newValue(getHashParam(key, defaultValue))
+          : newValue;
+
+      setInnerValue(newInnerValue);
+      setHashParam(key, newInnerValue, options.history === "replace");
+    },
+    [key]
+  );
+
+  return [innerValue || defaultValue, setValue];
+};

package/src/hooks/usePaginationFromUrl.ts

@@ -0,0 +1,36 @@
+import { PaginationState } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+import { useHashParam } from "@sparkle/hooks/useHashParams";
+
+const defaultPageSize = 25;
+
+export const usePaginationFromUrl = (
+  urlPrefix?: string,
+  initialPageSize = defaultPageSize
+) => {
+  const [pageIndexParam, setPageIndexParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageIndex` : "pageIndex"
+  );
+  const [pageSizeParam, setPageSizeParam] = useHashParam(
+    urlPrefix ? `${urlPrefix}PageSize` : "pageSize"
+  );
+
+  const pageIndex = pageIndexParam ? parseInt(pageIndexParam) : 0;
+  const pageSize = pageSizeParam ? parseInt(pageSizeParam) : initialPageSize;
+
+  const res = useMemo(() => {
+    const pagination: PaginationState = { pageIndex, pageSize };
+
+    const setPagination = (newValue: PaginationState) => {
+      if (newValue.pageIndex !== pageIndex || newValue.pageSize !== pageSize) {
+        setPageIndexParam(newValue.pageIndex.toString());
+        setPageSizeParam(newValue.pageSize.toString());
+      }
+    };
+
+    return { pagination, setPagination };
+  }, [pageIndex, pageSize, urlPrefix]);
+
+  return res;
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components";
 export { SparkleContext } from "./context";
+export * from "./hooks";
 export * from "./icons";
 export * from "./lib";
 export * from "./logo";