@bitrise/bitkit 13.130.0 → 13.132.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
CHANGED
|
@@ -0,0 +1,99 @@
|
|
|
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
|
+
|
|
9
|
+
const defaultItemsPerPageOptions = [10, 20, 50];
|
|
10
|
+
|
|
11
|
+
export type PaginationProps = {
|
|
12
|
+
page: number;
|
|
13
|
+
perPage: number;
|
|
14
|
+
totalCount: number;
|
|
15
|
+
setPage: (newPage: number) => void;
|
|
16
|
+
setPerPage: (newPerPage: number) => void;
|
|
17
|
+
itemsPerPageOptions?: number[];
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const Pagination = ({
|
|
21
|
+
itemsPerPageOptions = defaultItemsPerPageOptions,
|
|
22
|
+
page,
|
|
23
|
+
perPage,
|
|
24
|
+
setPage,
|
|
25
|
+
setPerPage,
|
|
26
|
+
totalCount,
|
|
27
|
+
}: PaginationProps) => {
|
|
28
|
+
const pageCount = totalCount && Math.ceil(totalCount / perPage);
|
|
29
|
+
const itemsStartIndex = (page - 1) * perPage + 1;
|
|
30
|
+
const itemsEndIndex = Math.min(page * perPage, totalCount);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Box alignItems="center" display="flex" gap="1rem">
|
|
34
|
+
<Box alignItems="center" display="flex" gap="0.5rem">
|
|
35
|
+
<Text textStyle="body/md/regular">Items per page:</Text>
|
|
36
|
+
<Dropdown
|
|
37
|
+
onChange={({ target }) => setPerPage(Number(target.value))}
|
|
38
|
+
search={false}
|
|
39
|
+
size="md"
|
|
40
|
+
value={perPage.toString()}
|
|
41
|
+
width="auto"
|
|
42
|
+
>
|
|
43
|
+
{itemsPerPageOptions.map((perPageOption) => (
|
|
44
|
+
<DropdownOption key={perPageOption} value={perPageOption.toString()}>
|
|
45
|
+
{perPageOption}
|
|
46
|
+
</DropdownOption>
|
|
47
|
+
))}
|
|
48
|
+
</Dropdown>
|
|
49
|
+
</Box>
|
|
50
|
+
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
51
|
+
<Text as="span" marginRight="auto" textStyle="body/md/regular">
|
|
52
|
+
{itemsStartIndex}-{itemsEndIndex} of {totalCount} items
|
|
53
|
+
</Text>
|
|
54
|
+
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
55
|
+
<Box alignItems="center" display="flex" gap="0.5rem">
|
|
56
|
+
<Dropdown
|
|
57
|
+
onChange={({ target }) => setPage(Number(target.value))}
|
|
58
|
+
search={false}
|
|
59
|
+
size="md"
|
|
60
|
+
value={page.toString()}
|
|
61
|
+
width="auto"
|
|
62
|
+
>
|
|
63
|
+
{[...Array(pageCount)].map((_, index) => {
|
|
64
|
+
const pageOption = index + 1;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<DropdownOption key={pageOption} value={pageOption.toString()}>
|
|
68
|
+
{pageOption}
|
|
69
|
+
</DropdownOption>
|
|
70
|
+
);
|
|
71
|
+
})}
|
|
72
|
+
</Dropdown>
|
|
73
|
+
<Text as="span" textStyle="body/md/regular">
|
|
74
|
+
of {pageCount} pages
|
|
75
|
+
</Text>
|
|
76
|
+
</Box>
|
|
77
|
+
<ButtonGroup>
|
|
78
|
+
<IconButton
|
|
79
|
+
aria-label="Previous page"
|
|
80
|
+
iconName="ChevronLeft"
|
|
81
|
+
isDisabled={page === 1}
|
|
82
|
+
onClick={() => setPage(page - 1)}
|
|
83
|
+
size="md"
|
|
84
|
+
variant="secondary"
|
|
85
|
+
/>
|
|
86
|
+
<IconButton
|
|
87
|
+
aria-label="Next page"
|
|
88
|
+
iconName="ChevronRight"
|
|
89
|
+
isDisabled={page === pageCount}
|
|
90
|
+
onClick={() => setPage(page + 1)}
|
|
91
|
+
size="md"
|
|
92
|
+
variant="secondary"
|
|
93
|
+
/>
|
|
94
|
+
</ButtonGroup>
|
|
95
|
+
</Box>
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export default Pagination;
|
|
@@ -1,106 +1,16 @@
|
|
|
1
1
|
import { Tfoot } from '@chakra-ui/react';
|
|
2
|
-
import
|
|
3
|
-
import ButtonGroup from '../ButtonGroup/ButtonGroup';
|
|
4
|
-
import Divider from '../Divider/Divider';
|
|
5
|
-
import Dropdown from '../Dropdown/Dropdown';
|
|
6
|
-
import { DropdownOption } from '../Dropdown/DropdownOption';
|
|
7
|
-
import IconButton from '../IconButton/IconButton';
|
|
8
|
-
import Text from '../Text/Text';
|
|
2
|
+
import Pagination, { PaginationProps } from '../Pagination/Pagination';
|
|
9
3
|
import Td from './Td';
|
|
10
4
|
import Tr from './Tr';
|
|
11
5
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export type TablePaginationProps = {
|
|
15
|
-
page: number;
|
|
16
|
-
perPage: number;
|
|
17
|
-
totalCount: number;
|
|
18
|
-
setPage: (newPage: number) => void;
|
|
19
|
-
setPerPage: (newPerPage: number) => void;
|
|
20
|
-
colSpan: number;
|
|
21
|
-
itemsPerPageOptions: number[];
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const TablePagination = ({
|
|
25
|
-
colSpan,
|
|
26
|
-
itemsPerPageOptions = defaultItemsPerPageOptions,
|
|
27
|
-
page,
|
|
28
|
-
perPage,
|
|
29
|
-
setPage,
|
|
30
|
-
setPerPage,
|
|
31
|
-
totalCount,
|
|
32
|
-
}: TablePaginationProps): JSX.Element => {
|
|
33
|
-
const pageCount = totalCount && Math.ceil(totalCount / perPage);
|
|
34
|
-
const itemsStartIndex = (page - 1) * perPage + 1;
|
|
35
|
-
const itemsEndIndex = Math.min(page * perPage, totalCount);
|
|
6
|
+
export type TablePaginationProps = PaginationProps & { colSpan: number };
|
|
36
7
|
|
|
8
|
+
const TablePagination = ({ colSpan, ...paginationProps }: TablePaginationProps): JSX.Element => {
|
|
37
9
|
return (
|
|
38
10
|
<Tfoot>
|
|
39
11
|
<Tr>
|
|
40
12
|
<Td colSpan={colSpan}>
|
|
41
|
-
<
|
|
42
|
-
<Box alignItems="center" display="flex" gap="0.5rem">
|
|
43
|
-
<Text textStyle="body/md/regular">Items per page:</Text>
|
|
44
|
-
<Dropdown
|
|
45
|
-
onChange={({ target }) => setPerPage(Number(target.value))}
|
|
46
|
-
search={false}
|
|
47
|
-
size="md"
|
|
48
|
-
value={perPage.toString()}
|
|
49
|
-
width="auto"
|
|
50
|
-
>
|
|
51
|
-
{itemsPerPageOptions.map((perPageOption) => (
|
|
52
|
-
<DropdownOption key={perPageOption} value={perPageOption.toString()}>
|
|
53
|
-
{perPageOption}
|
|
54
|
-
</DropdownOption>
|
|
55
|
-
))}
|
|
56
|
-
</Dropdown>
|
|
57
|
-
</Box>
|
|
58
|
-
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
59
|
-
<Text as="span" marginRight="auto" textStyle="body/md/regular">
|
|
60
|
-
{itemsStartIndex}-{itemsEndIndex} of {totalCount} items
|
|
61
|
-
</Text>
|
|
62
|
-
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
63
|
-
<Box alignItems="center" display="flex" gap="0.5rem">
|
|
64
|
-
<Dropdown
|
|
65
|
-
onChange={({ target }) => setPage(Number(target.value))}
|
|
66
|
-
search={false}
|
|
67
|
-
size="md"
|
|
68
|
-
value={page.toString()}
|
|
69
|
-
width="auto"
|
|
70
|
-
>
|
|
71
|
-
{[...Array(pageCount)].map((_, index) => {
|
|
72
|
-
const pageOption = index + 1;
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<DropdownOption key={pageOption} value={pageOption.toString()}>
|
|
76
|
-
{pageOption}
|
|
77
|
-
</DropdownOption>
|
|
78
|
-
);
|
|
79
|
-
})}
|
|
80
|
-
</Dropdown>
|
|
81
|
-
<Text as="span" textStyle="body/md/regular">
|
|
82
|
-
of {pageCount} pages
|
|
83
|
-
</Text>
|
|
84
|
-
</Box>
|
|
85
|
-
<ButtonGroup>
|
|
86
|
-
<IconButton
|
|
87
|
-
aria-label="Previous page"
|
|
88
|
-
iconName="ChevronLeft"
|
|
89
|
-
isDisabled={page === 1}
|
|
90
|
-
onClick={() => setPage(page - 1)}
|
|
91
|
-
size="md"
|
|
92
|
-
variant="secondary"
|
|
93
|
-
/>
|
|
94
|
-
<IconButton
|
|
95
|
-
aria-label="Next page"
|
|
96
|
-
iconName="ChevronRight"
|
|
97
|
-
isDisabled={page === pageCount}
|
|
98
|
-
onClick={() => setPage(page + 1)}
|
|
99
|
-
size="md"
|
|
100
|
-
variant="secondary"
|
|
101
|
-
/>
|
|
102
|
-
</ButtonGroup>
|
|
103
|
-
</Box>
|
|
13
|
+
<Pagination {...paginationProps} />
|
|
104
14
|
</Td>
|
|
105
15
|
</Tr>
|
|
106
16
|
</Tfoot>
|
package/src/index.ts
CHANGED
|
@@ -321,6 +321,9 @@ export { default as FilterSwitchGroup } from './Components/Filter/FilterSwitch/F
|
|
|
321
321
|
export type { TablePaginationProps } from './Components/Table/TablePagination';
|
|
322
322
|
export { default as TablePagination } from './Components/Table/TablePagination';
|
|
323
323
|
|
|
324
|
+
export type { PaginationProps } from './Components/Pagination/Pagination';
|
|
325
|
+
export { default as Pagination } from './Components/Pagination/Pagination';
|
|
326
|
+
|
|
324
327
|
export type { ProgressIndicatorProps } from './Components/ProgressIndicator/ProgressIndicator';
|
|
325
328
|
export { default as ProgressIndicator } from './Components/ProgressIndicator/ProgressIndicator';
|
|
326
329
|
|