@bitrise/bitkit 9.31.0 → 9.32.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
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
1
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
3
|
import { sortObjectByKey } from '../../utils/storyUtils';
|
|
3
4
|
import Select from './Select';
|
|
@@ -36,3 +37,40 @@ WithProps.args = sortObjectByKey({
|
|
|
36
37
|
...args,
|
|
37
38
|
placeholder: 'Select build status',
|
|
38
39
|
});
|
|
40
|
+
|
|
41
|
+
export const Controlled = () => {
|
|
42
|
+
const [value, setValue] = useState<string | undefined>(undefined);
|
|
43
|
+
return (
|
|
44
|
+
<Select w="300px" placeholder="Test holder" value={value} onChange={({ target: { value: val } }) => setValue(val)}>
|
|
45
|
+
{children}
|
|
46
|
+
</Select>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export const WithLoading = () => (
|
|
51
|
+
<>
|
|
52
|
+
<Select w="300px" isDisabled placeholder="Test holder">
|
|
53
|
+
{children}
|
|
54
|
+
</Select>
|
|
55
|
+
<Select w="300px" isLoading>
|
|
56
|
+
{children}
|
|
57
|
+
</Select>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
export const WithLoadingOnChange = () => {
|
|
62
|
+
const [loading, setLoading] = useState(false);
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<Select
|
|
66
|
+
w="240px"
|
|
67
|
+
isLoading={loading}
|
|
68
|
+
onChange={() => {
|
|
69
|
+
setLoading(true);
|
|
70
|
+
setTimeout(() => setLoading(false), 3000);
|
|
71
|
+
}}
|
|
72
|
+
>
|
|
73
|
+
{children}
|
|
74
|
+
</Select>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
@@ -1,30 +1,43 @@
|
|
|
1
|
-
import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
|
|
1
|
+
import { forwardRef, Select as ChakraSelect, SelectProps as ChakraSelectProps, Spinner } from '@chakra-ui/react';
|
|
2
2
|
import Icon from '../Icon/Icon';
|
|
3
3
|
|
|
4
4
|
export interface SelectProps extends ChakraSelectProps {
|
|
5
5
|
size?: 'small' | 'medium';
|
|
6
|
+
isLoading?: boolean;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
const Select = (props
|
|
9
|
-
const { size, placeholder, children, ...rest } = props;
|
|
9
|
+
const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
|
|
10
|
+
const { size, placeholder, children, isDisabled, isLoading, ...rest } = props;
|
|
10
11
|
const iconSize = size === 'medium' ? '24' : '16';
|
|
11
12
|
const properties: ChakraSelectProps = {
|
|
12
|
-
icon:
|
|
13
|
+
icon: isLoading ? (
|
|
14
|
+
<Spinner width={iconSize} height={iconSize} marginEnd="4" />
|
|
15
|
+
) : (
|
|
16
|
+
<Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
|
|
17
|
+
),
|
|
18
|
+
isDisabled: isLoading || isDisabled,
|
|
13
19
|
size,
|
|
14
20
|
variant: 'select',
|
|
15
21
|
...rest,
|
|
16
22
|
};
|
|
23
|
+
if (placeholder) {
|
|
24
|
+
if ('value' in properties) {
|
|
25
|
+
properties.value = properties.value || '';
|
|
26
|
+
} else {
|
|
27
|
+
properties.defaultValue = '';
|
|
28
|
+
}
|
|
29
|
+
}
|
|
17
30
|
return (
|
|
18
|
-
<ChakraSelect {...properties}>
|
|
31
|
+
<ChakraSelect ref={ref} {...properties}>
|
|
19
32
|
{placeholder && (
|
|
20
|
-
<option
|
|
33
|
+
<option hidden disabled value="">
|
|
21
34
|
{placeholder}
|
|
22
35
|
</option>
|
|
23
36
|
)}
|
|
24
37
|
{children}
|
|
25
38
|
</ChakraSelect>
|
|
26
39
|
);
|
|
27
|
-
};
|
|
40
|
+
});
|
|
28
41
|
|
|
29
42
|
Select.defaultProps = {
|
|
30
43
|
size: 'medium',
|