@bitrise/bitkit 12.48.1 → 12.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Components/Table/TablePagination.tsx +101 -0
- package/src/index.ts +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import Box from '../Box/Box';
|
|
2
|
+
import ButtonGroup from '../ButtonGroup/ButtonGroup';
|
|
3
|
+
import Divider from '../Divider/Divider';
|
|
4
|
+
import Dropdown from '../Dropdown/Dropdown';
|
|
5
|
+
import { DropdownOption } from '../Dropdown/DropdownOption';
|
|
6
|
+
import IconButton from '../IconButton/IconButton';
|
|
7
|
+
import Text from '../Text/Text';
|
|
8
|
+
import Td from './Td';
|
|
9
|
+
import Tr from './Tr';
|
|
10
|
+
|
|
11
|
+
const defaultItemsPerPageOptions = [10, 20, 50];
|
|
12
|
+
|
|
13
|
+
export type TablePaginationProps = {
|
|
14
|
+
page: number;
|
|
15
|
+
perPage: number;
|
|
16
|
+
totalCount: number;
|
|
17
|
+
setPage: (newPage: number) => void;
|
|
18
|
+
setPerPage: (newPerPage: number) => void;
|
|
19
|
+
colSpan: number;
|
|
20
|
+
itemsPerPageOptions: number[];
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const TablePagination = ({
|
|
24
|
+
page,
|
|
25
|
+
perPage,
|
|
26
|
+
totalCount,
|
|
27
|
+
setPage,
|
|
28
|
+
setPerPage,
|
|
29
|
+
colSpan,
|
|
30
|
+
itemsPerPageOptions = defaultItemsPerPageOptions,
|
|
31
|
+
}: TablePaginationProps): JSX.Element => {
|
|
32
|
+
const pageCount = totalCount && Math.ceil(totalCount / perPage);
|
|
33
|
+
const itemsStartIndex = (page - 1) * perPage + 1;
|
|
34
|
+
const itemsEndIndex = Math.min(page * perPage, totalCount);
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<Tr>
|
|
38
|
+
<Td colSpan={colSpan}>
|
|
39
|
+
<Box display="flex" gap="1rem" alignItems="center">
|
|
40
|
+
<Box display="flex" gap="0.5rem" alignItems="center">
|
|
41
|
+
<Text>Items per page:</Text>
|
|
42
|
+
<Dropdown
|
|
43
|
+
onChange={({ target }) => setPerPage(Number(target.value))}
|
|
44
|
+
value={perPage.toString()}
|
|
45
|
+
search={false}
|
|
46
|
+
width="auto"
|
|
47
|
+
>
|
|
48
|
+
{itemsPerPageOptions.map((perPageOption) => (
|
|
49
|
+
<DropdownOption key={perPageOption} value={perPageOption.toString()}>
|
|
50
|
+
{perPageOption}
|
|
51
|
+
</DropdownOption>
|
|
52
|
+
))}
|
|
53
|
+
</Dropdown>
|
|
54
|
+
</Box>
|
|
55
|
+
<Divider orientation="vertical" height="3rem" color="neutral.90" />
|
|
56
|
+
<Text marginRight="auto">
|
|
57
|
+
{itemsStartIndex}-{itemsEndIndex} of {totalCount} items
|
|
58
|
+
</Text>
|
|
59
|
+
<Divider orientation="vertical" height="3rem" color="neutral.90" />
|
|
60
|
+
<Box display="flex" gap="0.5rem" alignItems="center">
|
|
61
|
+
<Dropdown
|
|
62
|
+
onChange={({ target }) => setPage(Number(target.value))}
|
|
63
|
+
value={page.toString()}
|
|
64
|
+
search={false}
|
|
65
|
+
width="auto"
|
|
66
|
+
>
|
|
67
|
+
{[...Array(pageCount)].map((_, index) => {
|
|
68
|
+
const pageOption = index + 1;
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<DropdownOption key={pageOption} value={pageOption.toString()}>
|
|
72
|
+
{pageOption}
|
|
73
|
+
</DropdownOption>
|
|
74
|
+
);
|
|
75
|
+
})}
|
|
76
|
+
</Dropdown>
|
|
77
|
+
<Text>of {pageCount} pages</Text>
|
|
78
|
+
</Box>
|
|
79
|
+
<ButtonGroup>
|
|
80
|
+
<IconButton
|
|
81
|
+
iconName="ChevronLeft"
|
|
82
|
+
variant="secondary"
|
|
83
|
+
onClick={() => setPage(page - 1)}
|
|
84
|
+
aria-label="Previous page"
|
|
85
|
+
isDisabled={page === 1}
|
|
86
|
+
/>
|
|
87
|
+
<IconButton
|
|
88
|
+
iconName="ChevronRight"
|
|
89
|
+
variant="secondary"
|
|
90
|
+
onClick={() => setPage(page + 1)}
|
|
91
|
+
aria-label="Next page"
|
|
92
|
+
isDisabled={page === pageCount}
|
|
93
|
+
/>
|
|
94
|
+
</ButtonGroup>
|
|
95
|
+
</Box>
|
|
96
|
+
</Td>
|
|
97
|
+
</Tr>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export default TablePagination;
|
package/src/index.ts
CHANGED
|
@@ -314,3 +314,6 @@ export type { FilterSwitchProps } from './Components/Form/FilterSwitch/FilterSwi
|
|
|
314
314
|
export { default as FilterSwitch } from './Components/Form/FilterSwitch/FilterSwitch';
|
|
315
315
|
|
|
316
316
|
export { default as FilterSwitchGroup } from './Components/Form/FilterSwitch/FilterSwitchGroup';
|
|
317
|
+
|
|
318
|
+
export type { TablePaginationProps } from './Components/Table/TablePagination';
|
|
319
|
+
export { default as TablePagination } from './Components/Table/TablePagination';
|