{"size": 1085, "ext": "js", "max_stars_repo_path": "src/app/commons/TextInputForm/TextInputField.js", "max_stars_repo_name": "Judge-Girl/Judge-Girl-CMS", "max_stars_repo_stars_event_min_datetime": "2021-04-08T16:34:42.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-28T07:46:58.000Z", "max_issues_repo_path": "src/app/commons/TextInputForm/TextInputField.js", "max_issues_repo_name": "Judge-Girl/Judge-Girl-CMS", "max_issues_repo_issues_event_min_datetime": "2021-03-07T16:23:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-02T15:03:53.000Z", "max_forks_repo_path": "src/app/commons/TextInputForm/TextInputField.js", "max_forks_repo_name": "Judge-Girl/Judge-Girl-CMS", "max_forks_repo_forks_event_min_datetime": "2021-03-17T10:46:01.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-17T10:46:01.000Z"}
{"max_stars_count": 7, "max_issues_count": 171, "max_forks_count": 1, "avg_line_length": 27.125, "max_line_length": 80, "alphanum_fraction": 0.5843317972}
import React from 'react';
import {useRef, useState} from 'react';
import './TextInputForm.css';


const TextInputField = ({placeholder, onSubmit, buttonTitle = '+', style}) => {
  const [text, setText] = useState('');
  const inputRef = useRef();

  const onFormSubmit = e => {
    e.preventDefault();
    onSubmit(text);
    setText('');
    inputRef.current.focus();
  };

  const onChangeInput = e => setText(e.target.value);

  return (
    <div className="text-input-form">
      <form className="tag-form"
        onSubmit={onFormSubmit} style={{display: 'flex', alignItems: 'center'}}>
        <p style={{display: 'table-cell', ...style}}>
          <input type='text' name="text" className="tag-input control"
            ref={inputRef}
            placeholder={placeholder}
            value={text} onChange={onChangeInput}
            style={{width: '100%'}}/>
        </p>
        <button className="control text-item-remove-button"
          style={{cursor: 'pointer'}}>
          {buttonTitle}
        </button>
      </form>
    </div>
  );
};

export {TextInputField};
