{"size": 1126, "ext": "js", "max_stars_repo_path": "web/src/pages/ServiceOrder/components/MaskedInput/index.js", "max_stars_repo_name": "lucasiori/automotive-workshop-management", "max_stars_repo_stars_event_min_datetime": "2020-10-04T02:50:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-14T05:32:27.000Z", "max_issues_repo_path": "web/src/pages/ServiceOrder/components/MaskedInput/index.js", "max_issues_repo_name": "lucasiori/automotive-workshop-management", "max_issues_repo_issues_event_min_datetime": "2021-03-10T18:25:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T04:48:01.000Z", "max_forks_repo_path": "web/src/pages/ServiceOrder/components/MaskedInput/index.js", "max_forks_repo_name": "lucasiori/automotive-workshop-management", "max_forks_repo_forks_event_min_datetime": "2020-10-26T01:46:58.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-26T01:46:58.000Z"}
{"max_stars_count": 2, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 23.4583333333, "max_line_length": 74, "alphanum_fraction": 0.6385435169}
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Input, useField } from '@rocketseat/unform';
import ReactInputMask from 'react-input-mask';

export default function MaskedInput({ name, mask, defaultValue }) {
  const { registerField } = useField(name);

  const [inputValue, setInputValue] = useState('');

  const inputRef = useRef();

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

  useEffect(() => {
    setInputValue(defaultValue);
  }, [defaultValue]);

  return (
    <ReactInputMask
      mask={mask}
      maskChar=" "
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    >
      {() => <Input name={name} type="text" />}
    </ReactInputMask>
  );
}

MaskedInput.propTypes = {
  name: PropTypes.string.isRequired,
  mask: PropTypes.string.isRequired,
  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

MaskedInput.defaultProps = {
  defaultValue: '',
};
