@cimpress/react-components
Version:
React components to support the MCP styleguide
77 lines • 3.72 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const pagination_jsx_1 = __importDefault(require("!raw-loader!./pagination.jsx"));
const pagination_jsx_2 = __importDefault(require("./pagination.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const PaginationDocs = () => {
const propInfos = [
{
name: 'pageCount',
type: 'number (required)',
default: '',
description: 'Defines the total number of pages available.',
},
{
name: 'onPageChange',
type: 'function (required)',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is triggered when a new page number is selected. "),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function({ selected: number }) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "selected:"),
" The 0-based page number that was selected. If page ",
react_1.default.createElement("code", null, "1"),
" is selected, this value will be ",
react_1.default.createElement("code", null, "0"),
"."))),
},
{
name: 'initialPage',
type: 'number',
default: '0',
description: 'The initial page that is selected in the component.',
},
{
name: 'pagesOutsideElipses',
type: 'number',
default: '1',
description: (react_1.default.createElement("p", null,
"The number of pages displayed to the left and right of the ",
react_1.default.createElement("code", null, "..."),
" boxes.",
' ')),
},
{
name: 'pagesBetweenElipses',
type: 'number',
default: '3',
description: (react_1.default.createElement("p", null,
"The number of pages displayed between the ",
react_1.default.createElement("code", null, "..."),
" boxes. Only updates on odd number inputs. (i.e. 6 will show 7 boxes)")),
},
];
return (react_1.default.createElement("div", null,
react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Pagination", propInfos: propInfos, remarks: react_1.default.createElement("p", null,
"All other props not enumerated here will be passed to the underlying pagination component -- see the",
' ',
react_1.default.createElement("a", { href: "https://github.com/AdeleD/react-paginate", target: "_blank", rel: "noopener noreferrer" }, "react-paginate docs"),
' ',
"to see more options.") },
react_1.default.createElement(pagination_jsx_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: pagination_jsx_1.default }))));
};
exports.default = PaginationDocs;
//# sourceMappingURL=index.js.map