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',
};
|