element-call/src/input/Input.tsx

/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/

import {
  ChangeEvent,
  FC,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useId,
} from "react";
import classNames from "classnames";

import styles from "./Input.module.css";
import CheckIcon from "../icons/Check.svg?react";
import { TranslatedError } from "../TranslatedError";

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;
}

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 | ReactNode;
  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;
  defaultValue?: string;
  placeholder?: string;
  defaultChecked?: boolean;
  min?: number;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
}

export const InputField = forwardRef<
  HTMLInputElement | HTMLTextAreaElement,
  InputFieldProps
>(
  (
    {
      id,
      label,
      className,
      type,
      checked,
      prefix,
      suffix,
      description,
      disabled,
      min,
      ...rest
    },
    ref,
  ) => {
    const descriptionId = useId();

    return (
      <Field
        className={classNames(
          type === "checkbox" ? styles.checkboxField : styles.inputField,
          {
            [styles.prefix]: !!prefix,
            [styles.disabled]: disabled,
          },
          className,
        )}
      >
        {prefix && <span>{prefix}</span>}
        {type === "textarea" ? (
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          <textarea
            id={id}
            ref={ref as ForwardedRef<HTMLTextAreaElement>}
            disabled={disabled}
            aria-describedby={descriptionId}
            {...rest}
          />
        ) : (
          <input
            id={id}
            ref={ref as ForwardedRef<HTMLInputElement>}
            type={type}
            checked={checked}
            disabled={disabled}
            aria-describedby={descriptionId}
            min={min}
            {...rest}
          />
        )}

        <label htmlFor={id}>
          {type === "checkbox" && (
            <div className={styles.checkbox}>
              <CheckIcon />
            </div>
          )}
          {label}
        </label>
        {suffix && <span>{suffix}</span>}
        {description && (
          <p
            id={descriptionId}
            className={
              label
                ? styles.description
                : classNames(styles.description, styles.noLabel)
            }
          >
            {description}
          </p>
        )}
      </Field>
    );
  },
);

InputField.displayName = "InputField";

interface ErrorMessageProps {
  error: Error;
}

export const ErrorMessage: FC<ErrorMessageProps> = ({ error }) => (
  <p className={styles.errorMessage}>
    {error instanceof TranslatedError ? error.translatedMessage : error.message}
  </p>
);