blob: 377e1b04cea978d3d1856921c802aba427b26e12 (
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
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
|
import {
ChangeEvent,
forwardRef,
ForwardRefRenderFunction,
SetStateAction,
} from 'react';
import styles from './forms.module.scss';
export type FieldType =
| 'datetime-local'
| 'email'
| 'number'
| 'search'
| 'tel'
| 'text'
| 'textarea'
| 'time'
| 'url';
export type FieldProps = {
/**
* One or more ids that refers to the field name.
*/
'aria-labelledby'?: string;
/**
* Add classnames to the field.
*/
className?: string;
/**
* Field state. Either enabled (false) or disabled (true).
*/
disabled?: boolean;
/**
* Field id attribute.
*/
id: string;
/**
* Field maximum value.
*/
max?: number | string;
/**
* Field minimum value.
*/
min?: number | string;
/**
* Field name attribute.
*/
name: string;
/**
* Placeholder value.
*/
placeholder?: string;
/**
* True if the field is required. Default: false.
*/
required?: boolean;
/**
* Callback function to set field value.
*/
setValue: (value: SetStateAction<string>) => void;
/**
* Field incremental values that are valid.
*/
step?: number | string;
/**
* Field type. Default: text.
*/
type: FieldType;
/**
* Field value.
*/
value: string;
};
/**
* Field component.
*
* Render either an input or a textarea.
*/
const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
{ className = '', setValue, type, ...props },
ref
) => {
/**
* Update select value when an option is selected.
* @param e - The option change event.
*/
const updateValue = (
e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
setValue(e.target.value);
};
return type === 'textarea' ? (
<textarea
onChange={updateValue}
className={`${styles.field} ${styles['field--textarea']} ${className}`}
{...props}
/>
) : (
<input
className={`${styles.field} ${className}`}
onChange={updateValue}
ref={ref}
type={type}
{...props}
/>
);
};
export default forwardRef(Field);
|
