@agility/plenum-ui 2.1.22 → 2.1.23
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/radio/Radio.tsx +34 -34
package/package.json
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import InputLabel from "@/stories/molecules/inputs/InputLabel"
|
|
2
|
-
import { useId } from "@/utils/useId"
|
|
3
|
-
import React from "react"
|
|
4
|
-
import { default as cn } from "classnames"
|
|
1
|
+
import InputLabel from "@/stories/molecules/inputs/InputLabel";
|
|
2
|
+
import { useId } from "@/utils/useId";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { default as cn } from "classnames";
|
|
5
5
|
export interface IRadioProps {
|
|
6
6
|
/** group name */
|
|
7
|
-
name?: string
|
|
7
|
+
name?: string;
|
|
8
8
|
/** Radio label */
|
|
9
|
-
label: string
|
|
9
|
+
label: string;
|
|
10
10
|
/** Radio ID */
|
|
11
|
-
id?: string
|
|
11
|
+
id?: string;
|
|
12
12
|
/** Disabled state */
|
|
13
|
-
isDisabled?: boolean
|
|
13
|
+
isDisabled?: boolean;
|
|
14
14
|
/** Check state */
|
|
15
|
-
isChecked?: boolean
|
|
15
|
+
isChecked?: boolean;
|
|
16
16
|
/** If field is required */
|
|
17
|
-
isRequired?: boolean
|
|
17
|
+
isRequired?: boolean;
|
|
18
18
|
/** Error state */
|
|
19
|
-
isError?: boolean
|
|
19
|
+
isError?: boolean;
|
|
20
20
|
/** Message or description */
|
|
21
|
-
message?: string
|
|
21
|
+
message?: string;
|
|
22
22
|
/** value */
|
|
23
|
-
value?: string
|
|
23
|
+
value?: string;
|
|
24
24
|
/** Callback on input change */
|
|
25
|
-
onChange?(value: string, isChecked: boolean): void
|
|
25
|
+
onChange?(value: string, isChecked: boolean): void;
|
|
26
26
|
/** Callback on click */
|
|
27
|
-
onClick?(value: string, isChecked: boolean): void
|
|
27
|
+
onClick?(value: string, isChecked: boolean): void;
|
|
28
28
|
}
|
|
29
29
|
const Radio: React.FC<IRadioProps> = ({
|
|
30
30
|
label,
|
|
@@ -39,24 +39,24 @@ const Radio: React.FC<IRadioProps> = ({
|
|
|
39
39
|
onClick,
|
|
40
40
|
value
|
|
41
41
|
}) => {
|
|
42
|
-
const uniqueID = useId()
|
|
43
|
-
if (!id) id = `input-${uniqueID}
|
|
44
|
-
if (!name) name = id
|
|
42
|
+
const uniqueID = useId();
|
|
43
|
+
if (!id) id = `input-${uniqueID}`;
|
|
44
|
+
if (!name) name = id;
|
|
45
45
|
|
|
46
46
|
const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
|
|
47
47
|
"border-red-500 shadow-none": isError
|
|
48
|
-
})
|
|
49
|
-
const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled })
|
|
48
|
+
});
|
|
49
|
+
const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled });
|
|
50
50
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
51
|
-
const targetValue = e.currentTarget.value
|
|
52
|
-
const targetChecked = e.currentTarget.checked
|
|
53
|
-
typeof onChange === "function" && onChange(targetValue, targetChecked)
|
|
54
|
-
}
|
|
51
|
+
const targetValue = e.currentTarget.value;
|
|
52
|
+
const targetChecked = e.currentTarget.checked;
|
|
53
|
+
typeof onChange === "function" && onChange(targetValue, targetChecked);
|
|
54
|
+
};
|
|
55
55
|
const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
|
|
56
|
-
const targetValue = e.currentTarget.value
|
|
57
|
-
const targetChecked = e.currentTarget.checked
|
|
58
|
-
typeof onClick === "function" && onClick(targetValue, targetChecked)
|
|
59
|
-
}
|
|
56
|
+
const targetValue = e.currentTarget.value;
|
|
57
|
+
const targetChecked = e.currentTarget.checked;
|
|
58
|
+
typeof onClick === "function" && onClick(targetValue, targetChecked);
|
|
59
|
+
};
|
|
60
60
|
return (
|
|
61
61
|
<div className={wrapperStyles}>
|
|
62
62
|
<div className="flex items-center h-5">
|
|
@@ -68,12 +68,12 @@ const Radio: React.FC<IRadioProps> = ({
|
|
|
68
68
|
value={value}
|
|
69
69
|
className={checboxStyles}
|
|
70
70
|
disabled={isDisabled}
|
|
71
|
-
|
|
71
|
+
checked={isChecked}
|
|
72
72
|
onChange={(e) => {
|
|
73
|
-
handleChange(e)
|
|
73
|
+
handleChange(e);
|
|
74
74
|
}}
|
|
75
75
|
onClick={(e) => {
|
|
76
|
-
handleClick(e)
|
|
76
|
+
handleClick(e);
|
|
77
77
|
}}
|
|
78
78
|
/>
|
|
79
79
|
</div>
|
|
@@ -86,7 +86,7 @@ const Radio: React.FC<IRadioProps> = ({
|
|
|
86
86
|
)}
|
|
87
87
|
</div>
|
|
88
88
|
</div>
|
|
89
|
-
)
|
|
90
|
-
}
|
|
89
|
+
);
|
|
90
|
+
};
|
|
91
91
|
|
|
92
|
-
export default Radio
|
|
92
|
+
export default Radio;
|