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
|
import { ComponentChildren, h, VNode } from "preact";
import { FormControl } from "./input/FormControl.js";
import { FormHelperText } from "./input/FormHelperText.js";
import { InputFilled } from "./input/InputFilled.js";
import { InputLabel } from "./input/InputLabel.js";
import { InputOutlined } from "./input/InputOutlined.js";
import { InputStandard } from "./input/InputStandard.js";
import { SelectFilled } from "./input/SelectFilled.js";
import { SelectOutlined } from "./input/SelectOutlined.js";
import { SelectStandard } from "./input/SelectStandard.js";
// eslint-disable-next-line import/extensions
import { Colors } from "./style";
export interface Props {
autoComplete?: string;
autoFocus?: boolean;
color?: Colors;
disabled?: boolean;
error?: boolean;
fullWidth?: boolean;
helperText?: VNode | string;
id?: string;
label?: VNode | string;
margin?: "dense" | "normal" | "none";
maxRows?: number;
minRows?: number;
multiline?: boolean;
onChange?: (s: string) => void;
placeholder?: string;
required?: boolean;
focused?: boolean;
rows?: number;
select?: boolean;
type?: string;
value?: string;
variant?: "filled" | "outlined" | "standard";
children?: ComponentChildren;
}
const inputVariant = {
standard: InputStandard,
filled: InputFilled,
outlined: InputOutlined,
};
const selectVariant = {
standard: SelectStandard,
filled: SelectFilled,
outlined: SelectOutlined,
};
export function TextField({
label,
select,
helperText,
children,
variant = "standard",
...props
}: Props): VNode {
// htmlFor={id} id={inputLabelId}
const Input = select ? selectVariant[variant] : inputVariant[variant];
// console.log("variant", Input);
return (
<FormControl {...props}>
{label && <InputLabel>{label}</InputLabel>}
<Input {...props}>{children}</Input>
{helperText && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
);
}
|
