@ozen-ui/kit
Version:
React component library
91 lines (90 loc) • 5.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = exports.cnPagination = void 0;
var tslib_1 = require("tslib");
require("./Pagination.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var number_1 = require("../../utils/number");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var components_1 = require("./components");
var constants_1 = require("./constants");
var createPaginationRange_1 = require("./helpers/createPaginationRange");
var getItemAriaLabel_1 = require("./helpers/getItemAriaLabel");
var withNavigationButtons_1 = require("./helpers/withNavigationButtons/withNavigationButtons");
exports.cnPagination = (0, classname_1.cn)('Pagination');
exports.Pagination = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Pagination' });
var _a = props.as, Tag = _a === void 0 ? constants_1.PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? constants_1.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 ? getItemAriaLabel_1.getItemAriaLabel : _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 = tslib_1.__rest(_a, ["className"]);
return (react_1.default.createElement(components_1.PaginationItem, tslib_1.__assign({}, rest)));
} : _f, otherProps = tslib_1.__rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
var _g = (0, react_1.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 = (0, react_1.useMemo)(function () {
return (0, createPaginationRange_1.createPaginationRange)({
page: selected,
pageSize: pageSize,
siblingCount: siblingCount,
totalCount: totalCount,
});
}, [selected, pageSize, siblingCount, totalCount]);
var paginationPropsRange = (0, react_1.useMemo)(function () {
var paginationRange = (0, withNavigationButtons_1.withNavigationButton)(range);
return paginationRange.map(function (pageButton) {
var _a, _b;
var isPageNumber = (0, number_1.isNumber)(pageButton);
var type = isPageNumber ? constants_1.PAGE : pageButton;
var isSelected = pageButton === selected;
var mapper = (_a = {},
_a[constants_1.PAGE] = isPageNumber ? pageButton : null,
_a[constants_1.NEXT] = next,
_a[constants_1.PREVIOUS] = previous,
_a[constants_1.ELLIPSIS] = null,
_a);
var mapperDisabled = (_b = {},
_b[constants_1.PREVIOUS] = page <= 0,
_b[constants_1.NEXT] = range.length <= 1 || page === range[range.length - 2],
_b[constants_1.ELLIPSIS] = true,
_b[constants_1.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: (0, components_1.cnPaginationItem)({ size: size, selected: isSelected }),
};
});
}, [
range,
selected,
disabledProp,
previous,
next,
size,
getItemAriaLabel,
onPageChange,
]);
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
react_1.default.createElement("ul", { className: (0, exports.cnPagination)('List') }, paginationPropsRange.map(function (item, index) { return (react_1.default.createElement("li", { key: item.type === constants_1.ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
});
exports.Pagination.displayName = 'Pagination';