wix-style-react/dist/es/src/Pagination/Pagination.js

wix-style-react

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { ChevronLeft, ChevronRight } from '@wix/wix-ui-icons-common';
import PaginationCore from './PaginationCore';
import { st, classes } from './Pagination.st.css';
const coreComponentDefaults = {
    showFirstPage: true,
    showLastPage: true,
    responsive: false,
    showFirstLastNavButtons: false,
    showInputModeTotalPages: false,
    paginationMode: 'pages',
    nextLabel: React.createElement(ChevronRight, { className: classes.arrow }),
    previousLabel: React.createElement(ChevronLeft, { className: classes.arrow }),
};
/** Component for pagination */
export class Pagination extends PureComponent {
    constructor() {
        super(...arguments);
        this._getMaxPagesToShow = () => {
            const { currentPage, totalPages } = this.props;
            const defaultCount = 7;
            if (!currentPage || !totalPages)
                return defaultCount;
            const absoluteNumDistance = Math.min(Math.abs(1 - currentPage), Math.abs(currentPage - totalPages));
            if (absoluteNumDistance >= 4) {
                return 9;
            }
            else if (absoluteNumDistance === 3) {
                return 8;
            }
            return defaultCount;
        };
    }
    render() {
        const { dataHook, currentPage, totalPages, onChange, nextLabel, previousLabel, className, pageUrl, } = this.props;
        return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook, onFocus: this.props.focusableOnFocus, onBlur: this.props.focusableOnBlur },
            React.createElement(PaginationCore, { className: classes.pagination, ...coreComponentDefaults, previousLabel: previousLabel || coreComponentDefaults.previousLabel, nextLabel: nextLabel || coreComponentDefaults.nextLabel, onChange: onChange, totalPages: totalPages, currentPage: currentPage, maxPagesToShow: this._getMaxPagesToShow(), showNextLabel: currentPage !== totalPages, showPreviousLabel: currentPage !== 1, pageUrl: pageUrl })));
    }
}
Pagination.displayName = 'Pagination';
Pagination.propTypes = {
    dataHook: PropTypes.string,
    className: PropTypes.string,
    totalPages: PropTypes.number,
    currentPage: PropTypes.number,
    onChange: PropTypes.func,
    pageUrl: PropTypes.func,
};
Pagination.defaultProps = {
    currentPage: 1,
};
export default withFocusable(Pagination);
//# sourceMappingURL=Pagination.js.map