@cimpress/react-components
Version:
React components to support the MCP styleguide
104 lines • 4.31 kB
JavaScript
import { css, cx } from '@emotion/css';
import memoize from 'memoize-one';
import React, { PureComponent } from 'react';
import { Pagination } from '../Pagination';
import { Select } from '../Select';
import { TextField } from '../TextInput';
import cvar from '../theme/cvar';
import { FeatureFlags } from '../FeatureFlags';
export default class TablePagination extends PureComponent {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
goToPage: '',
}
});
Object.defineProperty(this, "onPageChange", {
enumerable: true,
configurable: true,
writable: true,
value: ({ selected }) => {
this.props.onPageChange(selected);
}
});
Object.defineProperty(this, "onPageSizeChange", {
enumerable: true,
configurable: true,
writable: true,
value: (e) => {
e && this.props.onPageSizeChange(Number(e.value));
}
});
Object.defineProperty(this, "onGoToPageChange", {
enumerable: true,
configurable: true,
writable: true,
value: (e) => {
this.setState({ goToPage: e.target.value });
}
});
Object.defineProperty(this, "onGoToPageSubmit", {
enumerable: true,
configurable: true,
writable: true,
value: e => {
if (e.key === 'Enter') {
const parsedPage = parseInt(this.state.goToPage, 10);
if (!Number.isNaN(parsedPage)) {
this.props.onPageChange(parsedPage - 1);
}
}
}
});
Object.defineProperty(this, "getPageSizeOptions", {
enumerable: true,
configurable: true,
writable: true,
value: memoize((pageSizeOptions) => pageSizeOptions.map(pageSize => ({ label: `${pageSize}`, value: `${pageSize}` })))
});
Object.defineProperty(this, "getSelectedPageSizeOption", {
enumerable: true,
configurable: true,
writable: true,
value: () => ({ label: `${this.props.pageSize}`, value: `${this.props.pageSize}` })
});
}
render() {
const { className, page, pages, pageSizeOptions, showPageJump, showPageSizeOptions, goToLabelText = 'Go To', perPageLabelText = 'Per Page', } = this.props;
const { goToPage } = this.state;
if (pages < 1) {
return null;
}
const pagesContainer = css `
display: flex;
align-items: center;
`;
const pageJump = css `
width: calc(${cvar('spacing-48')} * 2);
margin-bottom: 0px;
margin-right: ${cvar('spacing-12')};
`;
const rtPagination = css `
display: flex;
justify-content: space-between;
align-items: center;
.pagination {
margin: 0 0 ${cvar('spacing-16')} ${cvar('spacing-32')};
}
`;
const pageSizeSelectStyle = css `
width: calc(${cvar('spacing-48')} * 3);
`;
return (React.createElement(FeatureFlags, { flags: { v17_noOuterSpacing: true } },
React.createElement("div", { className: cx(className, rtPagination) },
showPageSizeOptions && (React.createElement(Select, { className: pageSizeSelectStyle, isClearable: false, label: perPageLabelText, options: this.getPageSizeOptions(pageSizeOptions), value: this.getSelectedPageSizeOption(), onChange: this.onPageSizeChange })),
pages > 1 && (React.createElement("div", { className: pagesContainer },
showPageJump && (React.createElement(TextField, { className: pageJump, label: goToLabelText, value: goToPage, onChange: this.onGoToPageChange, onKeyDown: this.onGoToPageSubmit })),
React.createElement(Pagination, { pageRangeDisplayed: 2, marginPagesDisplayed: 3, initialPage: page, forcePage: page, pageCount: pages, onPageChange: this.onPageChange }))))));
}
}
//# sourceMappingURL=TablePagination.js.map