www.armandphilippot.com - The frontend of my personal website.

about summary refs log tree commit diff stats

	Commit message (Collapse)	Author	Age	Files	Lines
*	chore: add prismjs for syntax highlighting	Armand Philippot	2021-12-30	1	-0/+21

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

import {
  type ForwardedRef,
  forwardRef,
  type InputHTMLAttributes,
  type HTMLInputTypeAttribute,
} from 'react';
import styles from '../fields.module.scss';

export type InputProps = Omit<
  InputHTMLAttributes<HTMLInputElement>,
  'disabled' | 'readonly' | 'required' | 'type'
> &
  Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>> & {
    /**
     * Should the field be disabled?
     *
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Should the field be readonly?
     *
     * @default false
     */
    isReadOnly?: boolean;
    /**
     * Should the field be required?
     *
     * @default false
     */
    isRequired?: boolean;
    /**
     * The input type.
     */
    type: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'range'>;
  };

const InputWithRef = (
  {
    className = '',
    isDisabled = false,
    isReadOnly = false,
    isRequired = false,
    ...props
  }: InputProps,
  ref: ForwardedRef<HTMLInputElement>
) => {
  const fieldClassName = `${styles.field} ${className}`;

  return (
    <input
      {...props}
      className={fieldClassName}
      disabled={isDisabled}
      readOnly={isReadOnly}
      ref={ref}
      required={isRequired}
    />
  );
};

/**
 * Input component.
 */
export const Input = forwardRef(InputWithRef);