wallet-core/packages/taler-wallet-webextension/src/mui/TextField.tsx

98 lines
2.8 KiB
TypeScript
Raw Normal View History

2022-06-06 17:06:25 +02:00
/*
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/>
*/
2022-03-18 21:52:46 +01:00
import { ComponentChildren, h, VNode } from "preact";
2022-03-29 04:41:07 +02:00
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
2023-02-16 03:23:42 +01:00
import { Colors } from "./style.js";
2022-03-18 21:52:46 +01:00
export interface Props {
autoComplete?: string;
autoFocus?: boolean;
color?: Colors;
disabled?: boolean;
2022-11-07 23:29:47 +01:00
error?: string;
2022-03-18 21:52:46 +01:00
fullWidth?: boolean;
helperText?: VNode | string;
id?: string;
label?: VNode | string;
margin?: "dense" | "normal" | "none";
maxRows?: number;
minRows?: number;
multiline?: boolean;
onChange?: (s: string) => void;
onInput?: (s: string) => string;
2022-11-22 19:43:39 +01:00
inputmode?: string;
2022-11-04 19:38:58 +01:00
min?: string;
step?: string;
2022-03-18 21:52:46 +01:00
placeholder?: string;
required?: boolean;
2022-04-07 15:11:47 +02:00
2022-08-16 02:18:39 +02:00
startAdornment?: VNode;
endAdornment?: VNode;
2022-04-07 15:11:47 +02:00
//FIXME: change to "grabFocus"
// focused?: boolean;
2022-03-18 21:52:46 +01:00
rows?: number;
select?: boolean;
type?: string;
value?: string;
variant?: "filled" | "outlined" | "standard";
children?: ComponentChildren;
}
2022-03-29 04:41:07 +02:00
const inputVariant = {
standard: InputStandard,
filled: InputFilled,
2022-06-22 19:44:14 +02:00
outlined: InputStandard,
2022-03-29 04:41:07 +02:00
};
const selectVariant = {
standard: SelectStandard,
filled: SelectFilled,
2022-06-22 19:44:14 +02:00
outlined: SelectStandard,
2022-03-29 04:41:07 +02:00
};
2022-03-18 21:52:46 +01:00
export function TextField({
label,
select,
helperText,
children,
2022-04-06 17:20:00 +02:00
variant = "filled",
2022-03-18 21:52:46 +01:00
...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>
2022-11-07 23:29:47 +01:00
{helperText && (
<FormHelperText error={props.error}>{helperText}</FormHelperText>
)}
{props.error ? (
<FormHelperText error="true">{props.error}</FormHelperText>
) : undefined}
2022-03-18 21:52:46 +01:00
</FormControl>
);
}