@cimpress/react-components
Version:
React components to support the MCP styleguide
72 lines • 3.16 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import PaginationCode from '!raw-loader!./pagination.jsx';
import PaginationDemo from './pagination.jsx';
import ComponentDoc from '../../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.createElement("div", null,
React.createElement("p", null, "Callback function that is triggered when a new page number is selected. "),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function({ selected: number }) ",
'=>',
" void"),
' '),
React.createElement("p", null,
React.createElement("code", null, "selected:"),
" The 0-based page number that was selected. If page ",
React.createElement("code", null, "1"),
" is selected, this value will be ",
React.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.createElement("p", null,
"The number of pages displayed to the left and right of the ",
React.createElement("code", null, "..."),
" boxes.",
' ')),
},
{
name: 'pagesBetweenElipses',
type: 'number',
default: '3',
description: (React.createElement("p", null,
"The number of pages displayed between the ",
React.createElement("code", null, "..."),
" boxes. Only updates on odd number inputs. (i.e. 6 will show 7 boxes)")),
},
];
return (React.createElement("div", null,
React.createElement(ComponentDoc, { name: "Pagination", propInfos: propInfos, remarks: React.createElement("p", null,
"All other props not enumerated here will be passed to the underlying pagination component -- see the",
' ',
React.createElement("a", { href: "https://github.com/AdeleD/react-paginate", target: "_blank", rel: "noopener noreferrer" }, "react-paginate docs"),
' ',
"to see more options.") },
React.createElement(PaginationDemo, null),
React.createElement(CodeExample, { code: PaginationCode }))));
};
export default PaginationDocs;
//# sourceMappingURL=index.js.map