@cimpress/react-components
Version:
React components to support the MCP styleguide
133 lines • 5.9 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const css_1 = require("@emotion/css");
const memoize_one_1 = __importDefault(require("memoize-one"));
const react_1 = __importStar(require("react"));
const Pagination_1 = require("../Pagination");
const Select_1 = require("../Select");
const TextInput_1 = require("../TextInput");
const cvar_1 = __importDefault(require("../theme/cvar"));
const FeatureFlags_1 = require("../FeatureFlags");
class TablePagination extends react_1.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: (0, memoize_one_1.default)((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 = (0, css_1.css) `
display: flex;
align-items: center;
`;
const pageJump = (0, css_1.css) `
width: calc(${(0, cvar_1.default)('spacing-48')} * 2);
margin-bottom: 0px;
margin-right: ${(0, cvar_1.default)('spacing-12')};
`;
const rtPagination = (0, css_1.css) `
display: flex;
justify-content: space-between;
align-items: center;
.pagination {
margin: 0 0 ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-32')};
}
`;
const pageSizeSelectStyle = (0, css_1.css) `
width: calc(${(0, cvar_1.default)('spacing-48')} * 3);
`;
return (react_1.default.createElement(FeatureFlags_1.FeatureFlags, { flags: { v17_noOuterSpacing: true } },
react_1.default.createElement("div", { className: (0, css_1.cx)(className, rtPagination) },
showPageSizeOptions && (react_1.default.createElement(Select_1.Select, { className: pageSizeSelectStyle, isClearable: false, label: perPageLabelText, options: this.getPageSizeOptions(pageSizeOptions), value: this.getSelectedPageSizeOption(), onChange: this.onPageSizeChange })),
pages > 1 && (react_1.default.createElement("div", { className: pagesContainer },
showPageJump && (react_1.default.createElement(TextInput_1.TextField, { className: pageJump, label: goToLabelText, value: goToPage, onChange: this.onGoToPageChange, onKeyDown: this.onGoToPageSubmit })),
react_1.default.createElement(Pagination_1.Pagination, { pageRangeDisplayed: 2, marginPagesDisplayed: 3, initialPage: page, forcePage: page, pageCount: pages, onPageChange: this.onPageChange }))))));
}
}
exports.default = TablePagination;
//# sourceMappingURL=TablePagination.js.map