All files / Paginator Paginator.stories.tsx

66.66% Statements 12/18
100% Branches 0/0
66.66% Functions 4/6
66.66% Lines 12/18

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