Convert PF4 multiple choice list to use common

Author: rvsia

packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js

@@ -1,64 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox, FormGroup } from '@patternfly/react-core';
-import { composeValidators } from '@data-driven-forms/react-form-renderer';
+import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
-const propTypes = {
-  validate: PropTypes.oneOfType([ PropTypes.array, PropTypes.func ]),
-  FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
-  name: PropTypes.string.isRequired,
+const FinalCheckbox = (props) => (
+  <Checkbox isChecked={ props.checked } { ...props }/>
+);
+
+FinalCheckbox.propTypes = {
+  checked: PropTypes.bool,
 };
 
-const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
-  <FieldProvider
+const Wrapper = ({ showError, isRequired, helperText, label, meta, children, rest }) =>(
+  <FormGroup
+    label={ label }
+    fieldId={ rest.id || rest.key || rest.name }
+    isValid={ !showError }
+    isRequired={ isRequired }
+    helperText={ helperText }
+    helperTextInvalid={ meta.error }
+  >
+    { children }
+  </FormGroup>
+);
+
+Wrapper.propTypes = {
+  ...wrapperProps,
+};
+
+const MultipleChoiceList = (props) => (
+  <MultipleChoiceListCommon
     { ...props }
-    validate={ composeValidators(props.validate || []) }
-    render={ ({
-      label,
-      isRequired,
-      helperText,
-      meta,
-      options,
-      isDisabled,
-      isReadOnly,
-      ...rest
-    }) => {
-      const { error, touched } = meta;
-      const showError = touched && error;
-      const groupValues = rest.input.value;
-      return (
-        <FormGroup label={ label } fieldId={ rest.id || rest.key || rest.name } isValid={ showError } >
-          { options.map(option =>
-            (<FieldProvider
-              formOptions={ rest.formOptions }
-              id={ `${rest.id}-${option.value}` }
-              key={ option.value }
-              { ...option }
-              name={ props.name }
-              type="checkbox"
-              render={ ({ input, meta, formOptions, componentType, ...rest }) => {
-                const indexValue = groupValues.indexOf(input.value);
-                return (
-                  <Checkbox
-                    label={ rest.label }
-                    aria-label={ option['aria-label'] || option.label }
-                    isChecked={ input.checked }
-                    { ...input }
-                    { ...rest }
-                    isDisabled={ isDisabled || isReadOnly }
-                    onChange={ () => (indexValue === -1
-                      ? input.onChange([ ...groupValues, input.value ])
-                      : input.onChange([ ...groupValues.slice(0, indexValue), ...groupValues.slice(indexValue + 1) ])) }
-                  />
-                );
-              } }
-            />)) }
-        </FormGroup>
-      );
-    } }
+    Wrapper={ Wrapper }
+    Checkbox={ FinalCheckbox }
   />
 );
 
-MultipleChoiceList.propTypes = propTypes;
-
 export default MultipleChoiceList;