@knowmax/pager-fluentuiv9
Version:
Knowmax Pager with Fluent V9 user interface implementation.
49 lines (48 loc) • 3.2 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { makeStyles, shorthands } from "@griffel/react";
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
import { tokens } from '@fluentui/react-theme';
import { Button } from '@fluentui/react-button';
const useClasses = makeStyles({
innerroot: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
buttonsize: {
minWidth: tokens.lineHeightBase500,
maxWidth: tokens.lineHeightBase500,
minHeight: tokens.lineHeightBase500,
maxHeight: tokens.lineHeightBase500,
fontSize: tokens.fontSizeBase200,
...shorthands.padding(tokens.spacingHorizontalXS)
}
});
/**
* ButtonDisplay component renders a set of navigation buttons for page switching. It calculates the displayed page numbers
* based on the current page and total pages, and adds ellipsis ('...') when appropriate to optimize pagination navigation.
*
* @param currentPage - The current active page.
* @param totalPages - The total number of available pages.
* @param onChange - Callback function to handle page changes.
* @param buttonProps? - Props that can be passed to overwrite the appearance and behavior of the button within the component.
*/
export const ButtonDisplay = ({ currentPage, totalPages, onChange, buttonProps, selectedButtonProps }) => {
const classes = useClasses();
const displayedpagenumbers = useMemo(() => {
return Array.from({ length: totalPages }, (_, index) => index + 1).filter(number => Math.abs(number - currentPage) <= 1 || number === 1 || number === totalPages);
}, [currentPage, totalPages]);
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 > 1) {
buttons.push(_jsx(Button, { className: classes.buttonsize, onClick: () => onChange(Math.round(displayedpagenumbers[i - 1] + pagedifference / 2)), appearance: 'subtle', ...buttonProps, children: "..." }, `ellipsis-${i}`));
}
buttons.push(_jsx(Button, { className: classes.buttonsize, 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]);
return (_jsxs(_Fragment, { children: [_jsx(Button, { className: classes.buttonsize, appearance: 'subtle', icon: _jsx(ChevronLeftRegular, {}), disabled: currentPage === 1 || totalPages === 1, onClick: () => onChange(currentPage - 1) }), renderedbuttons, _jsx(Button, { className: classes.buttonsize, appearance: 'subtle', icon: _jsx(ChevronRightRegular, {}), disabled: currentPage === totalPages || totalPages === 1, onClick: () => onChange(currentPage + 1) })] }));
};