{"size": 2136, "ext": "js", "max_stars_repo_path": "src/components/InputTheme/index.js", "max_stars_repo_name": "therealeddy/tonnage-frontend", "max_stars_repo_stars_event_min_datetime": "2020-04-04T00:10:16.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-18T14:22:27.000Z", "max_issues_repo_path": "src/components/InputTheme/index.js", "max_issues_repo_name": "therealeddy/tonnage-frontend", "max_issues_repo_issues_event_min_datetime": "2021-08-18T13:19:37.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T02:25:30.000Z", "max_forks_repo_path": "src/components/InputTheme/index.js", "max_forks_repo_name": "therealeddy/tonnage-frontend", "max_forks_repo_forks_event_min_datetime": "2020-04-04T00:10:23.000Z", "max_forks_repo_forks_event_max_datetime": "2020-04-04T00:10:23.000Z"}
{"max_stars_count": 4, "max_issues_count": 11, "max_forks_count": 1, "avg_line_length": 22.25, "max_line_length": 75, "alphanum_fraction": 0.4831460674}
import React, { useEffect, useRef } from 'react';
import InputMask from 'react-input-mask';

import { useField } from '@unform/core';
import PropTypes from 'prop-types';

import { Container } from './styles';

export default function InputTheme({
  id,
  name,
  label,
  className,
  type,
  mask,
  multline,
  ...rest
}) {
  const inputRef = useRef(null);

  const { fieldName, defaultValue, registerField, error } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
    });
  }, [fieldName, registerField]);

  return (
    <Container className={className}>
      <div className="form-group">
        {label && <label htmlFor={id}>{label}</label>}
        {!mask ? (
          <>
            {!multline ? (
              <input
                id={id}
                type={type}
                className="form-control"
                ref={inputRef}
                defaultValue={defaultValue}
                {...rest}
              />
            ) : (
              <textarea
                id={id}
                type={type}
                className="form-control"
                ref={inputRef}
                defaultValue={defaultValue}
                {...rest}
              />
            )}
          </>
        ) : (
          <InputMask mask={mask} maskChar={null} {...rest}>
            {(inputProps) => (
              <input
                id={id}
                type={type}
                className="form-control"
                ref={inputRef}
                defaultValue={defaultValue}
                {...inputProps}
              />
            )}
          </InputMask>
        )}
        {error && <span className="error">{error}</span>}
      </div>
    </Container>
  );
}

InputTheme.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  className: PropTypes.string,
  type: PropTypes.string,
  mask: PropTypes.string,
  multline: PropTypes.bool,
};

InputTheme.defaultProps = {
  id: '',
  name: '',
  label: '',
  className: '',
  type: '',
  mask: '',
  multline: false,
};
