@knowmax/pager-fluentuiv9/dist/components/Pager.js

Knowmax Pager with Fluent V9 user interface implementation.

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { makeStyles, shorthands } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { TextDisplay } from './TextDisplay';
import { ButtonDisplay } from './ButtonDisplay';
const useClasses = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        columnGap: tokens.spacingHorizontalXS,
        ...shorthands.padding(tokens.spacingHorizontalXXS)
    }
});
/**
 * Pager component provides navigation controls for page switching. It can display the navigation
 * as text or button blocks based on the `display` prop.
 * @param IPagerProps Props for Pager component.
 */
export const Pager = ({ totalResults, pageSize, currentPage, onChange, outerButtonsThreshold = 3, display = 'text', buttonProps, selectedButtonProps }) => {
    const classes = useClasses();
    const totalpages = useMemo(() => Math.ceil(totalResults / pageSize), [pageSize, totalResults]);
    useEffect(() => {
        if (currentPage < 1) {
            onChange(1);
        }
        else if (currentPage > totalpages && totalpages > 0) {
            onChange(totalpages);
        }
    }, [currentPage, totalpages, onChange]);
    return (_jsx("div", { className: classes.root, children: display === 'text' ?
            _jsx(TextDisplay, { currentPage: currentPage, totalPages: totalpages, onChange: onChange, outerButtonsThreshold: outerButtonsThreshold }) :
            _jsx(ButtonDisplay, { currentPage: currentPage, totalPages: totalpages, onChange: onChange, buttonProps: buttonProps, selectedButtonProps: selectedButtonProps }) }));
};