Add field types checkbox and checkboxes

Author: gocreating

src/common/components/forms/user/RegisterForm.js

@@ -27,6 +27,10 @@ const validate = (values) => {
     errors.password = 'Required';
   }
 
+  if (!values.isAgreeTerms) {
+    errors.isAgreeTerms = 'Required';
+  }
+
   if (configs.recaptcha && !values.recaptcha) {
     errors.recaptcha = 'Required';
   }
@@ -100,6 +104,30 @@ class RegisterForm extends Component {
           type="password"
           placeholder="Password"
         />
+        <Field
+          label="Skills"
+          name="skills"
+          component={FormField}
+          type="checkboxes"
+          style={{float: 'left', paddingRight: 20}}
+          options={[{
+            label: 'Nodejs',
+            value: 'NODEJS',
+          }, {
+            label: 'Reactjs',
+            value: 'REACTJS',
+          }, {
+            label: 'Redux',
+            value: 'REDUX',
+          }]}
+        />
+        <Field
+          label=" "
+          name="isAgreeTerms"
+          component={FormField}
+          type="checkbox"
+          text={<span>I agree the <a href="#">terms</a></span>}
+        />
         <Field
           label=" "
           name="recaptcha"

src/common/components/utils/BsForm.js

@@ -82,6 +82,47 @@ let BsFormField = ({
       <pre>Recaptcha is disabled</pre>
     );
     /* eslint-enable */
+  } else if (type === 'checkbox') {
+    formControl = (
+      <div className="checkbox">
+        <label>
+          <input
+            type="checkbox"
+            {...input}
+            {...rest}
+          /> {text}
+        </label>
+      </div>
+    );
+  } else if (type === 'checkboxes') {
+    // ref:
+    //  - <https://github.com/erikras/redux-form/issues/1037>
+    formControl = (
+      options.map((option, index) => (
+        <div className="checkbox" key={option.value} {...rest}>
+          <label>
+            <input
+              type="checkbox"
+              name={`${input.name}[${index}]`}
+              value={option.value}
+              checked={input.value.indexOf(option.value) !== -1}
+              onChange={event => {
+                let newValue = [...input.value];
+
+                if (event.target.checked) {
+                  newValue.push(option.value);
+                } else {
+                  newValue.splice(newValue.indexOf(option.value), 1);
+                }
+
+                return input.onChange(newValue);
+              }}
+            />
+            {option.label}
+          </label>
+        </div>
+      ))
+    );
   } else if (type === 'radiobutton') {
     // ref: <https://github.com/erikras/redux-form/issues/1857#issuecomment-249890206>
     formControl = (