wix-style-react
Version:
wix-style-react
120 lines • 5.99 kB
JavaScript
import * as React from 'react';
import { st, classes } from './PaginationCore.st.css';
import { DataHooks } from './constants';
import { createResponsiveLayout, createResponsiveLayoutTemplate, createStaticLayout, } from './utils';
export class PageStrip extends React.Component {
constructor() {
super(...arguments);
this.responsiveLayoutIsFresh = false;
this.unmounted = false;
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 (React.createElement("div", { ref: el => (this.rootNode = el), "data-hook": DataHooks.pageStrip, id: this.props.id ? this.props.id + 'pageStrip' : undefined, className: st(classes.pageStrip, this.props.className), "data-aid": "qa-page-strip" },
React.createElement("div", { className: classes.pageStripInner }, this.renderLayout(this.getLayout(), false)),
this.isResponsive() && (React.createElement("div", { className: classes.pageStripInner + ' ' + classes.pageStripTemplate }, this.renderLayout(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;
}
const 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) {
const { currentPage, pageUrl, disabled } = this.props;
return layout.map((pageNumber, index) => {
if (!pageNumber) {
return (React.createElement("span", { key: index, className: classes.gap }, this.props.gapLabel));
}
if (pageNumber === currentPage) {
return (React.createElement("span", { key: `${pageNumber}-${index}`, "data-hook": `${DataHooks.page}-${pageNumber} ${DataHooks.currentPage}`, "aria-label": `Page ${pageNumber}`, className: classes.currentPage }, pageNumber));
}
if (isDummy) {
return (React.createElement("a", { key: `${pageNumber}-${index}`, className: st(classes.pageButton, { disabled }) }, pageNumber));
}
return (React.createElement("a", { key: `${pageNumber}-${index}`, "data-hook": `${DataHooks.page}-${pageNumber}`, "aria-label": `Page ${pageNumber}`, "aria-disabled": disabled, className: st(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 }, pageNumber));
});
}
isResponsive() {
return (this.props.responsive &&
this.props.totalPages > 0 &&
this.props.maxPagesToShow > 1);
}
getLayout() {
if (!this.isResponsive()) {
return createStaticLayout(this.props);
}
if (this.state.responsiveLayout) {
return this.state.responsiveLayout;
}
return 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: 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,
}),
});
}
}
//# sourceMappingURL=PageStrip.js.map