@unitedstatespowersquadrons/components 1.2.29 → 1.2.31

package/Pagination.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { createUseStyles } from "react-jss";
+import IconButton from "./IconButton";
+
+const useStyles = createUseStyles({
+  currentPage: {
+    fontWeight: "bold",
+  },
+  label: {
+    fontWeight: "bold",
+    marginRight: "0.25em",
+  },
+  pagination: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    gap: "0.5em",
+    justifyContent: "center",
+    margin: "1em auto",
+  },
+  spacer: {
+    display: "inline-block",
+    width: "2em",
+  },
+});
+
+interface Props {
+  label?: string;
+  maxPage: number;
+  pageNumber: number;
+  path: string;
+}
+
+const Pagination = (props: Props) => {
+  const { label, maxPage, pageNumber, path } = props;
+  const classes = useStyles();
+
+  const button = (number: number, icon: string, title: string) => {
+    return <IconButton href={`${path}?page=${number}`} icon={icon} title={title} />;
+  };
+
+  const spacer = <span className={classes.spacer} />;
+
+  const firstButton = () => {
+    return pageNumber > 2 ? button(1, "backward-fast", "First Page") : spacer;
+  };
+
+  const previousButton = () => {
+    return pageNumber > 1 ? button(pageNumber - 1, "backward", "Previous Page") : spacer;
+  };
+
+  const currentPage = () => {
+    return(
+      <>
+        {label && <span className={classes.label}>{label}</span>}
+        <span className={classes.currentPage}>{pageNumber}</span>
+      </>
+    );
+  };
+
+  const nextButton = () => {
+    return pageNumber < maxPage ? button(pageNumber + 1, "forward", "Next Page") : spacer;
+  };
+
+  const lastButton = () => {
+    return pageNumber < maxPage -1 ? button(maxPage, "fast-forward", "Last Page") : spacer;
+  };
+
+  return(
+    <div className={classes.pagination}>
+      {firstButton()}
+      {previousButton()}
+      {currentPage()}
+      {nextButton()}
+      {lastButton()}
+    </div>
+  );
+};
+
+export default Pagination;

package/index.tsx

@@ -16,6 +16,7 @@ export { default as ActionButton } from "./ActionButton";
 export { default as IconButton } from "./IconButton";
 export { default as SelectionIconButton } from "./SelectionIconButton";
 export { default as RailsForm } from "./RailsForm";
+export * from "./Pagination";
 export * from "./Toasts";
 export { default as Colors } from "./Colors";
 export { default as Styles } from "./Styles";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {