@purpurds/pagination 5.19.1

package/src/use-pagination-page-selector-events.hook.ts

@@ -0,0 +1,59 @@
+import { Option } from "@purpurds/autocomplete";
+
+type UsePaginationPageSelectorEvents = {
+  onKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSelectionChange: (option?: Option) => void;
+  resetSelection: () => void;
+};
+
+export const usePaginationPageSelectorEvents = (
+  currentPage: number,
+  navigationFunction: (page: number, url: string) => void,
+  numberOfPages: number,
+  onPageChange: (page: number) => void,
+  options: Option[],
+  setValue: React.Dispatch<React.SetStateAction<string | number>>,
+  asLink?: boolean,
+  hrefGetter?: (page: number) => string
+): UsePaginationPageSelectorEvents => {
+  const onSelectionChange = (option?: Option) => {
+    if (!option) {
+      return;
+    }
+    const page = Number(option.id);
+    onPageChange(page);
+    setValue(() => page);
+    if (asLink) {
+      const url = hrefGetter?.(page) ?? "";
+      navigationFunction(page, url);
+    }
+  };
+
+  const pageIsValid = (page: number | typeof NaN): page is number => {
+    return !Number.isNaN(page) && page > 0 && page <= numberOfPages;
+  };
+
+  const selectFirstMatchingOption = (page: number | typeof NaN) => {
+    if (pageIsValid(page)) {
+      const firstMatchingPage = options.find((option) => Number(option.id) === page);
+      onSelectionChange(firstMatchingPage);
+    }
+  };
+
+  const onKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const page = Number((event.target as HTMLInputElement).value);
+      selectFirstMatchingOption(page);
+    }
+  };
+
+  const resetSelection = () => {
+    setValue(() => currentPage);
+  };
+
+  return {
+    onSelectionChange,
+    onKeyUp,
+    resetSelection,
+  };
+};

package/src/use-pagination-pages.hook.ts

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+
+type UsePaginationPagesHook = {
+  pages: number[];
+  numberOfPages: number;
+};
+
+export const usePaginationPages = (
+  totalItems: number,
+  pageSize: number,
+  currentPage: number
+): UsePaginationPagesHook => {
+  const [pages, setPages] = React.useState<number[]>([]);
+  const [numberOfPages, setNumberOfPages] = React.useState<number>(0);
+
+  useEffect(() => {
+    const totalNumberOfPages = Math.ceil(totalItems / pageSize);
+    setNumberOfPages(totalNumberOfPages);
+    setPages(getPagesToDisplay(totalNumberOfPages, currentPage));
+  }, [totalItems, pageSize, currentPage]);
+
+  return {
+    pages,
+    numberOfPages,
+  };
+};
+
+function getPagesToDisplay(totalNumberOfPages: number, currentPage: number): number[] {
+  if (totalNumberOfPages <= 5) {
+    return Array.from({ length: totalNumberOfPages }, (_, i) => i + 1);
+  }
+  const firstThreePages = [1, 2, 3];
+  if (firstThreePages.includes(currentPage)) {
+    return [...firstThreePages, 4, totalNumberOfPages];
+  }
+  const lastThreePages = [totalNumberOfPages - 2, totalNumberOfPages - 1, totalNumberOfPages];
+  if (lastThreePages.includes(currentPage)) {
+    return [1, totalNumberOfPages - 3, ...lastThreePages];
+  }
+  return [1, currentPage - 1, currentPage, currentPage + 1, totalNumberOfPages];
+}