Componente text field

TextField.tsx

import React, {
  InputHTMLAttributes,
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';
import { useField } from '@unform/core';

import { AutoComplete, VariationStyle, Mask } from './types';

import { StyledFormControl, StyledTextField } from './styles';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label: string;
  variationStyle?: VariationStyle;
  noValidate?: boolean;
  autoComplete?: AutoComplete;
  pattern?: string;
  helperText?: string; // To use with error
  placeholder?: string;
  multiline?: boolean;
  required?: boolean;
  type?: string;
  mask?: Mask;
  length: number;
  onChange?:
    | ((
        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
      ) => void)
    | undefined;
}

const TextField: React.FC<InputProps> = ({
  name,
  label,
  variationStyle,
  helperText,
  placeholder,
  multiline,
  required,
  type,
  mask,
  length,
  ...rest
}) => {
  const inputRef = useRef<HTMLInputElement>(null);

  const [value, setValue] = useState('');
  const [maxLength, setMaxLength] = useState(20);

  /** Recebe os dados do formulário */
  const { fieldName, registerField } = useField(name);

  /** Quando o componente for exibido em tela, o registerField será chamado recebendo
   * algumas propriedades.
   */
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      getValue: ref => {
        return ref.value;
      },
      setValue: (ref, newValue: string) => {
        if (newValue) setValue(newValue);
      },
      clearValue: () => {
        setValue('');
      },
    });
  }, [fieldName, registerField]);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>): void => {
      if (mask === Mask.none) {
        const masked = (inputValue: string): string => {
          return inputValue;
        };
        setValue(masked(event.target.value));
        setMaxLength(length);
      }
      if (mask === Mask.cep) {
        const masked = (inputValue: string): string => {
          return inputValue.replace(/(\d{5})(\d{3})/, '$1-$2');
        };
        setValue(masked(event.target.value.replace(/[^0-9]/g, '')));
        setMaxLength(length);
      }
      if (mask === Mask.shipping) {
        const masked = (inputValue: string): string => {
          return `R$ ${inputValue.replace(/([0-9]{2})$/g, ',$1')}`;
        };
        setValue(masked(event.target.value.replace(/[^0-9]/g, '')));
        setMaxLength(length);
      }
      if (mask === Mask.onlyNumber) {
        setValue(event.target.value.replace(/[^0-9]/g, ''));
        setMaxLength(length);
      }
    },
    [length, mask],
  );

  return (
    <StyledFormControl>
      <label htmlFor={label}>{label}</label>
      <StyledTextField
        id={fieldName}
        name={fieldName}
        variant={variationStyle}
        type={type}
        helperText={helperText}
        placeholder={placeholder}
        multiline={multiline}
        required={required}
        value={value}
        onChange={handleChange}
        InputProps={{
          inputProps: {
            ref: inputRef,
            mask,
            maxLength,
            ...rest,
          },
        }}
      />
    </StyledFormControl>
  );
};

export default TextField;