fix(suir): added sub components customization API

Author: Hyperkid123

packages/suir-component-mapper/demo/index.js

@@ -8,7 +8,6 @@ import fieldArraySchema from './demo-schemas/field-array-schema';
 
 import wizardSchema from './demo-schemas/wizard-schema';
 import { Button } from 'semantic-ui-react';
-import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
 
 const compositeMapper = {
   ...componentMapper,
@@ -17,40 +16,6 @@ const compositeMapper = {
   }
 };
 
-const dualSchema = {
-  fields: [
-    {
-      component: componentTypes.DUAL_LIST_SELECT,
-      name: 'dual-list',
-      label: 'Dual list',
-      isRquired: true,
-      validate: [{ type: validatorTypes.REQUIRED }],
-      options: [
-        {
-          value: 'cats',
-          label: 'cats'
-        },
-        {
-          value: 'cats_1',
-          label: 'cats_1'
-        },
-        {
-          value: 'cats_2',
-          label: 'cats_2'
-        },
-        {
-          value: 'zebras',
-          label: 'zebras'
-        },
-        {
-          value: 'pigeons',
-          label: 'pigeons'
-        }
-      ]
-    }
-  ]
-};
-
 const App = () => {
   const [, setSchema] = useState(wizardSchema);
 
@@ -70,7 +35,7 @@ const App = () => {
             onSubmit={console.log}
             componentMapper={compositeMapper}
             FormTemplate={(props) => <FormTemplate {...props} showFormControls={true} />}
-            schema={dualSchema}
+            schema={fieldArraySchema}
             onCancel={() => console.log('canceling')}
           />
         </div>

packages/suir-component-mapper/src/common/form-field-grid.js

@@ -11,20 +11,21 @@ const useStyles = createUseStyles({
   }
 });
 
-const FormFieldGrid = ({ className, children, helperText }) => {
+const FormFieldGrid = ({ className, children, helperText, HelperTextProps }) => {
   const classes = useStyles();
   return (
     <div className={clsx(classes.root, className)}>
       {children}
-      {helperText && <HelperText>{helperText}</HelperText>}
+      {helperText && <HelperText {...HelperTextProps}>{helperText}</HelperText>}
     </div>
   );
 };
 
 FormFieldGrid.propTypes = {
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  helperText: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+  helperText: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  HelperTextProps: PropTypes.object
 };
 
 export default FormFieldGrid;

packages/suir-component-mapper/src/common/multiple-choice-list.js

@@ -46,18 +46,35 @@ FinalCheckbox.propTypes = {
 const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText }) => {
   const invalid = validationError(meta, validateOnMount);
   const classes = useStyles();
+  const {
+    FormFieldGridProps,
+    FormFieldProps,
+    HelperTextProps,
+    OptionsListProps: { className: optionsClassName, ...OptionsListProps },
+    HeaderProps: { className: headerClassname, ...HeaderProps }
+  } = useContext(CheckboxContext);
   return (
-    <FormFieldGrid helperText={helperText}>
+    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormField
+        {...FormFieldProps}
         {...(invalid && {
           error: {
             content: meta.error,
             pointing: 'left'
           }
         })}
-        label={<Header className={clsx({ [classes.header]: true, [classes.error]: invalid, [classes.required]: isRequired })}>{label}</Header>}
+        label={
+          <Header
+            {...HeaderProps}
+            className={clsx(headerClassname, { [classes.header]: true, [classes.error]: invalid, [classes.required]: isRequired })}
+          >
+            {label}
+          </Header>
+        }
       />
-      <div className={classes.items}>{children}</div>
+      <div {...OptionsListProps} className={clsx(classes.items, optionsClassName)}>
+        {children}
+      </div>
     </FormFieldGrid>
   );
 };
@@ -66,10 +83,26 @@ Wrapper.propTypes = {
   ...wrapperProps
 };
 
-const MultipleChoiceList = (props) => (
-  <CheckboxContext.Provider value={{ props }}>
+const MultipleChoiceList = ({ FormFieldGridProps, FormFieldProps, HeaderProps, OptionsListProps, HelperTextProps, ...props }) => (
+  <CheckboxContext.Provider value={{ props, FormFieldGridProps, FormFieldProps, HeaderProps, OptionsListProps, HelperTextProps }}>
     <MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />
   </CheckboxContext.Provider>
 );
 
+MultipleChoiceList.propTypes = {
+  FormFieldGridProps: PropTypes.object,
+  FormFieldProps: PropTypes.object,
+  HeaderProps: PropTypes.object,
+  OptionsListProps: PropTypes.object,
+  HelperTextProps: PropTypes.object
+};
+
+MultipleChoiceList.defaultProps = {
+  FormFieldGridProps: {},
+  FormFieldProps: {},
+  HeaderProps: {},
+  OptionsListProps: {},
+  HelperTextProps: {}
+};
+
 export default MultipleChoiceList;

packages/suir-component-mapper/src/files/checkbox.js

@@ -9,14 +9,27 @@ import MultipleChoiceList from '../common/multiple-choice-list';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 export const SingleCheckbox = (props) => {
-  const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta, ...rest } = useFieldApi({
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    label,
+    helperText,
+    description,
+    validateOnMount,
+    meta,
+    FormFieldGridProps,
+    HelperTextProps,
+    ...rest
+  } = useFieldApi({
     ...props,
     type: 'checkbox'
   });
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText}>
+    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormCheckbox
         {...input}
         required={isRequired}
@@ -46,13 +59,30 @@ SingleCheckbox.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   description: PropTypes.node,
-  validateOnMount: PropTypes.bool
+  validateOnMount: PropTypes.bool,
+  /** Sub components customization API */
+  FormFieldGridProps: PropTypes.object,
+  HelperTextProps: PropTypes.object
 };
 
 const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);
 
 Checkbox.propTypes = {
-  options: PropTypes.array
+  options: PropTypes.array,
+  /** Sub components customization API */
+  FormFieldGridProps: PropTypes.object,
+  FormFieldProps: PropTypes.object,
+  HeaderProps: PropTypes.object,
+  OptionsListProps: PropTypes.object,
+  HelperTextProps: PropTypes.object
+};
+
+Checkbox.defaultProps = {
+  FormFieldGridProps: {},
+  FormFieldProps: {},
+  HeaderProps: {},
+  OptionsListProps: {},
+  HelperTextProps: {}
 };
 
 export default Checkbox;

packages/suir-component-mapper/src/files/date-picker.js

@@ -8,11 +8,24 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormField from '../common/form-field';
 
 const DatePicker = (props) => {
-  const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, validateOnMount, meta } = useFieldApi(props);
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    placeholder,
+    isRequired,
+    label,
+    helperText,
+    validateOnMount,
+    meta,
+    FormFieldGridProps,
+    HelperTextProps,
+    ...rest
+  } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid helperText={helperText}>
+    <FormFieldGrid helperText={helperText} HelperTextProps={HelperTextProps} {...FormFieldGridProps}>
       <FormField
         label={label}
         {...input}
@@ -23,6 +36,7 @@ const DatePicker = (props) => {
             content: meta.error
           }
         }
+        {...rest}
         control={(props) => <input {...props} readOnly={isReadOnly} disabled={isDisabled} placeholder={placeholder} />}
       />
     </FormFieldGrid>
@@ -40,7 +54,15 @@ DatePicker.propTypes = {
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
   locale: PropTypes.string,
-  description: PropTypes.node
+  description: PropTypes.node,
+  /** Sub components customization API */
+  FormFieldGridProps: PropTypes.object,
+  HelperTextProps: PropTypes.object
+};
+
+DatePicker.defaultProps = {
+  FormFieldGridProps: {},
+  HelperTextProps: {}
 };
 
 export default DatePicker;