Merge pull request #692 from sharetribe/use-fieldarray

Use FieldArray to add errors to checkbox groups

src/components/FieldGroupCheckbox/FieldGroupCheckbox.js

@@ -8,14 +8,19 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { arrayOf, bool, node, shape, string } from 'prop-types';
 import classNames from 'classnames';
+import { FieldArray } from 'redux-form';
+import { FieldCheckbox, ValidationError } from '../../components';
 
-import { FieldCheckbox } from '../../components';
 import css from './FieldGroupCheckbox.css';
 
-const FieldGroupCheckbox = props => {
-  const { rootClassName, className, id, name, label, options, twoColumns } = props;
+const FieldCheckboxRenderer = props => {
+  const { className, rootClassName, label, twoColumns, id, options, fields, meta } = props;
+  const name = fields.name;
+
+  // FieldArray doesn't have touched prop, so we fake it to ValidationError
+  const touched = !!(meta.dirty || meta.submitFailed);
 
   const classes = classNames(rootClassName || css.root, className);
   const listClasses = twoColumns ? classNames(css.list, css.twoColumns) : css.list;
@@ -32,25 +37,23 @@ const FieldGroupCheckbox = props => {
             </li>
           );
         })}
+        <ValidationError fieldMeta={{ ...meta, touched }} />
       </ul>
     </fieldset>
   );
 };
 
-FieldGroupCheckbox.defaultProps = {
+FieldCheckboxRenderer.defaultProps = {
   rootClassName: null,
   className: null,
   label: null,
   twoColumns: false,
 };
 
-const { arrayOf, bool, node, shape, string } = PropTypes;
-
-FieldGroupCheckbox.propTypes = {
+FieldCheckboxRenderer.propTypes = {
   rootClassName: string,
   className: string,
   id: string.isRequired,
-  name: string.isRequired,
   label: node,
   options: arrayOf(
     shape({
@@ -61,4 +64,12 @@ FieldGroupCheckbox.propTypes = {
   twoColumns: bool,
 };
 
+const FieldGroupCheckbox = props => <FieldArray component={FieldCheckboxRenderer} {...props} />;
+
+// Name and component are required fields for FieldArray.
+// Component-prop we define in this file, name needs to be passed in
+FieldGroupCheckbox.propTypes = {
+  name: string.isRequired,
+};
+
 export default FieldGroupCheckbox;

src/util/validators.js

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import { types } from 'sharetribe-sdk';
+import { toPairs } from 'lodash';
 
 const { LatLng } = types;
 
@@ -21,6 +22,16 @@ export const requiredAndNonEmptyString = message => value => {
   return value && typeof value === 'string' && value.trim() ? VALID : message;
 };
 
+export const requiredFieldArrayCheckbox = message => value => {
+  if (!value) {
+    return message;
+  }
+
+  const entries = toPairs(value);
+  const hasSelectedValues = entries.filter(e => !!e[1]).length > 0;
+  return hasSelectedValues ? VALID : message;
+};
+
 export const minLength = (message, minimumLength) => value => {
   return value && value.length >= minimumLength ? VALID : message;
 };