{"size": 1648, "ext": "js", "max_stars_repo_path": "src/lib/exports/components/form/FetchFormItem.js", "max_stars_repo_name": "fetchforms/react-client", "max_stars_repo_stars_event_min_datetime": "2022-02-10T21:00:51.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-12T22:18:29.000Z", "max_issues_repo_path": "src/lib/exports/components/form/FetchFormItem.js", "max_issues_repo_name": "fetchforms/react-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/lib/exports/components/form/FetchFormItem.js", "max_forks_repo_name": "fetchforms/react-client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.0163934426, "max_line_length": 73, "alphanum_fraction": 0.5485436893}
import React from 'react';
import { Field } from 'react-final-form';
import FetchFormCheckbox from './fields/FetchFormCheckbox';
import FetchFormRadio from './fields/FetchFormRadio';
import FetchFormSelect from './fields/FetchFormSelect';
import FetchFormInput from './fields/FetchFormInput';
import FetchFormTextarea from './fields/FetchFormTextarea';

const FetchFormItem = ({ formItem }) => {
  const chooseField = (input) => {
    switch (formItem.fieldType) {
      case 'select':
        return (
          <FetchFormSelect
            label={formItem.label}
            options={formItem.options}
            html={input}
          />
        );
      case 'checkbox':
        return <FetchFormCheckbox label={formItem.label} html={input} />;
      case 'radio':
        return (
          <FetchFormRadio
            label={formItem.label}
            options={formItem.options}
            fieldName={formItem.fieldName}
            html={input}
          />
        );
      case 'textarea':
        return <FetchFormTextarea label={formItem.label} html={input} />;
      default:
        return (
          <FetchFormInput
            label={formItem.label}
            html={input}
            format={formItem.format}
          />
        );
    }
  };

  return (
    <div className='fetch-form-item'>
      <Field {...formItem.fieldHtml}>
        {({ input, meta }) => (
          <>
            {chooseField(input)}
            {meta.error && meta.touched && (
              <div className='fetch-error-msg'>{meta.error}</div>
            )}
          </>
        )}
      </Field>
    </div>
  );
};

export default FetchFormItem;
