@s-ui/react-molecule-pagination
Version:
`MoleculePagination` is a component that displays a range of pages with the current page highlighted and the proper buttons to navigate across the available pages in the entire range of total pages
196 lines • 8.96 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import PropTypes from 'prop-types';
import AtomButton, { atomButtonColors, atomButtonDesigns, atomButtonShapes, atomButtonSizes } from '@s-ui/react-atom-button';
import { isValidPage, isValidShowPages, isValidTotalPages } from './customPropTypes/index.js';
import * as pagination from './helpers/pagination/index.js';
import PageButton from './PageButton.js';
import { BASE_CLASS, defaultCreateUrl, DIVIDER, noop } from './settings.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var MoleculePagination = function MoleculePagination(_ref) {
var ariaLabel = _ref.ariaLabel,
_ref$onSelectNext = _ref.onSelectNext,
onSelectNext = _ref$onSelectNext === void 0 ? noop : _ref$onSelectNext,
_ref$onSelectPage = _ref.onSelectPage,
onSelectPage = _ref$onSelectPage === void 0 ? noop : _ref$onSelectPage,
_ref$onSelectPrev = _ref.onSelectPrev,
onSelectPrev = _ref$onSelectPrev === void 0 ? noop : _ref$onSelectPrev,
_ref$page = _ref.page,
page = _ref$page === void 0 ? 1 : _ref$page,
totalPages = _ref.totalPages,
_ref$showPages = _ref.showPages,
showPages = _ref$showPages === void 0 ? 10 : _ref$showPages,
_ref$prevButtonText = _ref.prevButtonText,
prevButtonText = _ref$prevButtonText === void 0 ? 'Previous' : _ref$prevButtonText,
PrevButtonIcon = _ref.prevButtonIcon,
_ref$nextButtonText = _ref.nextButtonText,
nextButtonText = _ref$nextButtonText === void 0 ? 'Next' : _ref$nextButtonText,
NextButtonIcon = _ref.nextButtonIcon,
_ref$compressed = _ref.compressed,
compressed = _ref$compressed === void 0 ? false : _ref$compressed,
hideDisabled = _ref.hideDisabled,
_ref$selectedPageButt = _ref.selectedPageButtonDesign,
selectedPageButtonDesign = _ref$selectedPageButt === void 0 ? atomButtonDesigns.SOLID : _ref$selectedPageButt,
showEdges = _ref.showEdges,
_ref$nonSelectedPageB = _ref.nonSelectedPageButtonDesign,
nonSelectedPageButtonDesign = _ref$nonSelectedPageB === void 0 ? atomButtonDesigns.FLAT : _ref$nonSelectedPageB,
_ref$prevButtonDesign = _ref.prevButtonDesign,
prevButtonDesign = _ref$prevButtonDesign === void 0 ? atomButtonDesigns.FLAT : _ref$prevButtonDesign,
_ref$nextButtonDesign = _ref.nextButtonDesign,
nextButtonDesign = _ref$nextButtonDesign === void 0 ? atomButtonDesigns.FLAT : _ref$nextButtonDesign,
_ref$selectedPageButt2 = _ref.selectedPageButtonColor,
selectedPageButtonColor = _ref$selectedPageButt2 === void 0 ? 'primary' : _ref$selectedPageButt2,
shape = _ref.shape,
size = _ref.size,
_ref$nonSelectedPageB2 = _ref.nonSelectedPageButtonColor,
nonSelectedPageButtonColor = _ref$nonSelectedPageB2 === void 0 ? 'primary' : _ref$nonSelectedPageB2,
_ref$prevButtonColor = _ref.prevButtonColor,
prevButtonColor = _ref$prevButtonColor === void 0 ? 'primary' : _ref$prevButtonColor,
pagePrefixAriaLabel = _ref.pagePrefixAriaLabel,
prevLinkAriaLabel = _ref.prevLinkAriaLabel,
_ref$nextButtonColor = _ref.nextButtonColor,
nextButtonColor = _ref$nextButtonColor === void 0 ? 'primary' : _ref$nextButtonColor,
nextLinkAriaLabel = _ref.nextLinkAriaLabel,
linkFactory = _ref.linkFactory,
_ref$createUrl = _ref.createUrl,
createUrl = _ref$createUrl === void 0 ? defaultCreateUrl : _ref$createUrl,
_ref$urlPattern = _ref.urlPattern,
urlPattern = _ref$urlPattern === void 0 ? '#' : _ref$urlPattern,
_ref$renderLinks = _ref.renderLinks,
renderLinks = _ref$renderLinks === void 0 ? false : _ref$renderLinks;
var paramsPagination = {
page: page,
totalPages: totalPages,
showPages: showPages,
showEdges: showEdges
};
var FIRST_PAGE = 1;
var handleClickNext = function handleClickNext(e) {
var page = pagination.nextPage(paramsPagination);
onSelectNext(e, {
page: page
});
};
var handleClickPrev = function handleClickPrev(e) {
var page = pagination.prevPage(paramsPagination);
onSelectPrev(e, {
page: page
});
};
var range = pagination.range(paramsPagination);
var nextPage = pagination.nextPage(paramsPagination);
var prevPage = pagination.prevPage(paramsPagination);
var isHidePrev = hideDisabled && !prevPage;
var isHideNext = hideDisabled && !nextPage;
var linkProps = function linkProps(pageNumber) {
return renderLinks && _extends({
link: true,
href: createUrl({
pageNumber: pageNumber,
urlPattern: urlPattern
})
}, linkFactory && {
linkFactory: linkFactory
});
};
return /*#__PURE__*/_jsx("nav", {
"aria-label": ariaLabel,
children: /*#__PURE__*/_jsxs("ul", {
className: BASE_CLASS,
children: [!isHidePrev && /*#__PURE__*/_jsx("li", {
className: BASE_CLASS + "-item",
children: /*#__PURE__*/_jsx(AtomButton, _extends({
"aria-label": prevLinkAriaLabel,
"aria-disabled": !prevPage,
onClick: handleClickPrev,
design: prevButtonDesign,
color: prevButtonColor,
disabled: !prevPage,
shape: shape,
size: size,
leftIcon: PrevButtonIcon && /*#__PURE__*/_jsx(PrevButtonIcon, {})
}, linkProps(prevPage), {
children: prevButtonText
}))
}), compressed ? /*#__PURE__*/_jsx(PageButton, _extends({
"aria-current": "page",
"aria-label": pagePrefixAriaLabel + " " + page,
page: page,
design: selectedPageButtonDesign,
color: selectedPageButtonColor,
onSelectPage: onSelectPage,
shape: shape,
size: size
}, linkProps(page), {
children: page
})) : /*#__PURE__*/_jsxs(_Fragment, {
children: [showEdges && range[0] !== FIRST_PAGE && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(PageButton, _extends({
"aria-label": pagePrefixAriaLabel + " " + FIRST_PAGE,
page: FIRST_PAGE,
design: page === FIRST_PAGE ? selectedPageButtonDesign : nonSelectedPageButtonDesign,
color: page === FIRST_PAGE ? selectedPageButtonColor : nonSelectedPageButtonColor,
onSelectPage: onSelectPage,
shape: shape,
size: size
}, linkProps(FIRST_PAGE), page === FIRST_PAGE && {
'aria-current': 'page'
}, {
children: FIRST_PAGE
})), range[0] - 1 > FIRST_PAGE && /*#__PURE__*/_jsx("li", {
className: BASE_CLASS + "-divider",
children: DIVIDER
})]
}), range.map(function (pageRange) {
return /*#__PURE__*/_jsx(PageButton, _extends({
"aria-label": pagePrefixAriaLabel + " " + pageRange,
page: pageRange,
design: pageRange === page ? selectedPageButtonDesign : nonSelectedPageButtonDesign,
color: pageRange === page ? selectedPageButtonColor : nonSelectedPageButtonColor,
onSelectPage: onSelectPage,
shape: shape,
size: size
}, linkProps(pageRange), pageRange === page && {
'aria-current': 'page'
}, {
children: pageRange
}), pageRange);
}), showEdges && totalPages > 1 && range[range.length - 1] !== totalPages && /*#__PURE__*/_jsxs(_Fragment, {
children: [totalPages - range[range.length - 1] > 1 && /*#__PURE__*/_jsx("li", {
className: BASE_CLASS + "-divider",
children: DIVIDER
}), /*#__PURE__*/_jsx(PageButton, _extends({
"aria-label": pagePrefixAriaLabel + " " + totalPages,
page: totalPages,
design: page === totalPages ? selectedPageButtonDesign : nonSelectedPageButtonDesign,
color: page === totalPages ? selectedPageButtonColor : nonSelectedPageButtonColor,
onSelectPage: onSelectPage,
shape: shape,
size: size
}, linkProps(totalPages), totalPages === page && {
'aria-current': 'page'
}, {
children: totalPages
}))]
})]
}), !isHideNext && /*#__PURE__*/_jsx("li", {
className: BASE_CLASS + "-item",
children: /*#__PURE__*/_jsx(AtomButton, _extends({
"aria-disabled": !nextPage,
"aria-label": nextLinkAriaLabel,
onClick: handleClickNext,
design: nextButtonDesign,
color: nextButtonColor,
disabled: !nextPage,
shape: shape,
size: size,
rightIcon: NextButtonIcon && /*#__PURE__*/_jsx(NextButtonIcon, {})
}, linkProps(nextPage), {
children: nextButtonText
}))
})]
})
});
};
MoleculePagination.displayName = 'MoleculePagination';
export { atomButtonDesigns as moleculePaginationDesigns, atomButtonShapes as moleculePaginationShapes, atomButtonSizes as moleculePaginationSizes };
export default MoleculePagination;