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

Knowmax Pager with Fluent V9 user interface implementation.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ChevronLeftRegular, ChevronRightRegular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular } from '@fluentui/react-icons';
import { Text } from '@fluentui/react-text';
import { Button } from "@fluentui/react-button";
/**
 * TextDisplay component renders navigation controls as text for page switching. It displays navigation buttons
 * and the current page number relative to the total available pages.
 *
 * @param currentPage - The current active page.
 * @param totalPages - The total number of available pages.
 * @param onChange - Callback function to handle page changes.
 * @param outerButtonsThreshold - (Optional) The outerButtonsThreshold value that determines when outer navigation buttons are displayed.
 */
export const TextDisplay = ({ currentPage, totalPages, onChange, outerButtonsThreshold: outerButtonsThreshold = 3 }) => {
    return (_jsxs(_Fragment, { children: [totalPages > outerButtonsThreshold &&
                _jsx(Button, { size: 'small', appearance: 'subtle', icon: _jsx(ChevronDoubleLeftRegular, {}), disabled: currentPage === 1, onClick: () => onChange(1) }), _jsx(Button, { size: 'small', appearance: 'subtle', icon: _jsx(ChevronLeftRegular, {}), disabled: currentPage === 1 || totalPages === 1, onClick: () => onChange(currentPage - 1) }), _jsxs(Text, { children: [currentPage, "/", totalPages] }), _jsx(Button, { size: 'small', appearance: 'subtle', icon: _jsx(ChevronRightRegular, {}), disabled: currentPage === totalPages || totalPages === 1, onClick: () => onChange(currentPage + 1) }), totalPages > outerButtonsThreshold &&
                _jsx(Button, { size: 'small', appearance: 'subtle', icon: _jsx(ChevronDoubleRightRegular, {}), disabled: currentPage === totalPages, onClick: () => onChange(totalPages) })] }));
};