1 files changed, 97 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..ab29fb78d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -0,0 +1,97 @@
+/*
+ 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.js";
+
+export interface Props {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  color?: Colors;
+  disabled?: boolean;
+  error?: string | Error;
+  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;
+  inputmode?: string;
+  min?: string;
+  step?: string;
+  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 error={props.error}>{helperText}</FormHelperText>
+      )}
+      {props.error ? (
+        <FormHelperText error="true">{props.error}</FormHelperText>
+      ) : undefined}
+    </FormControl>
+  );
+}