@airplane/views/dist/components/table/Pagination.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsxs, jsx } from "react/jsx-runtime";
import { createStyles, ActionIcon, Text } from "@mantine/core";
import { ChevronLeftIconMini, ChevronRightIconMini } from "@airplane/views/icons/index.js";
const useStyles = createStyles((theme) => {
  return {
    wrapper: {
      display: "flex",
      flexWrap: "wrap",
      alignItems: "center",
      "> *": {
        marginLeft: theme.spacing.xs
      }
    },
    arrowWrapper: {
      display: "flex"
    },
    arrowButton: {
      color: theme.colors.gray[6],
      "&:disabled": {
        color: theme.colors.gray[4],
        background: "none",
        border: "none"
      }
    }
  };
});
const Pagination = ({
  hasNextPage,
  hasPrevPage,
  onNext,
  onPrev,
  pageIndex,
  pageSize,
  total
}) => {
  const {
    classes
  } = useStyles();
  return /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
    /* @__PURE__ */ jsx(PageInfo, { pageIndex, pageSize, total }),
    /* @__PURE__ */ jsxs("div", { className: classes.arrowWrapper, children: [
      /* @__PURE__ */ jsx(ActionIcon, { className: classes.arrowButton, onClick: onPrev, disabled: !hasPrevPage, "aria-label": "previous", size: "sm", children: /* @__PURE__ */ jsx(ChevronLeftIconMini, {}) }),
      /* @__PURE__ */ jsx(ActionIcon, { className: classes.arrowButton, onClick: onNext, disabled: !hasNextPage, "aria-label": "next", size: "sm", children: /* @__PURE__ */ jsx(ChevronRightIconMini, {}) })
    ] })
  ] });
};
const PageInfo = ({
  pageIndex,
  pageSize: limit,
  total
}) => {
  if (total === 0) {
    return /* @__PURE__ */ jsx(Text, { size: 10, sx: (theme) => ({
      color: theme.colors.gray[5],
      fontWeight: 500
    }), children: "No results" });
  }
  const startItemNum = pageIndex * limit + 1;
  const endItemNum = Math.min(startItemNum + limit - 1, total);
  return /* @__PURE__ */ jsxs(Text, { size: 10, sx: (theme) => ({
    color: theme.colors.gray[5],
    fontWeight: 500
  }), children: [
    startItemNum,
    " – ",
    endItemNum,
    " of ",
    total
  ] });
};
export {
  Pagination
};
//# sourceMappingURL=Pagination.js.map