Merge pull request #167 from UW-Macrostrat/pagination

Pagination fix

Author: davidsklar99

packages/ui-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.4.5] - 2025-08-12
+
+Fix broken Pagination component
+
 ## [4.4.4] - 2025-07-18
 
 For PostgRESTInfiniteScrollView

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "description": "UI components for React and Blueprint.js",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/ui-components/src/api/paged.ts

@@ -6,11 +6,12 @@ import { APIResultView } from "./frontend";
 
 const Pagination = (props) => {
   const { currentPage, nextDisabled, setPage } = props;
+
   return h(ButtonGroup, [
     h(
       Button,
       {
-        onClick: setPage(currentPage - 1),
+        onClick: () => setPage(currentPage - 1),
         icon: "arrow-left",
         disabled: currentPage <= 0,
       },
@@ -19,7 +20,7 @@ const Pagination = (props) => {
     h(
       Button,
       {
-        onClick: setPage(currentPage + 1),
+        onClick: () => setPage(currentPage + 1),
         rightIcon: "arrow-right",
         disabled: nextDisabled,
       },

packages/ui-components/stories/page.stories.ts

@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react-vite";
+import h from "@macrostrat/hyper";
+import { Pagination } from "../src";
+import { useState } from "react";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "UI components/Pagination",
+  component: Pagination,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof Pagination>;
+
+export function Basic() {
+  const [ix, setIX] = useState(0);
+  return h("div", [
+    h("p", `Current page: ${ix}`),
+    h(Pagination, {
+      currentPage: ix,
+      nextDisabled: false,
+      setPage: (page: number) => setIX(page),
+    }),
+  ]);
+}