algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 13:13:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui][pagination] implementation

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-07 10:01:34 +08:00
parent e0a3f4c15c
commit 641a565e5c
3 changed files with 379 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
apps/storybook/stories/pagination.stories.tsx Normal file
View File

@ -0,0 +1,234 @@
import React, { useState } from 'react';
import type { ComponentMeta } from '@storybook/react';
import { Pagination } from '@tih/ui';
export default {
argTypes: {},
component: Pagination,
title: 'Pagination',
} as ComponentMeta<typeof Pagination>;
// eslint-disable-next-line @typescript-eslint/no-empty-function
function emptyFunction() {}
export function Basic({
current,
end,
start,
pagePadding,
}: Pick<
React.ComponentProps<typeof Pagination>,
'current' | 'end' | 'pagePadding' | 'start'
>) {
return (
<div className="space-y-4">
<Pagination
current={current}
end={end}
label="Pagination"
pagePadding={pagePadding}
start={start}
onSelect={emptyFunction}
/>
</div>
);
}
Basic.args = {
current: 3,
end: 10,
pagePadding: 1,
start: 1,
};
export function Interaction() {
const [currentPage, setCurrentPage] = useState(5);
return (
<div className="space-y-4">
<div>
<Pagination
current={currentPage}
end={10}
label="Pagination"
start={1}
onSelect={(page) => setCurrentPage(page)}
/>
</div>
</div>
);
}
export function PageRanges() {
return (
<div className="space-y-4">
<div>
<Pagination
current={5}
end={10}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={10}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={2}
end={10}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={9}
end={10}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={10}
end={10}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={1}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={1}
label="Pagination"
pagePadding={2}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={2}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={2}
end={2}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={3}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={2}
end={3}
label="Pagination"
start={1}
onSelect={emptyFunction}
/>
</div>
</div>
);
}
export function PagePadding() {
return (
<div className="space-y-4">
<div>
<Pagination
current={5}
end={10}
label="Pagination"
pagePadding={2}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={5}
end={20}
label="Pagination"
pagePadding={2}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={10}
end={20}
label="Pagination"
pagePadding={2}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={10}
end={20}
label="Pagination"
pagePadding={3}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={5}
end={10}
label="Pagination"
pagePadding={3}
start={1}
onSelect={emptyFunction}
/>
</div>
<div>
<Pagination
current={1}
end={1}
label="Pagination"
pagePadding={2}
start={1}
onSelect={emptyFunction}
/>
</div>
</div>
);
}