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
|
/*
This file is part of GNU Taler
(C) 2022 Taler Systems S.A.
GNU Taler is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
Foundation; either version 3, or (at your option) any later version.
GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
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 { 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;
startAdornment?: VNode;
endAdornment?: VNode;
//FIXME: change to "grabFocus"
// focused?: boolean;
rows?: number;
select?: boolean;
type?: string;
value?: string;
variant?: "filled" | "outlined" | "standard";
children?: ComponentChildren;
}
const inputVariant = {
standard: InputStandard,
filled: InputFilled,
outlined: InputStandard,
};
const selectVariant = {
standard: SelectStandard,
filled: SelectFilled,
outlined: SelectStandard,
};
export function TextField({
label,
select,
helperText,
children,
variant = "filled",
...props
}: Props): VNode {
// htmlFor={id} id={inputLabelId}
const Input = select ? selectVariant[variant] : inputVariant[variant];
return (
<FormControl {...props}>
{label && <InputLabel>{label}</InputLabel>}
<Input {...props}>{children}</Input>
{helperText && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
);
}
|
