@bitrise/bitkit 13.221.0 → 13.222.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
|
@@ -4,7 +4,7 @@ import Divider from '../Divider/Divider';
|
|
|
4
4
|
import Dropdown from '../Dropdown/Dropdown';
|
|
5
5
|
import { DropdownOption } from '../Dropdown/DropdownOption';
|
|
6
6
|
import IconButton from '../IconButton/IconButton';
|
|
7
|
-
import Text from '../Text/Text';
|
|
7
|
+
import Text, { TextProps } from '../Text/Text';
|
|
8
8
|
|
|
9
9
|
const defaultItemsPerPageOptions = [10, 20, 50];
|
|
10
10
|
|
|
@@ -15,6 +15,7 @@ export type PaginationProps = {
|
|
|
15
15
|
setPage: (newPage: number) => void;
|
|
16
16
|
itemsPerPageOptions?: number[];
|
|
17
17
|
setPerPage?: (newPerPage: number) => void;
|
|
18
|
+
variant: 'page' | 'table' | 'card';
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
const Pagination = ({
|
|
@@ -24,17 +25,27 @@ const Pagination = ({
|
|
|
24
25
|
setPage,
|
|
25
26
|
setPerPage,
|
|
26
27
|
totalCount,
|
|
28
|
+
variant = 'page',
|
|
27
29
|
}: PaginationProps) => {
|
|
28
30
|
const pageCount = totalCount && Math.ceil(totalCount / perPage);
|
|
29
31
|
const itemsStartIndex = (page - 1) * perPage + 1;
|
|
30
32
|
const itemsEndIndex = Math.min(page * perPage, totalCount);
|
|
31
33
|
|
|
34
|
+
let textColor: TextProps['color'] = 'text/body';
|
|
35
|
+
if (variant === 'table') {
|
|
36
|
+
textColor = 'text/secondary';
|
|
37
|
+
} else if (variant === 'card') {
|
|
38
|
+
textColor = 'text/tertiary';
|
|
39
|
+
}
|
|
40
|
+
|
|
32
41
|
return (
|
|
33
42
|
<Box alignItems="center" display="flex" gap="1rem">
|
|
34
43
|
{setPerPage && (
|
|
35
44
|
<>
|
|
36
45
|
<Box alignItems="center" display="flex" gap="0.5rem">
|
|
37
|
-
<Text textStyle="body/md/regular">
|
|
46
|
+
<Text color={textColor} textStyle="body/md/regular">
|
|
47
|
+
Items per page:
|
|
48
|
+
</Text>
|
|
38
49
|
<Dropdown
|
|
39
50
|
onChange={({ target }) => setPerPage(Number(target.value))}
|
|
40
51
|
search={false}
|
|
@@ -52,7 +63,7 @@ const Pagination = ({
|
|
|
52
63
|
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
53
64
|
</>
|
|
54
65
|
)}
|
|
55
|
-
<Text as="span" marginRight="auto" textStyle="body/md/regular">
|
|
66
|
+
<Text as="span" color={textColor} marginRight="auto" textStyle="body/md/regular">
|
|
56
67
|
{itemsStartIndex}-{itemsEndIndex} of {totalCount} items
|
|
57
68
|
</Text>
|
|
58
69
|
<Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
|
|
@@ -74,7 +85,7 @@ const Pagination = ({
|
|
|
74
85
|
);
|
|
75
86
|
})}
|
|
76
87
|
</Dropdown>
|
|
77
|
-
<Text as="span" textStyle="body/md/regular">
|
|
88
|
+
<Text as="span" color={textColor} textStyle="body/md/regular">
|
|
78
89
|
of {pageCount} pages
|
|
79
90
|
</Text>
|
|
80
91
|
</Box>
|
|
@@ -3,14 +3,14 @@ import Pagination, { PaginationProps } from '../Pagination/Pagination';
|
|
|
3
3
|
import Td from './Td';
|
|
4
4
|
import Tr from './Tr';
|
|
5
5
|
|
|
6
|
-
export type TablePaginationProps = PaginationProps & { colSpan: number };
|
|
6
|
+
export type TablePaginationProps = Omit<PaginationProps, 'variant'> & { colSpan: number };
|
|
7
7
|
|
|
8
8
|
const TablePagination = ({ colSpan, ...paginationProps }: TablePaginationProps): JSX.Element => {
|
|
9
9
|
return (
|
|
10
10
|
<Tfoot>
|
|
11
11
|
<Tr>
|
|
12
12
|
<Td colSpan={colSpan}>
|
|
13
|
-
<Pagination {...paginationProps} />
|
|
13
|
+
<Pagination {...paginationProps} variant="table" />
|
|
14
14
|
</Td>
|
|
15
15
|
</Tr>
|
|
16
16
|
</Tfoot>
|