@ozen-ui/kit/__inner__/esm/components/Pagination/Pagination.js

React component library

import { __assign, __rest } from "tslib";
import './Pagination.css';
import React, { useMemo } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { isNumber } from '../../utils/number';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { PaginationItem, cnPaginationItem, } from './components';
import { PAGINATION_DEFAULT_TAG, PAGINATION_DEFAULT_PAGE, PAGINATION_DEFAULT_SIBLING_COUNT, PAGINATION_DEFAULT_SIZE, ELLIPSIS, NEXT, PAGE, PREVIOUS, } from './constants';
import { createPaginationRange } from './helpers/createPaginationRange';
import { getItemAriaLabel as createAriaLabel } from './helpers/getItemAriaLabel';
import { withNavigationButton } from './helpers/withNavigationButtons/withNavigationButtons';
export var cnPagination = cn('Pagination');
export var Pagination = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({ props: inProps, name: 'Pagination' });
    var _a = props.as, Tag = _a === void 0 ? PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? PAGINATION_DEFAULT_SIBLING_COUNT : _d, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, disabledProp = props.disabled, onPageChange = props.onPageChange, _e = props.getItemAriaLabel, getItemAriaLabel = _e === void 0 ? createAriaLabel : _e, 
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _f = props.renderComponent, 
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    renderComponent = _f === void 0 ? function (_a) {
        var className = _a.className, rest = __rest(_a, ["className"]);
        return (React.createElement(PaginationItem, __assign({}, rest)));
    } : _f, otherProps = __rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
    var _g = useMemo(function () {
        var selected = page + 1;
        return {
            selected: selected,
            previous: selected - 1,
            next: selected + 1,
        };
    }, [page]), selected = _g.selected, previous = _g.previous, next = _g.next;
    var range = useMemo(function () {
        return createPaginationRange({
            page: selected,
            pageSize: pageSize,
            siblingCount: siblingCount,
            totalCount: totalCount,
        });
    }, [selected, pageSize, siblingCount, totalCount]);
    var paginationPropsRange = useMemo(function () {
        var paginationRange = withNavigationButton(range);
        return paginationRange.map(function (pageButton) {
            var _a, _b;
            var isPageNumber = isNumber(pageButton);
            var type = isPageNumber ? PAGE : pageButton;
            var isSelected = pageButton === selected;
            var mapper = (_a = {},
                _a[PAGE] = isPageNumber ? pageButton : null,
                _a[NEXT] = next,
                _a[PREVIOUS] = previous,
                _a[ELLIPSIS] = null,
                _a);
            var mapperDisabled = (_b = {},
                _b[PREVIOUS] = page <= 0,
                _b[NEXT] = range.length <= 1 || page === range[range.length - 2],
                _b[ELLIPSIS] = true,
                _b[PAGE] = false,
                _b);
            return {
                type: type,
                size: size,
                selected: isSelected,
                page: mapper[type],
                disabled: disabledProp || mapperDisabled[type],
                'aria-label': getItemAriaLabel({
                    page: mapper[type],
                    selected: isSelected,
                    type: type,
                }),
                onClick: onPageChange,
                className: cnPaginationItem({ size: size, selected: isSelected }),
            };
        });
    }, [
        range,
        selected,
        disabledProp,
        previous,
        next,
        size,
        getItemAriaLabel,
        onPageChange,
    ]);
    return (React.createElement(Tag, __assign({ className: cnPagination({}, [className]), ref: ref }, otherProps),
        React.createElement("ul", { className: cnPagination('List') }, paginationPropsRange.map(function (item, index) { return (React.createElement("li", { key: item.type === ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
});
Pagination.displayName = 'Pagination';