@airplane/views
Version:
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.
75 lines (74 loc) • 2.11 kB
JavaScript
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