blob: 6e46660751d887e7031f2768510e60590ad51d7a (
plain)
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
|
import { ChangeEvent, FC, SetStateAction } from 'react';
import styles from './forms.module.scss';
type SelectOptions = {
id: string;
name: string;
value: string;
};
type SelectProps = {
/**
* Field state. Either enabled (false) or disabled (true).
*/
disabled?: boolean;
/**
* Field id attribute.
*/
id?: string;
/**
* Field name attribute.
*/
name?: string;
/**
* True if the field is required. Default: false.
*/
options: SelectOptions[];
/**
* True if the field is required. Default: false.
*/
required?: boolean;
/**
* Callback function to set field value.
*/
setValue: (value: SetStateAction<string>) => void;
/**
* Field value.
*/
value: string;
};
/**
* Select component
*
* Render a HTML select element.
*/
const Select: FC<SelectProps> = ({ options, setValue, ...props }) => {
/**
* Update select value when an option is selected.
* @param e - The option change event.
*/
const updateValue = (e: ChangeEvent<HTMLSelectElement>) => {
setValue(e.target.value);
};
/**
* Get the option elements.
* @returns {JSX.Element[]} An array of HTML option elements.
*/
const getOptions = (): JSX.Element[] =>
options.map((option) => (
<option key={option.id} value={option.value}>
{option.name}
</option>
));
return (
<select
className={`${styles.field} ${styles['field--select']}`}
onChange={updateValue}
{...props}
>
{getOptions()}
</select>
);
};
export default Select;
|
