@bitrise/bitkit 12.48.1 → 12.50.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Icons/16x16/Branch.tsx +1 -1
  3. package/src/Components/Icons/24x24/Branch.tsx +2 -2
  4. package/src/Components/Table/TablePagination.tsx +101 -0
  5. package/src/index.ts +3 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "12.48.1",
4
+ "version": "12.50.0",
5
5
  "repository": "git@github.com:bitrise-io/bitkit.git",
6
6
  "main": "src/index.ts",
7
7
  "license": "UNLICENSED",
package/src/Components/Icons/16x16/Branch.tsx CHANGED
@@ -5,8 +5,8 @@ const Branch = forwardRef<IconProps, 'svg'>((props, ref) => (
5
5
  <path
6
6
  fill="currentColor"
7
7
  fillRule="evenodd"
8
- d="M11.333 5.333C11.333 4.6 10.733 4 10 4s-1.333.6-1.333 1.333c0 .467.266.934.666 1.134v.266c0 1-.466 1.934-1.266 2.6l-1.4 1.134V3.8c.4-.2.666-.667.666-1.133 0-.734-.6-1.334-1.333-1.334s-1.333.6-1.333 1.334c0 .466.266.933.666 1.133v8.4c-.4.2-.666.667-.666 1.133 0 .734.6 1.334 1.333 1.334s1.333-.6 1.333-1.334c0-.466-.266-.933-.666-1.133l2.266-1.8c1.067-.933 1.734-2.267 1.734-3.667v-.266c.4-.2.666-.667.666-1.134Z"
9
8
  clipRule="evenodd"
9
+ d="M5.75 3.25C5.75 3.66421 5.41421 4 5 4C4.58579 4 4.25 3.66421 4.25 3.25C4.25 2.83579 4.58579 2.5 5 2.5C5.41421 2.5 5.75 2.83579 5.75 3.25ZM5.75 5.37197C6.62389 5.06309 7.25 4.22966 7.25 3.25C7.25 2.00736 6.24264 1 5 1C3.75736 1 2.75 2.00736 2.75 3.25C2.75 4.22966 3.37611 5.06309 4.25 5.37197V10.5V10.628C3.37611 10.9369 2.75 11.7703 2.75 12.75C2.75 13.9926 3.75736 15 5 15C6.24264 15 7.25 13.9926 7.25 12.75C7.25 11.7703 6.62389 10.9369 5.75 10.628V10.5C5.75 9.80964 6.30964 9.25 7 9.25H9.5C11.0188 9.25 12.25 8.01878 12.25 6.5V5.37197C13.1239 5.06309 13.75 4.22966 13.75 3.25C13.75 2.00736 12.7426 1 11.5 1C10.2574 1 9.25 2.00736 9.25 3.25C9.25 4.22966 9.87611 5.06309 10.75 5.37197V6.5C10.75 7.19036 10.1904 7.75 9.5 7.75H7C6.54989 7.75 6.12503 7.85814 5.75 8.04985V5.37197ZM5 13.5C5.41421 13.5 5.75 13.1642 5.75 12.75C5.75 12.3358 5.41421 12 5 12C4.58579 12 4.25 12.3358 4.25 12.75C4.25 13.1642 4.58579 13.5 5 13.5ZM11.5 4C11.9142 4 12.25 3.66421 12.25 3.25C12.25 2.83579 11.9142 2.5 11.5 2.5C11.0858 2.5 10.75 2.83579 10.75 3.25C10.75 3.66421 11.0858 4 11.5 4Z"
10
10
  />
11
11
  </Icon>
12
12
  ));
package/src/Components/Icons/24x24/Branch.tsx CHANGED
@@ -3,10 +3,10 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
3
3
  const Branch = forwardRef<IconProps, 'svg'>((props, ref) => (
4
4
  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
5
5
  <path
6
+ fill="currentColor"
6
7
  fillRule="evenodd"
7
8
  clipRule="evenodd"
8
- d="M17 8c0-1.1-.9-2-2-2s-2 .9-2 2c0 .7.4 1.4 1 1.7v.4c0 1.5-.7 2.9-1.9 3.9L10 15.7v-10c.6-.3 1-1 1-1.7 0-1.1-.9-2-2-2s-2 .9-2 2c0 .7.4 1.4 1 1.7v12.6c-.6.3-1 1-1 1.7 0 1.1.9 2 2 2s2-.9 2-2c0-.7-.4-1.4-1-1.7l3.4-2.7c1.6-1.4 2.6-3.4 2.6-5.5v-.4c.6-.3 1-1 1-1.7Z"
9
- fill="currentColor"
9
+ d="M11 5C11 6.30622 10.1652 7.41746 9 7.82929V12.0351C9.58835 11.6948 10.2714 11.5 11 11.5H14C15.1046 11.5 16 10.6046 16 9.5V7.82929C14.8348 7.41746 14 6.30622 14 5C14 3.34315 15.3431 2 17 2C18.6569 2 20 3.34315 20 5C20 6.30622 19.1652 7.41746 18 7.82929V9.5C18 11.7091 16.2091 13.5 14 13.5H11C9.89543 13.5 9 14.3954 9 15.5V16.1707C10.1652 16.5825 11 17.6938 11 19C11 20.6569 9.65685 22 8 22C6.34315 22 5 20.6569 5 19C5 17.6938 5.83481 16.5825 7 16.1707V7.82929C5.83481 7.41746 5 6.30622 5 5C5 3.34315 6.34315 2 8 2C9.65685 2 11 3.34315 11 5ZM8 6C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5C7 5.55228 7.44772 6 8 6ZM9 19C9 19.5523 8.55228 20 8 20C7.44772 20 7 19.5523 7 19C7 18.4477 7.44772 18 8 18C8.55228 18 9 18.4477 9 19ZM18 5C18 5.55228 17.5523 6 17 6C16.4477 6 16 5.55228 16 5C16 4.44772 16.4477 4 17 4C17.5523 4 18 4.44772 18 5Z"
10
10
  />
11
11
  </Icon>
12
12
  ));
package/src/Components/Table/TablePagination.tsx ADDED
@@ -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';