typescript src/input (#487)

2022-08-09 11:44:46 +02:00
parent 5474693711
commit f554afd6b1
8 changed files with 120 additions and 41 deletions
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -0,0 +1,149 @@
+/*
+Copyright 2022 Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ChangeEvent, forwardRef, ReactNode } from "react";
+import classNames from "classnames";
+
+import styles from "./Input.module.css";
+import { ReactComponent as CheckIcon } from "../icons/Check.svg";
+
+interface FieldRowProps {
+  children: ReactNode;
+  rightAlign?: boolean;
+  className?: string;
+}
+
+export function FieldRow({
+  children,
+  rightAlign,
+  className,
+}: FieldRowProps): JSX.Element {
+  return (
+    <div
+      className={classNames(
+        styles.fieldRow,
+        { [styles.rightAlign]: rightAlign },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface FieldProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Field({ children, className }: FieldProps): JSX.Element {
+  return <div className={classNames(styles.field, className)}>{children}</div>;
+}
+
+interface InputFieldProps {
+  label: string;
+  type: string;
+  prefix?: string;
+  suffix?: string;
+  id?: string;
+  checked?: boolean;
+  className?: string;
+  description?: string;
+  disabled?: boolean;
+  required?: boolean;
+  // this is a hack. Those variables should be part of `HTMLAttributes<HTMLInputElement> | HTMLAttributes<HTMLTextAreaElement>`
+  // but extending from this union type does not work
+  name?: string;
+  autoComplete?: string;
+  autoCorrect?: string;
+  autoCapitalize?: string;
+  value?: string;
+  placeholder?: string;
+  defaultChecked?: boolean;
+  onChange?: (event: ChangeEvent) => void;
+}
+
+export const InputField = forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  InputFieldProps
+>(
+  (
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Field
+        className={classNames(
+          type === "checkbox" ? styles.checkboxField : styles.inputField,
+          {
+            [styles.prefix]: !!prefix,
+            [styles.disabled]: disabled,
+          },
+          className
+        )}
+      >
+        {prefix && <span>{prefix}</span>}
+        {type === "textarea" ? (
+          <textarea
+            id={id}
+            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+            disabled={disabled}
+            {...rest}
+          />
+        ) : (
+          <input
+            id={id}
+            ref={ref as React.ForwardedRef<HTMLInputElement>}
+            type={type}
+            checked={checked}
+            disabled={disabled}
+            {...rest}
+          />
+        )}
+
+        <label htmlFor={id}>
+          {type === "checkbox" && (
+            <div className={styles.checkbox}>
+              <CheckIcon />
+            </div>
+          )}
+          {label}
+        </label>
+        {suffix && <span>{suffix}</span>}
+        {description && <p className={styles.description}>{description}</p>}
+      </Field>
+    );
+  }
+);
+
+export function ErrorMessage({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return <p className={styles.errorMessage}>{children}</p>;
+}