@knowmax/pager-fluentuiv9
Version:
Knowmax Pager with Fluent V9 user interface implementation.
288 lines (283 loc) • 11.3 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Pager: () => Pager
});
module.exports = __toCommonJS(index_exports);
// src/components/Pager.tsx
var import_react2 = require("react");
var import_react_components3 = require("@fluentui/react-components");
// src/components/TextDisplay.tsx
var import_react_icons = require("@fluentui/react-icons");
var import_react_components = require("@fluentui/react-components");
var import_jsx_runtime = require("react/jsx-runtime");
var TextDisplay = ({ currentPage, totalPages, onChange, outerButtonsThreshold = 3 }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
totalPages > outerButtonsThreshold && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_components.Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ChevronDoubleLeftRegular, {}),
disabled: currentPage === 1,
onClick: () => onChange(1)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_components.Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ChevronLeftRegular, {}),
disabled: currentPage === 1 || totalPages === 1,
onClick: () => onChange(currentPage - 1)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_components.Text, { children: [
currentPage,
"/",
totalPages
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_components.Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ChevronRightRegular, {}),
disabled: currentPage === totalPages || totalPages === 1,
onClick: () => onChange(currentPage + 1)
}
),
totalPages > outerButtonsThreshold && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_components.Button,
{
size: "small",
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.ChevronDoubleRightRegular, {}),
disabled: currentPage === totalPages,
onClick: () => onChange(totalPages)
}
)
] });
};
// src/components/ButtonDisplay.tsx
var import_react = require("react");
var import_react_components2 = require("@fluentui/react-components");
var import_react_icons2 = require("@fluentui/react-icons");
var import_jsx_runtime2 = require("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 = (0, import_react_components2.makeStyles)({
innerroot: {
display: "flex",
flexDirection: "row",
alignItems: "center"
},
iconbuttonsize: {
minWidth: import_react_components2.tokens.lineHeightBase500,
maxWidth: import_react_components2.tokens.lineHeightBase500,
minHeight: import_react_components2.tokens.lineHeightBase500,
maxHeight: import_react_components2.tokens.lineHeightBase500,
fontSize: import_react_components2.tokens.fontSizeBase200,
padding: import_react_components2.tokens.spacingHorizontalXS
},
pagebuttonsize: {
minWidth: import_react_components2.tokens.lineHeightBase500,
minHeight: import_react_components2.tokens.lineHeightBase500,
maxHeight: import_react_components2.tokens.lineHeightBase500,
fontSize: import_react_components2.tokens.fontSizeBase200,
whiteSpace: "nowrap",
padding: import_react_components2.tokens.spacingHorizontalSNudge
}
});
var ButtonDisplay = ({
currentPage,
totalPages,
onChange,
buttonProps,
selectedButtonProps,
maxVisiblePageButtons
}) => {
const classes = useClasses();
const displayedpagenumbers = (0, import_react.useMemo)(() => {
return getDisplayedPageNumbers(totalPages, currentPage, maxVisiblePageButtons);
}, [currentPage, totalPages, maxVisiblePageButtons]);
const renderedbuttons = (0, import_react.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__ */ (0, import_jsx_runtime2.jsx)(
import_react_components2.Button,
{
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__ */ (0, import_jsx_runtime2.jsx)(
import_react_components2.Button,
{
className: classes.pagebuttonsize,
onClick: () => onChange(Math.round(displayedpagenumbers[i - 1] + pagedifference / 2)),
appearance: "subtle",
...buttonProps,
children: "..."
},
`ellipsis-${i}`
)
);
}
buttons.push(
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_components2.Button,
{
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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_components2.Button,
{
className: classes.iconbuttonsize,
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons2.ChevronLeftRegular, {}),
disabled: currentPage === 1 || totalPages === 1,
onClick: () => onChange(currentPage - 1)
}
),
renderedbuttons,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_components2.Button,
{
className: classes.iconbuttonsize,
appearance: "subtle",
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_icons2.ChevronRightRegular, {}),
disabled: currentPage === totalPages || totalPages === 1,
onClick: () => onChange(currentPage + 1)
}
)
] });
};
// src/components/Pager.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var useClasses2 = (0, import_react_components3.makeStyles)({
root: {
display: "flex",
flexDirection: "row",
alignItems: "center",
columnGap: import_react_components3.tokens.spacingHorizontalXS,
padding: import_react_components3.tokens.spacingHorizontalXXS
}
});
var Pager = ({ totalResults, pageSize, currentPage, onChange, outerButtonsThreshold = 3, display = "text", buttonProps, selectedButtonProps, maxVisiblePageButtons }) => {
const classes = useClasses2();
const totalpages = (0, import_react2.useMemo)(
() => Math.ceil(totalResults / pageSize),
[pageSize, totalResults]
);
(0, import_react2.useEffect)(() => {
if (currentPage < 1) {
onChange(1);
} else if (currentPage > totalpages && totalpages > 0) {
onChange(totalpages);
}
}, [currentPage, totalpages, onChange]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classes.root, children: display === "text" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextDisplay, { currentPage, totalPages: totalpages, onChange, outerButtonsThreshold }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonDisplay, { currentPage, totalPages: totalpages, onChange, buttonProps, selectedButtonProps, maxVisiblePageButtons }) });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Pager
});
//# sourceMappingURL=index.cjs.map