@xcritical/pagination
Version:
301 lines (272 loc) • 11.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Select = require('@xcritical/select');
var Select__default = _interopDefault(Select);
var Button = require('@xcritical/button');
var Button__default = _interopDefault(Button);
var range = _interopDefault(require('lodash.range'));
var theme = require('@xcritical/theme');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var paginationThemeNamespace = '@xcritical\\pagination';
var defaultPaginationTheme = {
wrapper: {
display: 'inline-flex'
},
totals: {
display: 'flex',
alignItems: 'center',
marginRight: '15px'
},
buttonGroup: {
borderRadius: '5px'
},
button: {
borderColor: theme.colors.PRIMARY,
selected: {
background: theme.colors.WHITE,
borderColor: theme.colors.PRIMARY,
color: theme.colors.PRIMARY + " !important"
},
hover: {
background: theme.colors.WHITE
},
active: {
background: theme.colors.WHITE,
borderColor: theme.colors.PRIMARY,
color: theme.colors.PRIMARY,
boxShadowColor: 'transparent'
}
},
select: {
width: '120px',
container: {
marginLeft: '15px'
},
button: {
borderColor: theme.colors.PRIMARY
}
}
};
var getPaginationStyles = function getPaginationStyles(theme$1, propertyPath) {
var func = theme.getThemedState(paginationThemeNamespace, defaultPaginationTheme);
return func(theme$1, propertyPath);
};
var getPaginationButtonGroupTheme = function getPaginationButtonGroupTheme(theme) {
var _ref;
return _ref = {}, _ref[Button.buttonGroupThemeNamespace] = getPaginationStyles(theme, ['buttonGroup']), _ref;
};
var getPaginationButtonTheme = function getPaginationButtonTheme(theme) {
var _ref2;
return _ref2 = {}, _ref2[Button.buttonThemeNamespace] = {
appearance: {
paginationButton: getPaginationStyles(theme, ['button'])
}
}, _ref2;
};
var getPaginationSelectTheme = function getPaginationSelectTheme(theme) {
var _ref3;
return _ref3 = {}, _ref3[Select.selectThemeNamespace] = {
appearance: {
paginationSelect: getPaginationStyles(theme, ['select'])
}
}, _ref3;
};
var mapPageSizeOption = function mapPageSizeOption(pageSize) {
return {
value: pageSize,
label: pageSize
};
};
var getVisiblePagesArray = function getVisiblePagesArray(currentPage, totalPages, isAvailableVisibleRange, availableVisibleRange, availableVisibleRangeCenter) {
if (isAvailableVisibleRange) {
var isStartRange = currentPage <= availableVisibleRangeCenter;
if (isStartRange) return range(2, 2 + availableVisibleRange);
var isEndRange = currentPage + availableVisibleRangeCenter >= totalPages;
if (isEndRange) return range(totalPages - availableVisibleRange, totalPages);
var visiblePagesStart = currentPage - availableVisibleRangeCenter + 1;
var visiblePagesEnd = visiblePagesStart + availableVisibleRange;
return range(visiblePagesStart, visiblePagesEnd);
}
return range(2, 2 + availableVisibleRange);
};
var _templateObject, _templateObject2;
var PaginationWrapper = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref) {
var theme = _ref.theme;
return getPaginationStyles(theme, ['wrapper']);
});
var StyledTotals = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
var theme = _ref2.theme;
return getPaginationStyles(theme, ['totals']);
});
var Totals = /*#__PURE__*/React.memo(function (_ref) {
var currentPage = _ref.currentPage,
pageSize = _ref.pageSize,
total = _ref.total,
className = _ref.className;
var from = (currentPage - 1) * pageSize + 1;
var to = currentPage * pageSize;
return React.createElement(StyledTotals, {
className: className
}, from + " - " + (to > total ? total : to) + " of " + total);
});
var PurePagination = function PurePagination(_ref) {
var _ref$currentPage = _ref.currentPage,
currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
_ref$visibleRange = _ref.visibleRange,
visibleRange = _ref$visibleRange === void 0 ? 5 : _ref$visibleRange,
_ref$showSizeChanger = _ref.showSizeChanger,
showSizeChanger = _ref$showSizeChanger === void 0 ? true : _ref$showSizeChanger,
_ref$showTotals = _ref.showTotals,
showTotals = _ref$showTotals === void 0 ? false : _ref$showTotals,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$pageSize = _ref.pageSize,
pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
_ref$pageSizeOptions = _ref.pageSizeOptions,
pageSizeOptions = _ref$pageSizeOptions === void 0 ? [25, 50, 100] : _ref$pageSizeOptions,
pageSizeProps = _ref.pageSizeProps,
total = _ref.total,
onChangePage = _ref.onChangePage,
onChangePageSize = _ref.onChangePageSize,
theme = _ref.theme,
className = _ref.className,
classNamePrefix = _ref.classNamePrefix;
var toPrevious = function toPrevious(availableVisibleRangeCenter) {
var newCurrentPage = currentPage - visibleRange;
var isStartRange = newCurrentPage <= visibleRange;
var newAvailableCurrentPage = isStartRange ? availableVisibleRangeCenter + 1 : newCurrentPage;
onChangePage(newAvailableCurrentPage);
};
var toNext = function toNext(availableVisibleRangeCenter, visibleCenterPage, totalPages) {
var newCurrentPage = visibleCenterPage + visibleRange;
var isEndRange = newCurrentPage > totalPages - visibleRange;
var newAvailableCurrentPage = isEndRange ? totalPages - availableVisibleRangeCenter : newCurrentPage;
onChangePage(newAvailableCurrentPage);
};
var changePageSize = function changePageSize(pageSizeOption) {
var _pageSizeOption$value;
var newTotalPages = Math.ceil(total / ((_pageSizeOption$value = pageSizeOption == null ? void 0 : pageSizeOption.value) != null ? _pageSizeOption$value : 1));
var newCurrentPage = currentPage > newTotalPages ? newTotalPages : currentPage;
if (onChangePageSize) {
var _pageSizeOption$value2;
onChangePageSize(newCurrentPage, (_pageSizeOption$value2 = pageSizeOption == null ? void 0 : pageSizeOption.value) != null ? _pageSizeOption$value2 : 1);
}
};
var totalPages = Math.ceil(total / pageSize);
var totalVisiblePages = totalPages - 2;
var needFirstPage = totalPages >= 1;
var needVisiblePages = totalPages >= 3;
var needLastPage = totalPages >= 2;
var isAvailableVisibleRange = totalVisiblePages > visibleRange;
var availableVisibleRange = isAvailableVisibleRange ? visibleRange : totalVisiblePages;
var availableVisibleRangeCenter = Math.ceil(availableVisibleRange / 2);
var visiblePagesArray = getVisiblePagesArray(currentPage, totalPages, isAvailableVisibleRange, availableVisibleRange, availableVisibleRangeCenter); // eslint-disable-next-line prefer-destructuring
var visibleCenterPage = visiblePagesArray[availableVisibleRangeCenter - 1];
var showPrevious = isAvailableVisibleRange && visibleCenterPage - availableVisibleRangeCenter > 1;
var showNext = isAvailableVisibleRange && visibleCenterPage + availableVisibleRangeCenter < totalPages;
var mappedPageSizeOption = mapPageSizeOption(pageSize);
var mappedPageSizeOptions = pageSizeOptions.map(mapPageSizeOption);
var paginationButtonGroupTheme = getPaginationButtonGroupTheme(theme);
var paginationButtonTheme = getPaginationButtonTheme(theme);
var paginationSelectTheme = getPaginationSelectTheme(theme);
return React.createElement(PaginationWrapper, {
className: className
}, showTotals && React.createElement(Totals, {
className: classNamePrefix && classNamePrefix + "__totals",
currentPage: currentPage,
pageSize: pageSize,
total: total
}), React.createElement(Button.ButtonGroup, {
className: classNamePrefix && classNamePrefix + "__button-group",
theme: paginationButtonGroupTheme
}, needFirstPage && React.createElement(Button__default, {
className: classNamePrefix && classNamePrefix + "__button-" + currentPage,
classNamePrefix: classNamePrefix && classNamePrefix + "-button",
theme: paginationButtonTheme,
appearance: "paginationButton",
selected: currentPage === 1,
disabled: disabled,
onClick: function onClick() {
return onChangePage(1);
}
}, "1"), showPrevious && React.createElement(Button__default, {
className: classNamePrefix && classNamePrefix + "__button-previous",
classNamePrefix: classNamePrefix && classNamePrefix + "-button",
theme: paginationButtonTheme,
appearance: "paginationButton",
disabled: disabled,
onClick: function onClick() {
return toPrevious(availableVisibleRangeCenter);
}
}, React.createElement("span", null, "\u2039")), needVisiblePages && visiblePagesArray.map(function (visiblePage) {
return React.createElement(Button__default, {
className: classNamePrefix && classNamePrefix + "__button-visible-page-" + visiblePage,
classNamePrefix: classNamePrefix && classNamePrefix + "-button",
key: visiblePage,
theme: paginationButtonTheme,
appearance: "paginationButton",
selected: currentPage === visiblePage,
disabled: disabled,
onClick: function onClick() {
return onChangePage(visiblePage);
}
}, visiblePage);
}), showNext && React.createElement(Button__default, {
className: className && className + "__button-next",
classNamePrefix: classNamePrefix && classNamePrefix + "-button",
theme: paginationButtonTheme,
appearance: "paginationButton",
disabled: disabled,
onClick: function onClick() {
return toNext(availableVisibleRangeCenter, visibleCenterPage, totalPages);
}
}, React.createElement("span", null, "\u203A")), needLastPage && React.createElement(Button__default, {
className: classNamePrefix && classNamePrefix + "__button-last-page",
classNamePrefix: classNamePrefix && classNamePrefix + "-button",
theme: paginationButtonTheme,
appearance: "paginationButton",
selected: currentPage === totalPages,
disabled: disabled,
onClick: function onClick() {
return onChangePage(totalPages);
}
}, totalPages)), showSizeChanger && React.createElement(Select__default, _extends({
className: classNamePrefix && classNamePrefix + "__select",
classNamePrefix: classNamePrefix && classNamePrefix + "-select",
theme: paginationSelectTheme,
appearance: "paginationSelect",
options: mappedPageSizeOptions,
value: mappedPageSizeOption,
isDisabled: disabled,
isMulti: false,
onChange: changePageSize
}, pageSizeProps)));
};
var Pagination = /*#__PURE__*/styled.withTheme(PurePagination);
exports.Pagination = Pagination;
exports.paginationThemeNamespace = paginationThemeNamespace;
//# sourceMappingURL=pagination.cjs.development.js.map