@homebound/beam 2.248.0 → 2.249.0

package/dist/components/Pagination.d.ts

@@ -0,0 +1,21 @@
+import { Dispatch, SetStateAction } from "react";
+export type PageSettings = {
+    page: number;
+    perPage: number;
+};
+interface PaginationProps {
+    label: string;
+    totalCount: number;
+    settings: PageSettings;
+    setSettings: Dispatch<SetStateAction<PageSettings>>;
+}
+export declare function Pagination(props: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function toFirstAndOffset(page: number, perPage: number): {
+    first: number;
+    offset: number;
+};
+export declare const pageOptions: {
+    id: number;
+    name: string;
+}[];
+export {};

package/dist/components/Pagination.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageOptions = exports.toFirstAndOffset = exports.Pagination = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("./");
+const Css_1 = require("../Css");
+const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
+function Pagination(props) {
+    const { label, settings, totalCount, setSettings } = props;
+    const { perPage, page } = settings;
+    const hasNextPage = (0, react_1.useMemo)(() => page < totalCount / perPage, [page, perPage, totalCount]);
+    const tid = (0, utils_1.useTestIds)(props, "pagination");
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray300.bt.xs.gray500.px1.ml2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.perPageLabel, children: [label, " per page:"] }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, ...tid.perPage, labelStyle: "hidden", label: `${label} per page`, options: exports.pageOptions, value: perPage, onSelect: (val) => {
+                        setSettings({ page: 1, perPage: val });
+                    } }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [perPage * (page - 1) + 1, " ", hasNextPage ? `- ${perPage * page}` : "", " of ", totalCount, " ", label] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...tid.previousIcon, icon: "chevronLeft", color: Css_1.Palette.LightBlue700, onClick: () => setSettings({ page: settings.page - 1, perPage }), disabled: settings.page === 1 }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...tid.nextIcon, icon: "chevronRight", color: Css_1.Palette.LightBlue700, onClick: () => setSettings({ page: settings.page + 1, perPage }), disabled: !hasNextPage })] })] }));
+}
+exports.Pagination = Pagination;
+function toFirstAndOffset(page, perPage) {
+    return {
+        first: perPage,
+        // E.g. on first page the offset is 0, second page the offset is 100, then 200, etc.
+        offset: (page - 1) * perPage,
+    };
+}
+exports.toFirstAndOffset = toFirstAndOffset;
+// Make a list of 50/100/150/etc page sizes for the user to chose
+exports.pageOptions = Array(5)
+    .fill(0)
+    .map((_, i) => ({ id: (i + 1) * 50, name: ((i + 1) * 50).toString() }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.248.0",
+  "version": "2.249.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\""
   },
   "dependencies": {
-    "@homebound/form-state": "^2.15.3",
+    "@homebound/form-state": "^2.16.0",
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.13.2",
     "@react-hook/resize-observer": "^1.2.2",