diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-18 17:52:46 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-18 17:52:46 -0300 |
commit | 65eb64cd07dcaf1b57405189fcd054684d3f5e2f (patch) | |
tree | 4d10faf8f975bbccceb2286ce2eb00a5000bbbbc /packages/taler-wallet-webextension/src/mui/TextField.tsx | |
parent | 98761a2b8d50b1547ed1230f7c462ed205656c77 (diff) | |
download | wallet-core-65eb64cd07dcaf1b57405189fcd054684d3f5e2f.tar.xz |
mui text field, standard variation
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, +}; |