@cimpress/react-components/dist/esm/docs/components/pagination/pagination.js

React components to support the MCP styleguide

import React, { Component } from 'react';
import { Pagination } from '@cimpress/react-components';
export default class PaginationDemo extends Component {
    constructor(props) {
        super(props);
        Object.defineProperty(this, "onPageChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: ({ selected }) => {
                this.setState({ page: selected + 1 });
            }
        });
        Object.defineProperty(this, "onMarginValueChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: event => {
                this.setState({ marginValue: Number(event.target.value) });
            }
        });
        Object.defineProperty(this, "onMiddleValueChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: event => {
                this.setState({ middleValue: Number(event.target.value) });
            }
        });
        Object.defineProperty(this, "onPageCountChange", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: event => {
                this.setState({ pageCount: Number(event.target.value) });
            }
        });
        this.state = {
            page: 1,
            marginValue: 1,
            middleValue: 3,
            pageCount: 50,
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("h5", null, " Play with input props "),
            React.createElement("div", { style: { marginLeft: '10px' } },
                "pageCount:",
                React.createElement("input", { style: { width: '50px', margin: '5px', padding: '2px' }, type: "number", name: "marginValue", value: this.state.pageCount, onChange: this.onPageCountChange }),
                React.createElement("br", null),
                "pagesOutsideElipses:",
                React.createElement("input", { style: { width: '50px', margin: '5px', padding: '2px' }, type: "number", name: "marginValue", value: this.state.marginValue, onChange: this.onMarginValueChange }),
                React.createElement("br", null),
                "pagesBetweenElipses:",
                React.createElement("input", { style: { width: '50px', margin: '5px', padding: '2px' }, type: "number", name: "middleValue", value: this.state.middleValue, onChange: this.onMiddleValueChange })),
            React.createElement("h4", null,
                ' ',
                React.createElement("strong", null, "Current Page"),
                ": ",
                this.state.page,
                ' '),
            React.createElement(Pagination, { initialPage: 0, pageCount: this.state.pageCount, onPageChange: this.onPageChange, pagesOutsideElipses: this.state.marginValue, pagesBetweenElipses: this.state.middleValue })));
    }
}
//# sourceMappingURL=pagination.js.map