Reformatting form components, drop redux-form dependency

Author: markusjwetzel

src/Form/Field.js

@@ -16,14 +16,8 @@ function Field({ children, info, meta }) {
   return (
     <fieldset className="form-group">
       {children}
-      {meta.error &&
-        <div className="form-text text-danger">
-          {meta.error}
-        </div>}
-      {info &&
-        <div className="form-text text-muted">
-          {info}
-        </div>}
+      {meta.error && <div className="form-text text-danger">{meta.error}</div>}
+      {info && <div className="form-text text-muted">{info}</div>}
     </fieldset>
   );
 }

src/Form/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Field } from 'redux-form';
+import { Field } from 'formik';
 import FormText from './FormText';
 import FormInput from './FormInput';
 import FormPicker from './FormPicker';

src/Form/FormCheckbox.js

@@ -19,7 +19,9 @@ const defaultProps = {
   size: null,
 };
 
-function FormCheckbox({ legend, label, info, size, input, meta }) {
+function FormCheckbox({
+  legend, label, info, size, input, meta,
+}) {
   const classes = cx('custom-control custom-checkbox', {
     'custom-control-sm': size === 'sm',
   });
@@ -29,10 +31,7 @@ function FormCheckbox({ legend, label, info, size, input, meta }) {
 
   return (
     <Field meta={meta} info={info}>
-      {legend &&
-        <legend className="form-group-legend">
-          {legend}
-        </legend>}
+      {legend && <legend className="form-group-legend">{legend}</legend>}
       <label className={classes} htmlFor={`${meta.form}-${input.name}`}>
         <input
           type="checkbox"
@@ -47,9 +46,7 @@ function FormCheckbox({ legend, label, info, size, input, meta }) {
           className={inputClasses}
         />
         <div className="custom-control-indicator" />
-        <div className="custom-control-description">
-          {label}
-        </div>
+        <div className="custom-control-description">{label}</div>
       </label>
     </Field>
   );

src/Form/FormChoice.js

@@ -21,7 +21,9 @@ const defaultProps = {
   size: null,
 };
 
-function FormChoice({ legend, options, info, multiple, size, input, meta }) {
+function FormChoice({
+  legend, options, info, multiple, size, input, meta,
+}) {
   let index = 0;
 
   const getIndex = () => index;
@@ -40,18 +42,15 @@ function FormChoice({ legend, options, info, multiple, size, input, meta }) {
 
   return (
     <Field meta={meta} info={info}>
-      {legend &&
-        <legend className="form-group-legend">
-          {legend}
-        </legend>}
+      {legend && <legend className="form-group-legend">{legend}</legend>}
       <div className="custom-controls-stacked">
-        {options.map(option =>
-          (<label
+        {options.map(option => (
+          <label
             key={getIndex()}
             className={classes}
             htmlFor={`${meta.form}-${input.name}-${getIndex()}`}
           >
-            {!multiple &&
+            {!multiple && (
               <input
                 type="radio"
                 id={`${meta.form}-${input.name}-${getIndex()}`}
@@ -67,8 +66,9 @@ function FormChoice({ legend, options, info, multiple, size, input, meta }) {
                   input.onBlur(input.value);
                 }}
                 className={inputClasses}
-              />}
-            {multiple &&
+              />
+            )}
+            {multiple && (
               <input
                 type="checkbox"
                 id={`${meta.form}-${input.name}-${getIndex()}`}
@@ -90,14 +90,13 @@ function FormChoice({ legend, options, info, multiple, size, input, meta }) {
                   input.onBlur(input.value);
                 }}
                 className={inputClasses}
-              />}
+              />
+            )}
             <div className="custom-control-indicator" />
-            <div className="custom-control-description">
-              {option.label}
-            </div>
+            <div className="custom-control-description">{option.label}</div>
             {increaseIndex()}
-          </label>),
-        )}
+          </label>
+        ))}
       </div>
     </Field>
   );

src/Form/FormDatePicker.js

@@ -101,7 +101,9 @@ class FormDatePicker extends React.Component {
   };
 
   render() {
-    const { label, placeholder, info, size, input, meta } = this.props;
+    const {
+      label, placeholder, info, size, input, meta,
+    } = this.props;
     const labelClasses = cx('form-control-label', { active: meta.active });
     const classes = cx('form-datepicker Select Select--single', {
       'is-invalid': meta.error,
@@ -118,27 +120,26 @@ class FormDatePicker extends React.Component {
 
     return (
       <Field meta={meta} info={info}>
-        {label &&
+        {label && (
           <label htmlFor={`${meta.form}-${input.name}`} className={labelClasses}>
             {label}
-          </label>}
+          </label>
+        )}
         <div className={classes}>
           <div
             className={controlClasses}
             onMouseDown={this.onToggleMouseDown}
             onKeyDown={this.onToggleKeyDown}
           >
             <span className="Select-multi-value-wrapper">
-              {!input.value &&
-                <div className="Select-placeholder">
-                  {placeholder}
-                </div>}
-              {input.value &&
+              {!input.value && <div className="Select-placeholder">{placeholder}</div>}
+              {input.value && (
                 <div className="Select-value">
                   <span className="Select-value-label" role="option" aria-selected="true">
                     {input.value ? pickedDate.toLocaleDateString('en') : ''}
                   </span>
-                </div>}
+                </div>
+              )}
               {/* TODO
                 * aria-owns should be the id of the date list element
                 * aria-activedescendant should be the id of the currently selected day element
@@ -167,7 +168,7 @@ class FormDatePicker extends React.Component {
               />
             </span>
           </div>
-          {this.state.isOpen &&
+          {this.state.isOpen && (
             <div
               ref={(menu) => {
                 this.menu = menu;
@@ -188,7 +189,8 @@ class FormDatePicker extends React.Component {
                 onDayKeyDown={() => {}}
                 enableOutsideDays
               />
-            </div>}
+            </div>
+          )}
         </div>
       </Field>
     );

src/Form/FormInput.js

@@ -13,6 +13,7 @@ const propTypes = {
   // redux form props
   input: PropTypes.object.isRequired,
   meta: PropTypes.object.isRequired,
+  autoFocus: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -22,23 +23,28 @@ const defaultProps = {
   size: null,
   info: null,
   multiline: false,
+  autoFocus: false,
 };
 
-function FormInput({ label, placeholder, type, size, info, input, meta, multiline }) {
+function FormInput({
+  label, placeholder, type, size, info, input, meta, multiline, autoFocus,
+}) {
   const labelClasses = cx('form-control-label', { active: meta.active });
 
   const inputClasses = cx('form-control', {
     'is-invalid': meta.error,
     'form-control-sm': size === 'sm',
   });
 
+  /* eslint-disable jsx-a11y/no-autofocus */
   return (
     <Field meta={meta} info={info}>
-      {label &&
+      {label && (
         <label htmlFor={`${meta.form}-${input.name}`} className={labelClasses}>
           {label}
-        </label>}
-      {!multiline &&
+        </label>
+      )}
+      {!multiline && (
         <input
           type={type}
           id={`${meta.form}-${input.name}`}
@@ -51,8 +57,10 @@ function FormInput({ label, placeholder, type, size, info, input, meta, multilin
           }}
           placeholder={placeholder}
           className={inputClasses}
-        />}
-      {multiline &&
+          autoFocus={autoFocus}
+        />
+      )}
+      {multiline && (
         <textarea
           id={`${meta.form}-${input.name}`}
           name={input.name}
@@ -65,9 +73,12 @@ function FormInput({ label, placeholder, type, size, info, input, meta, multilin
           placeholder={placeholder}
           rows="7"
           className={inputClasses}
-        />}
+          autoFocus={autoFocus}
+        />
+      )}
     </Field>
   );
+  /* eslint-enable */
 }
 
 FormInput.propTypes = propTypes;

src/Form/FormPicker.js

@@ -26,7 +26,9 @@ const defaultProps = {
   multiple: false,
 };
 
-function FormPicker({ label, size, options, info, input, meta, multiple, clearable, searchable }) {
+function FormPicker({
+  label, size, options, info, input, meta, multiple, clearable, searchable,
+}) {
   const labelClasses = cx('form-control-label', { active: meta.active });
 
   const classes = cx('form-picker', {
@@ -36,10 +38,11 @@ function FormPicker({ label, size, options, info, input, meta, multiple, clearab
 
   return (
     <Field meta={meta} info={info}>
-      {label &&
+      {label && (
         <label htmlFor={`${meta.form}-${input.name}`} className={labelClasses}>
           {label}
-        </label>}
+        </label>
+      )}
       <Select
         inputProps={{ id: `${meta.form}-${input.name}` }}
         instanceId={`${meta.form}-${input.name}`}

src/Form/FormSelect.js

@@ -19,18 +19,17 @@ const defaultProps = {
   info: null,
 };
 
-function FormSelect({ legend, size, info, input, meta, children }) {
+function FormSelect({
+  legend, size, info, input, meta, children,
+}) {
   const selectClasses = cx('custom-select', {
     'is-invalid': meta.error,
     'custom-control-sm': size === 'sm',
   });
 
   return (
     <Field meta={meta} info={info}>
-      {legend &&
-        <legend className="form-group-legend">
-          {legend}
-        </legend>}
+      {legend && <legend className="form-group-legend">{legend}</legend>}
       <select {...input} className={selectClasses}>
         {children}
       </select>

src/Form/FormText.js

@@ -25,11 +25,7 @@ const defaultProps = {
 function FormText({ children, variant, className }) {
   const classes = cx('form-text', className, `text-${variant}`);
 
-  return (
-    <p className={classes}>
-      {children}
-    </p>
-  );
+  return <p className={classes}>{children}</p>;
 }
 
 FormText.propTypes = propTypes;