-
Notifications
You must be signed in to change notification settings - Fork 9
/
RadioButton.tsx
150 lines (145 loc) · 3.58 KB
/
RadioButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import React, { type ReactElement, useState } from "react";
import classnames from "classnames";
import styles from "./RadioButton.module.css";
import focusStyles from "../Focus.module.css";
import Typography from "../Typography/Typography";
import useFocusVisible from "../useFocusVisible";
import useIsHydrated from "../useIsHydrated";
/**
* [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text
*/
const RadioButton = ({
checked = false,
"data-testid": dataTestId,
dangerouslyForceFocusStyles = false,
disabled: disabledProp = false,
error = false,
id,
label,
name,
onChange,
size = "md",
value,
}: {
/**
* Whether or not the radio button is checked
*
* @defaultValue false
*/
checked?: boolean;
/**
* Test id for the radio button
*/
"data-testid"?: string;
/**
* Whether or not the radio button is disabled
*
* @defaultValue false
*/
disabled?: boolean;
/**
* Whether to show error color schema
*
* @defaultValue false
*/
error?: boolean;
/**
* Id for the the radio button
*/
id?: string;
/**
* Value to show end user
*/
label: string;
/**
* The name of the grouping the radio buttons are in
*/
name: string;
/**
* The callback to be called when the radio button is clicked
*/
onChange: React.ChangeEventHandler<HTMLInputElement>;
/**
* Size of the components
*
* * `sm`: 16px
* * `md`: 24px
*
* @defaultValue "md"
*/
size?: "sm" | "md";
/**
* Value of the selected radio option
*/
value: string | number;
/** forces focus ring styling */
dangerouslyForceFocusStyles?: boolean;
}): ReactElement => {
const isHydrated = useIsHydrated();
const disabled = !isHydrated || disabledProp;
const [isFocused, setIsFocused] = useState(false);
const { isFocusVisible } = useFocusVisible();
const sharedStyles = classnames(styles.background, styles[size], {
[styles.errorBorderColor]: error,
[styles.borderColor]: !error,
[focusStyles.accessibilityOutlineFocus]:
(isFocused && isFocusVisible) || dangerouslyForceFocusStyles,
});
return (
<label
className={classnames(
styles.radioBaseContainer,
styles[`cursor${disabled ? "Disabled" : "Enabled"}`],
{
[styles.disabled]: disabled,
[styles.smBase]: size === "sm",
[styles.mdBase]: size === "md",
},
)}
>
{checked ? (
<div
className={classnames(sharedStyles, {
[styles.mdCheckedBorder]: size === "md",
[styles.smCheckedBorder]: size === "sm",
})}
/>
) : (
<div className={classnames(sharedStyles, styles.neutralBorder)} />
)}
<input
data-testid={dataTestId}
type="radio"
id={id}
name={name}
className={classnames(
styles.radioStyleOverride,
styles[`cursor${disabled ? "Disabled" : "Enabled"}`],
{
[styles.smOverride]: size === "sm",
[styles.mdOverride]: size === "md",
},
)}
checked={checked}
onChange={onChange}
disabled={disabled}
value={value}
onFocus={() => {
setIsFocused(true);
}}
onBlur={() => {
setIsFocused(false);
}}
/>
{label && (
<Typography
size={size === "md" ? 200 : 100}
color={error ? "destructive-primary" : "gray900"}
>
{label}
</Typography>
)}
</label>
);
};
export default RadioButton;