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
|
import {
forwardRef,
type InputHTMLAttributes,
type ForwardRefRenderFunction,
} from 'react';
import styles from './boolean-field.module.scss';
export type BooleanFieldProps = Omit<
InputHTMLAttributes<HTMLInputElement>,
| 'checked'
| 'disabled'
| 'hidden'
| 'name'
| 'readOnly'
| 'required'
| 'type'
| 'value'
> & {
/**
* Should the field be checked?
*
* @default false
*/
isChecked?: boolean;
/**
* Should the field be disabled?
*
* @default false
*/
isDisabled?: boolean;
/**
* Should the field be visually hidden?
*
* @default false
*/
isHidden?: boolean;
/**
* Should the field be readonly?
*
* @default false
*/
isReadOnly?: boolean;
/**
* Should the field be required?
*
* @default false
*/
isRequired?: boolean;
/**
* Field name attribute.
*/
name: string;
/**
* The input type.
*/
type: 'checkbox' | 'radio';
/**
* Field name attribute.
*/
value: string;
};
const BooleanFieldWithRef: ForwardRefRenderFunction<
HTMLInputElement,
BooleanFieldProps
> = (
{
className = '',
isChecked = false,
isDisabled = false,
isHidden = false,
isReadOnly = false,
isRequired = false,
...props
},
ref
) => {
const visibilityClass = isHidden ? styles['field--hidden'] : '';
const inputClass = `${visibilityClass} ${className}`;
return (
<input
{...props}
checked={isChecked}
className={inputClass}
disabled={isDisabled}
readOnly={isReadOnly}
ref={ref}
required={isRequired}
/>
);
};
/**
* BooleanField component
*
* Render a checkbox or a radio input type.
*/
export const BooleanField = forwardRef(BooleanFieldWithRef);
|
