{"size": 790, "ext": "js", "max_stars_repo_path": "src/components/Form/TextField.js", "max_stars_repo_name": "u-wave/web", "max_stars_repo_stars_event_min_datetime": "2016-09-19T14:32:47.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-31T10:35:27.000Z", "max_issues_repo_path": "src/components/Form/TextField.js", "max_issues_repo_name": "u-wave/web", "max_issues_repo_issues_event_min_datetime": "2016-09-20T10:29:23.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T11:07:12.000Z", "max_forks_repo_path": "src/components/Form/TextField.js", "max_forks_repo_name": "u-wave/web", "max_forks_repo_forks_event_min_datetime": "2016-09-20T15:51:36.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-14T05:33:57.000Z"}
{"max_stars_count": 56, "max_issues_count": 722, "max_forks_count": 26, "avg_line_length": 18.3720930233, "max_line_length": 52, "alphanum_fraction": 0.5936708861}
import cx from 'clsx';
import React from 'react';
import PropTypes from 'prop-types';

const {
  useImperativeHandle,
  useRef,
} = React;

const TextField = React.forwardRef(({
  className,
  type = 'text',
  icon,
  ...props
}, ref) => {
  const refInput = useRef(null);
  useImperativeHandle(ref, () => ({
    get value() { return refInput.current.value; },
  }));

  return (
    <div className={cx('TextField', className)}>
      <input
        ref={refInput}
        className="TextField-input"
        type={type}
        {...props}
      />
      {icon ? (
        <div className="TextField-icon">{icon}</div>
      ) : null}
    </div>
  );
});

TextField.propTypes = {
  className: PropTypes.string,
  type: PropTypes.string,
  icon: PropTypes.node,
};

export default TextField;
