wix-style-react
Version:
wix-style-react
355 lines (354 loc) • 12.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _PaginationCoreSt = require("./PaginationCore.st.css");
var _constants = require("./constants");
var _utils = require("./utils");
var _PageStrip = require("./PageStrip");
var _propsUtils = require("../../utils/propsUtils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Pagination/PaginationCore/PaginationCore.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var upperCaseFirst = str => str[0].toUpperCase() + str.slice(1);
var ButtonType = /*#__PURE__*/function (ButtonType) {
ButtonType["Prev"] = "previous";
ButtonType["Next"] = "next";
ButtonType["First"] = "first";
ButtonType["Last"] = "last";
return ButtonType;
}(ButtonType || {});
class PaginationCore extends React.Component {
constructor() {
super(...arguments);
this.rootNode = void 0;
this.getMaxPagesToShow = () => {
if (this.props.maxPagesToShow) {
return this.props.maxPagesToShow;
}
if (this.props.responsive) {
return 20;
}
return 7;
};
this.state = {
pageInputValue: String(this.props.currentPage),
pageInputHasError: false
};
this.handlePageInputChange = e => {
this.setState({
pageInputValue: e.target.value,
pageInputHasError: false
});
};
this.handlePageInputKeyDown = event => {
// Enter
if (event.key === 'Enter') {
var page = Number(this.state.pageInputValue);
if (page !== this.props.currentPage) {
if (1 <= page && page <= this.props.totalPages) {
this.props.onChange && this.props.onChange({
event,
page
});
} else {
this.setState({
pageInputHasError: true
});
}
}
}
};
this.handlePageInputBlur = () => {
this.setState({
pageInputValue: String(this.props.currentPage),
pageInputHasError: false
});
};
this.handlePageClick = (event, page) => {
this.props.onChange && this.props.onChange({
event,
page
});
};
this.handlePageKeyDown = (event, page) => {
// Enter or Space
if (event.key === 'Enter' || event.key === 'Space') {
this.props.onChange && this.props.onChange({
event,
page
});
}
};
}
updateRootMinWidth() {
this.rootNode && this.props.paginationMode && (0, _utils.measureAndSetRootMinWidth)(this.rootNode, this.props.paginationMode, this.props.id);
}
componentDidMount() {
this.props.updateResponsiveLayout && this.updateRootMinWidth();
}
componentDidUpdate() {
this.props.updateResponsiveLayout && this.updateRootMinWidth();
}
getId() {
var elementName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return (0, _utils.getId)(this.props.id, elementName);
}
renderPageStrip() {
return /*#__PURE__*/React.createElement(_PageStrip.PageStrip, {
id: this.props.id,
totalPages: this.props.totalPages || 0,
currentPage: this.props.currentPage || 0,
maxPagesToShow: this.getMaxPagesToShow() || 0,
showFirstPage: !!this.props.showFirstPage,
showLastPage: !!this.props.showLastPage,
responsive: !!this.props.responsive,
pageUrl: this.props.pageUrl,
gapLabel: this.props.gapLabel || '',
onPageClick: this.handlePageClick,
onPageKeyDown: this.handlePageKeyDown,
updateResponsiveLayout: this.props.updateResponsiveLayout,
disabled: !!this.props.disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 7
}
});
}
renderPages() {
switch (this.props.paginationMode) {
case _constants.PaginationCoreMode.Input:
return this.renderPageForm();
case _constants.PaginationCoreMode.Compact:
return this.renderPageCompact();
case _constants.PaginationCoreMode.Pages:
default:
return this.renderPageStrip();
}
}
renderPageCompact() {
return /*#__PURE__*/React.createElement("div", {
"data-hook": _constants.DataHooks.pageCompact,
id: this.getId('pageCompact'),
className: _PaginationCoreSt.classes.compact,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement("span", {
id: this.getId('currentPage'),
"data-hook": _constants.DataHooks.currentPage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 9
}
}, this.props.currentPage), /*#__PURE__*/React.createElement("span", {
id: this.getId('slash'),
className: _PaginationCoreSt.classes.slash,
"data-hook": _constants.DataHooks.slashLabel,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 9
}
}, this.props.slashLabel), /*#__PURE__*/React.createElement("span", {
id: this.getId('totalPages'),
"data-hook": _constants.DataHooks.totalPages,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 9
}
}, this.props.totalPages));
}
renderPageForm() {
return /*#__PURE__*/React.createElement("div", {
"data-hook": _constants.DataHooks.pageForm,
id: this.getId('pageForm'),
className: _PaginationCoreSt.classes.pageForm,
dir: "ltr",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement("input", {
id: this.getId('pageInput'),
"data-hook": _constants.DataHooks.pageInput,
type: "number",
className: _PaginationCoreSt.classes.pageInput,
min: 1,
max: this.props.totalPages,
value: this.state.pageInputValue,
disabled: this.props.disabled,
onChange: this.handlePageInputChange,
onKeyDown: this.handlePageInputKeyDown,
"aria-label": 'Page number, select a number between 1 and ' + this.props.totalPages,
onBlur: this.handlePageInputBlur,
style: {
width: (0, _utils.calculateWidth)(this.props.totalPages)
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 9
}
}), this.props.showInputModeTotalPages && [/*#__PURE__*/React.createElement("span", {
key: "slash",
id: this.getId('slash'),
className: _PaginationCoreSt.classes.slash,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 11
}
}, this.props.slashLabel), /*#__PURE__*/React.createElement("span", {
key: "total-pages",
id: this.getId('totalPages'),
"data-hook": _constants.DataHooks.totalPages,
className: _PaginationCoreSt.classes.totalPages,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 11
}
}, this.props.totalPages)]);
}
renderEmptyButton(type) {
var btnClass = '';
switch (type) {
case ButtonType.Prev:
{
btnClass = _PaginationCoreSt.classes.emptyButtonPrevious;
break;
}
case ButtonType.Next:
{
btnClass = _PaginationCoreSt.classes.emptyButtonNext;
break;
}
default:
}
return /*#__PURE__*/React.createElement("div", {
"data-hook": _constants.DataHooks[type],
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.emptyButton, btnClass),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 7
}
});
}
renderNavButton(type) {
var {
currentPage,
totalPages,
pageUrl
} = this.props;
var disabled = this.props.disabled || (type === ButtonType.First || type === ButtonType.Prev) && (currentPage || 0) <= 1 || (type === ButtonType.Last || type === ButtonType.Next) && (currentPage || 0) >= totalPages;
var [btnClass, label, page] = {
[ButtonType.Prev]: [_PaginationCoreSt.classes.navButtonPrevious, this.props.previousLabel, (currentPage || 0) - 1],
[ButtonType.Next]: [_PaginationCoreSt.classes.navButtonNext, this.props.nextLabel, (currentPage || 0) + 1],
[ButtonType.First]: [_PaginationCoreSt.classes.navButtonFirst, this.props.firstLabel, 1],
[ButtonType.Last]: [_PaginationCoreSt.classes.navButtonLast, this.props.lastLabel, totalPages]
}[type];
return /*#__PURE__*/React.createElement("a", {
"data-hook": _constants.DataHooks[type],
id: this.getId('navButton' + upperCaseFirst(type)),
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.navButton, {
disabled
}, btnClass),
"aria-label": upperCaseFirst(type) + ' Page',
"aria-disabled": disabled,
tabIndex: disabled || pageUrl ? undefined : 0,
onClick: disabled ? undefined : event => this.handlePageClick(event, page),
onKeyDown: disabled ? undefined : event => this.handlePageKeyDown(event, page),
href: !disabled && pageUrl ? pageUrl(page) : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 7
}
}, label);
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
pageInputValue: String(nextProps.currentPage),
pageInputHasError: false
});
}
render() {
var {
disabled,
showFirstLastNavButtons,
showNextLabel,
showPreviousLabel,
width,
style: inlineStyle
} = this.props;
var styleStates = {
disabled,
error: this.state.pageInputHasError
};
return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
ref: el => this.rootNode = el,
id: this.getId(''),
"aria-label": "PaginationCore Navigation",
"aria-disabled": disabled,
dir: this.props.rtl ? 'rtl' : undefined,
onClick: this.props.onClick,
onDoubleClick: this.props.onDoubleClick,
onMouseEnter: this.props.onMouseEnter,
onMouseLeave: this.props.onMouseLeave,
style: inlineStyle || {
width
},
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.root, styleStates, this.props.className)
}, (0, _propsUtils.filterDataProps)(this.props), {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 7
}
}), showFirstLastNavButtons && this.renderNavButton(ButtonType.First), showPreviousLabel ? this.renderNavButton(ButtonType.Prev) : this.renderEmptyButton(ButtonType.Prev), this.renderPages(), showNextLabel ? this.renderNavButton(ButtonType.Next) : this.renderEmptyButton(ButtonType.Next), showFirstLastNavButtons && this.renderNavButton(ButtonType.Last));
}
}
exports.default = PaginationCore;
PaginationCore.displayName = 'PaginationCore';
PaginationCore.defaultProps = {
currentPage: 1,
showFirstLastNavButtons: false,
showFirstPage: false,
showLastPage: false,
showNextLabel: true,
showPreviousLabel: true,
responsive: false,
paginationMode: 'pages',
showInputModeTotalPages: false,
disabled: false,
// dir="rtl" automatically flips the direction of less-than and more-than signs.
// If we decide to use different labels we need to add conditional logic.
firstLabel: '<<',
lastLabel: '>>',
previousLabel: '<',
nextLabel: '>',
gapLabel: '...',
slashLabel: '\u00A0/\u00A0'
};
//# sourceMappingURL=PaginationCore.js.map