@totalsoft/rocket-ui/dist/components/navigation/Pagination/Pagination.js

A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import TablePagination from '@mui/material/TablePagination';
import Grid from '@mui/material/Grid2';
import { RefreshButtonContainer } from './PaginationStyles';
import RefreshIcon from '@mui/icons-material/Refresh';
import IconButton from '../../buttons/IconButton';
import { T, always, cond, equals, isNil } from 'ramda';
const displayedRows = (rowsOfText, pageSize) => ({ from, to, count, page }) => {
    return count ? `${from}-${to} ${rowsOfText} ${count}` : `${from}-${(page + 1) * pageSize}`;
};
const contentAlignment = cond([
    [equals('left'), always('flex-start')],
    [equals('right'), always('flex-end')],
    [equals('center'), always('center')],
    [T, always('flex-end')]
]);
/**
 * The Pagination component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog.
 *
 * At its core, the Pagination component uses [Material-UI TablePagination](https://mui.com/material-ui/react-pagination/#table-pagination).
 */
const Pagination = ({ loading, count = null, page, pageSize, onPageChange, onRowsPerPageChange, rowsPerPageText = 'Rows per page:', onRefresh, rowsOfText = 'of', rowsPerPageOptions = [10, 25, 50, 100], align, hasNextPage, hasPreviousPage, ...rest }) => {
    const handlePageChange = useCallback((_event, newPage) => {
        const direction = newPage - page;
        onPageChange(newPage, direction > 0);
    }, [onPageChange, page]);
    const handleRowsPerPageChange = useCallback((event) => {
        const value = Number(event?.target?.value);
        onRowsPerPageChange(value);
    }, [onRowsPerPageChange]);
    const handleRefresh = useCallback(() => onRefresh && onRefresh(), [onRefresh]);
    const nextButton = isNil(hasNextPage) ? {} : { nextButton: { disabled: !hasNextPage } };
    const previousButton = isNil(hasPreviousPage) ? {} : { previousButton: { disabled: !hasPreviousPage } };
    return (React.createElement(Grid, { container: true, alignItems: "center", justifyContent: contentAlignment(align) },
        !loading && (React.createElement(TablePagination, { component: "div", count: count, page: page, onPageChange: handlePageChange, rowsPerPage: pageSize, onRowsPerPageChange: handleRowsPerPageChange, labelRowsPerPage: rowsPerPageText, labelDisplayedRows: displayedRows(rowsOfText, pageSize), rowsPerPageOptions: rowsPerPageOptions, slotProps: {
                actions: {
                    ...nextButton,
                    ...previousButton
                }
            }, ...rest })),
        onRefresh && (React.createElement(RefreshButtonContainer, null,
            React.createElement(IconButton, { onClick: handleRefresh, color: "default", variant: "text", disabled: loading },
                React.createElement(RefreshIcon, null))))));
};
Pagination.propTypes = {
    /**
     * If the page is loading, this property is set to true
     */
    loading: PropTypes.bool,
    /**
     * @default null
     * The total number of pages.
     */
    count: PropTypes.number,
    /**
     * The zero-based index of the current page.
     */
    page: PropTypes.number.isRequired,
    /**
     * The number of rows per page. This property is required.
     */
    pageSize: PropTypes.number.isRequired,
    /**
     * Callback fired when the page is changed.
     *
     * @param {number} page The page selected.
     * @param {boolean} direction Direction for previous/next page (false for previous, true for next).
     */
    onPageChange: PropTypes.func.isRequired,
    /**
     * Callback fired when the number of rows per page is changed.
     *
     * @param {number} value The selected rows per page value
     */
    onRowsPerPageChange: PropTypes.func.isRequired,
    /**
     * The function called on refresh.
     */
    onRefresh: PropTypes.func,
    /**
     * @default 'Rows per page:'
     * Customize the rows per page label.
     */
    rowsPerPageText: PropTypes.node,
    /**
     * @default 'of'
     * Customize the displayed rows label.
     */
    rowsOfText: PropTypes.string,
    /**
     * @default '[10, 25, 50, 100]'
     * Customizes the options of the rows per page select field. If less than two options are
     * available, no select field will be displayed.
     * Use -1 for the value with a custom label to show all the rows.
     */
    rowsPerPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.exact({
            label: PropTypes.string.isRequired,
            value: PropTypes.number.isRequired
        })
    ]).isRequired),
    /**
     * Align container.
     * @default 'right'
     */
    align: PropTypes.oneOf(['left', 'right', 'center']),
    /**
     * If 'true', the next page button will be disabled.
     * @default false
     */
    hasNextPage: PropTypes.bool,
    /**
     * If 'true', the previous page button will be disabled.
     * @default false
     */
    hasPreviousPage: PropTypes.bool
};
export default Pagination;
//# sourceMappingURL=Pagination.js.map