diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/TextField.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/TextField.tsx | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx new file mode 100644 index 000000000..ada8d5d85 --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx @@ -0,0 +1,69 @@ +import { ComponentChildren, h, VNode } from "preact"; +import { FormControl } from "./input/FormControl"; +import { FormHelperText } from "./input/FormHelperText"; +import { InputFilled } from "./input/InputFilled"; +import { InputLabel } from "./input/InputLabel"; +import { InputOutlined } from "./input/InputOutlined"; +import { InputStandard } from "./input/InputStandard"; +import { SelectFilled } from "./input/SelectFilled"; +import { SelectOutlined } from "./input/SelectOutlined"; +import { SelectStandard } from "./input/SelectStandard"; +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; +} + +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> + ); +} + +const inputVariant = { + standard: InputStandard, + filled: InputFilled, + outlined: InputOutlined, +}; + +const selectVariant = { + standard: SelectStandard, + filled: SelectFilled, + outlined: SelectOutlined, +}; |