lucid-ui
Version:
A UI component library from AppNexus.
43 lines (42 loc) • 2.6 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Paginator } from '../../../index';
export default createClass({
render() {
return (React.createElement("div", null,
React.createElement("p", null, "A paginator displaying a total count of objects."),
React.createElement("section", null,
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: true, totalCount: 12321313, SingleSelect: {
DropMenu: { direction: 'up' },
} }),
React.createElement("p", null,
"Total count is hidden if ",
React.createElement("code", null, "totalCount"),
" is not a valid number"),
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: true, SingleSelect: {
DropMenu: { direction: 'up' },
} })),
React.createElement("section", null,
React.createElement("p", null,
"The label can be changed using ",
React.createElement("code", null, "objectLabel"),
" and",
' ',
React.createElement("code", null, "objectLabelPlural")),
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: true, totalCount: 1, objectLabel: 'singular object' }),
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: true, totalCount: 2, objectLabelPlural: 'is more than one' }),
React.createElement("p", null,
React.createElement("code", null, "objectLabelPlural"),
" will default to appending an \"s\" after ",
React.createElement("code", null, "objectLabel"),
"."),
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: true, totalCount: 20, objectLabel: 'dog' })),
React.createElement("section", null,
React.createElement("p", null,
"Pass a custom formatter function as",
' ',
React.createElement("code", null, "showTotalObjects(count)"),
" to format the total count number."),
React.createElement(Paginator, { hasPageSizeSelector: true, showTotalObjects: (count) => `--${count}--`, totalCount: 20, objectLabel: 'object', objectLabelPlural: 'objects' }))));
},
});