@agility/plenum-ui 2.1.17 → 2.1.18
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/dist/index.js +1 -1
- package/dist/index.js.map +2 -2
- package/package.json +1 -1
- package/stories/molecules/inputs/select/Select.tsx +34 -38
package/package.json
CHANGED
|
@@ -1,37 +1,33 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react"
|
|
2
|
-
import InputLabel from "@/stories/molecules/inputs/InputLabel"
|
|
3
|
-
import { useId } from "@/utils/useId"
|
|
4
|
-
import { default as cn } from "classnames"
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import InputLabel from "@/stories/molecules/inputs/InputLabel";
|
|
3
|
+
import { useId } from "@/utils/useId";
|
|
4
|
+
import { default as cn } from "classnames";
|
|
5
5
|
|
|
6
6
|
export interface ISimpleSelectOptions {
|
|
7
|
-
label: string
|
|
8
|
-
value: string
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
9
|
}
|
|
10
10
|
export interface ISelectProps {
|
|
11
11
|
/** Label */
|
|
12
|
-
label?: string
|
|
12
|
+
label?: string;
|
|
13
13
|
/** Select ID prop */
|
|
14
|
-
id?: string
|
|
14
|
+
id?: string;
|
|
15
15
|
/** Select name prop */
|
|
16
|
-
name?: string
|
|
16
|
+
name?: string;
|
|
17
17
|
/** List of options to display in the select menu */
|
|
18
|
-
options: ISimpleSelectOptions[]
|
|
18
|
+
options: ISimpleSelectOptions[];
|
|
19
19
|
/** Select name prop */
|
|
20
|
-
onChange?(value: string): void
|
|
20
|
+
onChange?(value: string): void;
|
|
21
21
|
/** Select disabled state */
|
|
22
|
-
isDisabled?: boolean
|
|
22
|
+
isDisabled?: boolean;
|
|
23
23
|
/** Select error state */
|
|
24
|
-
isError?: boolean
|
|
24
|
+
isError?: boolean;
|
|
25
25
|
/** Select required state */
|
|
26
|
-
isRequired?: boolean
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
onFocus?: () => void
|
|
33
|
-
|
|
34
|
-
onBlur?: () => void
|
|
26
|
+
isRequired?: boolean;
|
|
27
|
+
value?: string;
|
|
28
|
+
className?: string;
|
|
29
|
+
onFocus?: () => void;
|
|
30
|
+
onBlur?: () => void;
|
|
35
31
|
}
|
|
36
32
|
const Select: React.FC<ISelectProps> = ({
|
|
37
33
|
label,
|
|
@@ -47,23 +43,23 @@ const Select: React.FC<ISelectProps> = ({
|
|
|
47
43
|
onFocus,
|
|
48
44
|
onBlur
|
|
49
45
|
}) => {
|
|
50
|
-
const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value)
|
|
51
|
-
const uniqueID = useId()
|
|
52
|
-
if (!id) id = `select-${uniqueID}
|
|
53
|
-
if (!name) name = id
|
|
46
|
+
const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
|
|
47
|
+
const uniqueID = useId();
|
|
48
|
+
if (!id) id = `select-${uniqueID}`;
|
|
49
|
+
if (!name) name = id;
|
|
54
50
|
|
|
55
51
|
useEffect(() => {
|
|
56
52
|
if (value !== undefined && value !== null) {
|
|
57
|
-
setSelectedOption(value)
|
|
53
|
+
setSelectedOption(value);
|
|
58
54
|
}
|
|
59
|
-
}, [value])
|
|
55
|
+
}, [value]);
|
|
60
56
|
|
|
61
57
|
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
62
|
-
const targetValue = e.target.value
|
|
63
|
-
typeof onChange == "function" && onChange(targetValue)
|
|
64
|
-
setSelectedOption(targetValue)
|
|
65
|
-
}
|
|
66
|
-
const wrapperStyle = cn("group", { "opacity-50": isDisabled })
|
|
58
|
+
const targetValue = e.target.value;
|
|
59
|
+
typeof onChange == "function" && onChange(targetValue);
|
|
60
|
+
setSelectedOption(targetValue);
|
|
61
|
+
};
|
|
62
|
+
const wrapperStyle = cn("group", { "opacity-50": isDisabled });
|
|
67
63
|
return (
|
|
68
64
|
<div className={wrapperStyle}>
|
|
69
65
|
{label && (
|
|
@@ -95,14 +91,14 @@ const Select: React.FC<ISelectProps> = ({
|
|
|
95
91
|
>
|
|
96
92
|
{options.map(({ value, label }) => {
|
|
97
93
|
return (
|
|
98
|
-
<option key={value} value={
|
|
94
|
+
<option key={value} value={value}>
|
|
99
95
|
{label}
|
|
100
96
|
</option>
|
|
101
|
-
)
|
|
97
|
+
);
|
|
102
98
|
})}
|
|
103
99
|
</select>
|
|
104
100
|
</div>
|
|
105
|
-
)
|
|
106
|
-
}
|
|
101
|
+
);
|
|
102
|
+
};
|
|
107
103
|
|
|
108
|
-
export default Select
|
|
104
|
+
export default Select;
|