{"size": 1921, "ext": "js", "max_stars_repo_path": "deepfence_ui/app/scripts/components/node-details/tag-add-form.js", "max_stars_repo_name": "tuapuikia/ThreatMapper", "max_stars_repo_stars_event_min_datetime": "2020-04-08T17:07:21.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T11:22:16.000Z", "max_issues_repo_path": "deepfence_ui/app/scripts/components/node-details/tag-add-form.js", "max_issues_repo_name": "tuapuikia/ThreatMapper", "max_issues_repo_issues_event_min_datetime": "2020-04-06T15:40:16.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T02:19:34.000Z", "max_forks_repo_path": "deepfence_ui/app/scripts/components/node-details/tag-add-form.js", "max_forks_repo_name": "tuapuikia/ThreatMapper", "max_forks_repo_forks_event_min_datetime": "2020-04-08T21:38:39.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-30T18:04:50.000Z"}
{"max_stars_count": 1281, "max_issues_count": 180, "max_forks_count": 148, "avg_line_length": 23.1445783133, "max_line_length": 143, "alphanum_fraction": 0.5450286309}
import React from 'react';
import {reduxForm, Field} from 'redux-form/immutable';
import Loader from '../common/app-loader/horizontal-dots-loader';

const validate = (values) => {
  const error = {};
  const tag = values.get('tag');
  if (tag && tag.indexOf(',') >= 0) {
    error.tag = 'Comma charater not allowed';
  }
  return error;
};

const renderField = ({
  input,
  type,
  placeholder,
  disabled = false,
  meta:
    {
      touched,
      error,
      warning
    }
}) => (
  <div>
    <div>
      <input {...input} placeholder={placeholder} type={type} disabled={disabled} />
    </div>
    {touched && ((error && <span className="error-message">{error}</span>) || (warning && <span className="warning-message">{warning}</span>))}
  </div>
);

class TagAddForm extends React.PureComponent {
  constructor(props) {
    super(props);
    this.submitClickHandler = this.submitClickHandler.bind(this);
  }

  submitClickHandler(values) {
    const {
      handleSubmit,
      reset,
    } = this.props;
    return handleSubmit(values).then(() => reset());
  }

  render() {
    const {
      submitting,
      pristine,
    } = this.props;
    return (
      <div className="df-modal-form">
        <form onSubmit={this.submitClickHandler} autoComplete="off">
          <div className="form-field">
            <div> Tag Name </div>
            <Field
              name="tag"
              component={renderField}
            />
          </div>
          <div className="form-field">
            <button
              className="primary-btn full-width relative"
              type="submit"
              disabled={submitting || pristine}
             >
              Add tags
              {submitting && <Loader style={{ left: '90%', top: '-136%'}} />}
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  form: 'tag-add',
  validate,
})(TagAddForm);
