wix-style-react
Version:
wix-style-react
206 lines (203 loc) • 8.04 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PageStrip = void 0;
var React = _interopRequireWildcard(require("react"));
var _PaginationCoreSt = require("./PaginationCore.st.css");
var _constants = require("./constants");
var _utils = require("./utils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Pagination/PaginationCore/PageStrip.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); }
class PageStrip extends React.Component {
constructor() {
super(...arguments);
this.responsiveLayoutIsFresh = false;
this.unmounted = false;
this.rootNode = void 0;
this.state = {
responsiveLayout: null
};
}
componentDidMount() {
if (this.props.updateResponsiveLayout) {
// We can't do this in componentWillMount because the caller might need to access DOM here,
// and SSR wouldn't work.
this.props.updateResponsiveLayout(() => {
this.responsiveLayoutIsFresh = false;
// Even though we register a noop callback for `this.props.updateResponsiveLayout`
// in `componentWillUnmount`, we cannot guarantee that the user will not hold onto
// the old callback and invoke it after unmount, which is the reason for checking
// `this.unmounted`.
if (!this.unmounted) {
this.updateLayoutIfNeeded();
}
});
} else {
this.updateLayoutIfNeeded();
}
}
UNSAFE_componentWillReceiveProps() {
this.responsiveLayoutIsFresh = false;
}
componentDidUpdate() {
if (!this.props.updateResponsiveLayout) {
this.updateLayoutIfNeeded();
}
this.forceRepaintInMsEdge();
}
componentWillUnmount() {
this.unmounted = true;
if (this.props.updateResponsiveLayout) {
this.props.updateResponsiveLayout(() => null);
}
}
render() {
return /*#__PURE__*/React.createElement("div", {
ref: el => this.rootNode = el,
"data-hook": _constants.DataHooks.pageStrip,
id: this.props.id ? this.props.id + 'pageStrip' : undefined,
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageStrip, this.props.className),
"data-aid": "qa-page-strip",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement("div", {
className: _PaginationCoreSt.classes.pageStripInner,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 9
}
}, this.renderLayout(this.getLayout(), false)), this.isResponsive() && /*#__PURE__*/React.createElement("div", {
className: _PaginationCoreSt.classes.pageStripInner + ' ' + _PaginationCoreSt.classes.pageStripTemplate,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 11
}
}, this.renderLayout((0, _utils.createResponsiveLayoutTemplate)(this.props), true)));
}
forceRepaintInMsEdge() {
// MS Edge has a glitch that makes page numbers invisible when switching to the preview
// mode in Santa editor. As a workaround we need to force text re-rendering.
// Changing font-variant to small-caps should do the trick without actually affecting
// the appearance of digits.
if (!this.rootNode) {
return;
}
var inlineStyle = this.rootNode.style;
inlineStyle.fontVariant = inlineStyle.fontVariant ? '' : 'small-caps';
}
// We can't use page numbers as keys, because we might need to render the same page twice
// for responsive layout. We also can't use index as a key, because React might reuse the
// node for another page, and keep keyboard focus on it, which we don't want.
renderLayout(layout, isDummy) {
var {
currentPage,
pageUrl,
disabled
} = this.props;
return layout.map((pageNumber, index) => {
if (!pageNumber) {
return /*#__PURE__*/React.createElement("span", {
key: index,
className: _PaginationCoreSt.classes.gap,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 11
}
}, this.props.gapLabel);
}
if (pageNumber === currentPage) {
return /*#__PURE__*/React.createElement("span", {
key: "".concat(pageNumber, "-").concat(index),
"data-hook": "".concat(_constants.DataHooks.page, "-").concat(pageNumber, " ").concat(_constants.DataHooks.currentPage),
"aria-label": "Page ".concat(pageNumber),
className: _PaginationCoreSt.classes.currentPage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 11
}
}, pageNumber);
}
if (isDummy) {
return /*#__PURE__*/React.createElement("a", {
key: "".concat(pageNumber, "-").concat(index),
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageButton, {
disabled
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 11
}
}, pageNumber);
}
return /*#__PURE__*/React.createElement("a", {
key: "".concat(pageNumber, "-").concat(index),
"data-hook": "".concat(_constants.DataHooks.page, "-").concat(pageNumber),
"aria-label": "Page ".concat(pageNumber),
"aria-disabled": disabled,
className: (0, _PaginationCoreSt.st)(_PaginationCoreSt.classes.pageButton, {
disabled
}),
tabIndex: disabled || pageUrl ? undefined : 0,
onClick: disabled ? undefined : e => this.props.onPageClick(e, pageNumber),
onKeyDown: disabled ? undefined : e => this.props.onPageKeyDown(e, pageNumber),
href: !disabled && pageUrl ? pageUrl(pageNumber) : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 9
}
}, pageNumber);
});
}
isResponsive() {
return this.props.responsive && this.props.totalPages > 0 && this.props.maxPagesToShow > 1;
}
getLayout() {
if (!this.isResponsive()) {
return (0, _utils.createStaticLayout)(this.props);
}
if (this.state.responsiveLayout) {
return this.state.responsiveLayout;
}
return (0, _utils.createStaticLayout)({
totalPages: this.props.totalPages,
currentPage: this.props.currentPage,
showFirstPage: this.props.showFirstPage,
showLastPage: this.props.showLastPage,
// This is pretty arbitrary. 5 is the minimum space required to show the first, current, and last page.
maxPagesToShow: 5
});
}
updateLayoutIfNeeded() {
if (!this.isResponsive() || this.responsiveLayoutIsFresh || !this.rootNode) {
return;
}
this.responsiveLayoutIsFresh = true;
this.setState({
responsiveLayout: (0, _utils.createResponsiveLayout)({
container: this.rootNode.children[1],
totalPages: this.props.totalPages,
currentPage: this.props.currentPage,
maxPagesToShow: this.props.maxPagesToShow,
showFirstPage: this.props.showFirstPage,
showLastPage: this.props.showLastPage
})
});
}
}
exports.PageStrip = PageStrip;
//# sourceMappingURL=PageStrip.js.map