Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { useState } from '@storybook/addons'; import { Story } from '@storybook/react'; import React from 'react'; import Paginator, { IPaginatorProps } from './Paginator'; export default { title: 'Navigation/Paginator', component: Paginator, parameters: { docs: { description: { component: Paginator.description, }, }, }, }; export const Basic: Story<IPaginatorProps> = (args) => { const [pageIndex, setPageIndex] = useState(0); const [pageSizeIndex, setPageSizeIndex] = useState(0); const onPageSelect = (pageIndex) => { setPageIndex(pageIndex); }; const onPageSizeSelect = (pageSizeIndex) => { setPageSizeIndex(pageSizeIndex); }; return ( <> <p>Page Index: {pageIndex}</p> <p>Page Size Index: {pageSizeIndex}</p> <Paginator {...args} selectedPageIndex={pageIndex} onPageSelect={onPageSelect} selectedPageSizeIndex={pageSizeIndex} onPageSizeSelect={onPageSizeSelect} /> </> ); }; Basic.args = { hasPageSizeSelector: true, totalCount: 500, isDisabled: false, }; export const PageSizeSelector: Story<IPaginatorProps> = (args) => ( <Paginator {...args} /> ); PageSizeSelector.args = { hasPageSizeSelector: true, totalCount: 500, }; export const Disabled: Story<IPaginatorProps> = (args) => ( <Paginator {...args} /> ); Disabled.args = { isDisabled: true, }; export const ObjectCounts: Story<IPaginatorProps> = (args) => ( <Paginator {...args} /> ); ObjectCounts.args = { hasPageSizeSelector: true, totalCount: 100, showTotalObjects: true, objectLabel: 'Object', objectLabelPlural: 'Objects', }; |