@knowmax/pager-fluentuiv9
Version:
Knowmax Pager with Fluent V9 user interface implementation.
261 lines (258 loc) • 9.17 kB
JavaScript
// src/components/Pager.tsx
import { useEffect, useMemo as useMemo2 } from "react";
import { makeStyles as makeStyles2, tokens as tokens2 } from "@fluentui/react-components";
// src/components/TextDisplay.tsx
import { ChevronLeftRegular, ChevronRightRegular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular } from "@fluentui/react-icons";
import { Text, Button } from "@fluentui/react-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var TextDisplay = ({ currentPage, totalPages, onChange, outerButtonsThreshold = 3 }) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
totalPages > outerButtonsThreshold && /* @__PURE__ */ jsx(
Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}),
disabled: currentPage === 1,
onClick: () => onChange(1)
}
),
/* @__PURE__ */ jsx(
Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
disabled: currentPage === 1 || totalPages === 1,
onClick: () => onChange(currentPage - 1)
}
),
/* @__PURE__ */ jsxs(Text, { children: [
currentPage,
"/",
totalPages
] }),
/* @__PURE__ */ jsx(
Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ jsx(ChevronRightRegular, {}),
disabled: currentPage === totalPages || totalPages === 1,
onClick: () => onChange(currentPage + 1)
}
),
totalPages > outerButtonsThreshold && /* @__PURE__ */ jsx(
Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {}),
disabled: currentPage === totalPages,
onClick: () => onChange(totalPages)
}
)
] });
};
// src/components/ButtonDisplay.tsx
import { useMemo } from "react";
import { makeStyles, tokens, Button as Button2 } from "@fluentui/react-components";
import { ChevronLeftRegular as ChevronLeftRegular2, ChevronRightRegular as ChevronRightRegular2 } from "@fluentui/react-icons";
import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var getLegacyDisplayedPageNumbers = (totalPages, currentPage) => {
return Array.from({ length: totalPages }, (_, index) => index + 1).filter(
(number) => Math.abs(number - currentPage) <= 1 || number === 1 || number === totalPages
);
};
var getDisplayedPageNumbers = (totalPages, currentPage, maxVisiblePageButtons) => {
const legacyPages = getLegacyDisplayedPageNumbers(totalPages, currentPage);
if (maxVisiblePageButtons === void 0) {
return legacyPages;
}
const maxButtons = Math.max(3, Math.floor(maxVisiblePageButtons));
if (totalPages <= maxButtons) {
return Array.from({ length: totalPages }, (_, index) => index + 1);
}
const selectedPages = new Set(legacyPages);
if (selectedPages.size < maxButtons) {
let distance = 2;
while (selectedPages.size < maxButtons) {
const left = currentPage - distance;
const right = currentPage + distance;
let addedInThisCycle = false;
if (left > 1 && !selectedPages.has(left)) {
selectedPages.add(left);
addedInThisCycle = true;
}
if (selectedPages.size >= maxButtons) {
break;
}
if (right < totalPages && !selectedPages.has(right)) {
selectedPages.add(right);
addedInThisCycle = true;
}
if (!addedInThisCycle) {
break;
}
distance += 1;
}
}
if (selectedPages.size > maxButtons) {
const requiredPages = [1, totalPages, currentPage];
const uniqueRequiredPages = Array.from(new Set(requiredPages)).filter(
(page) => page >= 1 && page <= totalPages
);
const optionalPages = Array.from(selectedPages).filter((page) => !uniqueRequiredPages.includes(page)).sort((left, right) => {
const distanceDiff = Math.abs(left - currentPage) - Math.abs(right - currentPage);
return distanceDiff !== 0 ? distanceDiff : left - right;
});
selectedPages.clear();
uniqueRequiredPages.forEach((page) => selectedPages.add(page));
for (const page of optionalPages) {
if (selectedPages.size >= maxButtons) {
break;
}
selectedPages.add(page);
}
}
return Array.from(selectedPages).sort((left, right) => left - right);
};
var useClasses = makeStyles({
innerroot: {
display: "flex",
flexDirection: "row",
alignItems: "center"
},
iconbuttonsize: {
minWidth: tokens.lineHeightBase500,
maxWidth: tokens.lineHeightBase500,
minHeight: tokens.lineHeightBase500,
maxHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase200,
padding: tokens.spacingHorizontalXS
},
pagebuttonsize: {
minWidth: tokens.lineHeightBase500,
minHeight: tokens.lineHeightBase500,
maxHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase200,
whiteSpace: "nowrap",
padding: tokens.spacingHorizontalSNudge
}
});
var ButtonDisplay = ({
currentPage,
totalPages,
onChange,
buttonProps,
selectedButtonProps,
maxVisiblePageButtons
}) => {
const classes = useClasses();
const displayedpagenumbers = useMemo(() => {
return getDisplayedPageNumbers(totalPages, currentPage, maxVisiblePageButtons);
}, [currentPage, totalPages, maxVisiblePageButtons]);
const renderedbuttons = useMemo(() => {
const buttons = [];
for (let i = 0; i < displayedpagenumbers.length; i++) {
const pagedifference = Math.abs(displayedpagenumbers[i] - displayedpagenumbers[i - 1]);
if (i > 0 && pagedifference === 2) {
const missedPage = displayedpagenumbers[i - 1] + 1;
buttons.push(
/* @__PURE__ */ jsx2(
Button2,
{
className: classes.pagebuttonsize,
onClick: () => onChange(missedPage),
appearance: missedPage === currentPage ? "secondary" : "subtle",
...missedPage === currentPage ? selectedButtonProps : buttonProps,
children: missedPage
},
`missed-${i}`
)
);
} else if (i > 0 && pagedifference > 2) {
buttons.push(
/* @__PURE__ */ jsx2(
Button2,
{
className: classes.pagebuttonsize,
onClick: () => onChange(Math.round(displayedpagenumbers[i - 1] + pagedifference / 2)),
appearance: "subtle",
...buttonProps,
children: "..."
},
`ellipsis-${i}`
)
);
}
buttons.push(
/* @__PURE__ */ jsx2(
Button2,
{
className: classes.pagebuttonsize,
onClick: () => onChange(displayedpagenumbers[i]),
appearance: displayedpagenumbers[i] === currentPage ? "secondary" : "subtle",
...displayedpagenumbers[i] === currentPage ? selectedButtonProps : buttonProps,
children: displayedpagenumbers[i]
},
`button-${i}`
)
);
}
return buttons;
}, [currentPage, displayedpagenumbers, onChange, buttonProps, selectedButtonProps]);
return /* @__PURE__ */ jsxs2(Fragment2, { children: [
/* @__PURE__ */ jsx2(
Button2,
{
className: classes.iconbuttonsize,
appearance: "subtle",
icon: /* @__PURE__ */ jsx2(ChevronLeftRegular2, {}),
disabled: currentPage === 1 || totalPages === 1,
onClick: () => onChange(currentPage - 1)
}
),
renderedbuttons,
/* @__PURE__ */ jsx2(
Button2,
{
className: classes.iconbuttonsize,
appearance: "subtle",
icon: /* @__PURE__ */ jsx2(ChevronRightRegular2, {}),
disabled: currentPage === totalPages || totalPages === 1,
onClick: () => onChange(currentPage + 1)
}
)
] });
};
// src/components/Pager.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var useClasses2 = makeStyles2({
root: {
display: "flex",
flexDirection: "row",
alignItems: "center",
columnGap: tokens2.spacingHorizontalXS,
padding: tokens2.spacingHorizontalXXS
}
});
var Pager = ({ totalResults, pageSize, currentPage, onChange, outerButtonsThreshold = 3, display = "text", buttonProps, selectedButtonProps, maxVisiblePageButtons }) => {
const classes = useClasses2();
const totalpages = useMemo2(
() => Math.ceil(totalResults / pageSize),
[pageSize, totalResults]
);
useEffect(() => {
if (currentPage < 1) {
onChange(1);
} else if (currentPage > totalpages && totalpages > 0) {
onChange(totalpages);
}
}, [currentPage, totalpages, onChange]);
return /* @__PURE__ */ jsx3("div", { className: classes.root, children: display === "text" ? /* @__PURE__ */ jsx3(TextDisplay, { currentPage, totalPages: totalpages, onChange, outerButtonsThreshold }) : /* @__PURE__ */ jsx3(ButtonDisplay, { currentPage, totalPages: totalpages, onChange, buttonProps, selectedButtonProps, maxVisiblePageButtons }) });
};
export {
Pager
};
//# sourceMappingURL=index.mjs.map