feat(mui): allow passing props to composite components.

Author: Hyperkid123

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React from "react";
 import ReactDOM from "react-dom";
-import FormRenderer from '@data-driven-forms/react-form-renderer';
+import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
 
 import Grid from '@material-ui/core/Grid';
 import { componentMapper, FormTemplate } from '../src'
@@ -15,6 +15,16 @@ const theme = createMuiTheme({
       useNextVariants: true,
     },
   });
+
+const compositeMapper = {
+    ...componentMapper,
+    [componentTypes.SWITCH]: {
+        component: componentMapper[componentTypes.SWITCH],
+        FormControlLabelProps: {
+            labelPlacement: 'left'
+        }
+    }
+}
 
 
 const App = () => (
@@ -31,7 +41,7 @@ const App = () => (
             <Grid item xs={12}>
                 <FormRenderer
                     onSubmit={console.log}
-                    componentMapper={componentMapper}
+                    componentMapper={compositeMapper}
                     FormTemplate={props => <FormTemplate {...props} />}
                     schema={demoSchema}
                     onCancel={() => console.log('canceling')}

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

@@ -3,25 +3,27 @@ import PropTypes from 'prop-types';
 
 import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 
 const useFinalFormFieldStyles = makeStyles({
   grid: {
     position: 'relative'
   }
 });
 
-const FormFieldGrid = ({ children, ...props }) => {
+const FormFieldGrid = ({ children, className, ...props }) => {
   const classes = useFinalFormFieldStyles();
 
   return (
-    <Grid xs={12} item style={{ marginBottom: 16, padding: 0 }} className={classes.grid} {...props}>
+    <Grid xs={12} item className={clsx(classes.grid, className)} {...props}>
       {children}
     </Grid>
   );
 };
 
 FormFieldGrid.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 
 export default FormFieldGrid;

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

@@ -1,21 +1,27 @@
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { Grid, Checkbox, FormControlLabel, FormLabel, FormGroup, FormControl, FormHelperText } from '@material-ui/core';
 
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 import { validationError } from './helpers';
 
-const FinalCheckbox = ({ isDisabled, label, ...props }) => (
-  <FormControlLabel
-    control={
-      <Checkbox {...props} disabled={isDisabled}>
-        {label}
-      </Checkbox>
-    }
-    label={label}
-  />
-);
+const CheckboxContext = createContext({});
+
+const FinalCheckbox = ({ isDisabled, label, ...props }) => {
+  const { FormControlLabelProps, CheckboxProps } = useContext(CheckboxContext);
+  return (
+    <FormControlLabel
+      {...FormControlLabelProps}
+      control={
+        <Checkbox {...props} {...CheckboxProps} disabled={isDisabled}>
+          {label}
+        </Checkbox>
+      }
+      label={label}
+    />
+  );
+};
 
 FinalCheckbox.propTypes = {
   isDisabled: PropTypes.bool,
@@ -24,13 +30,13 @@ FinalCheckbox.propTypes = {
 
 const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description }) => {
   const invalid = validationError(meta, validateOnMount);
-
+  const { FormFieldGridProps, FormControlProps, FormLabelProps, FormGroupProps, FormHelperTextProps } = useContext(CheckboxContext);
   return (
-    <Grid container>
-      <FormControl required={isRequired} error={!!invalid} component="fieldset">
-        <FormLabel>{label}</FormLabel>
-        <FormGroup>{children}</FormGroup>
-        {(invalid || helperText || description) && <FormHelperText>{invalid || helperText || description}</FormHelperText>}
+    <Grid container {...FormFieldGridProps}>
+      <FormControl required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
+        <FormLabel {...FormLabelProps}>{label}</FormLabel>
+        <FormGroup {...FormGroupProps}>{children}</FormGroup>
+        {(invalid || helperText || description) && <FormHelperText {...FormHelperTextProps}>{invalid || helperText || description}</FormHelperText>}
       </FormControl>
     </Grid>
   );
@@ -40,12 +46,43 @@ Wrapper.propTypes = {
   ...wrapperProps
 };
 
-const MultipleChoiceList = (props) => <MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />;
+const MultipleChoiceList = ({
+  FormControlProps,
+  FormLabelProps,
+  FormGroupProps,
+  FormHelperTextProps,
+  FormFieldGridProps,
+  FormControlLabelProps,
+  CheckboxProps,
+  ...props
+}) => (
+  <CheckboxContext.Provider
+    value={{ FormControlProps, FormLabelProps, FormGroupProps, FormHelperTextProps, FormFieldGridProps, FormControlLabelProps, CheckboxProps }}
+  >
+    <MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />
+  </CheckboxContext.Provider>
+);
 
 MultipleChoiceList.propTypes = {
   input: PropTypes.shape({
     name: PropTypes.string.isRequired
-  })
+  }),
+  FormFieldGridProps: PropTypes.object,
+  FormControlProps: PropTypes.object,
+  FormGroupProps: PropTypes.object,
+  FormControlLabelProps: PropTypes.object,
+  CheckboxProps: PropTypes.object,
+  FormLabelProps: PropTypes.object,
+  FormHelperTextProps: PropTypes.object
+};
+MultipleChoiceList.defaultProps = {
+  FormFieldGridProps: {},
+  FormControlProps: {},
+  FormGroupProps: {},
+  FormControlLabelProps: {},
+  CheckboxProps: {},
+  FormLabelProps: {},
+  FormHelperTextProps: {}
 };
 
 export default MultipleChoiceList;

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

@@ -9,21 +9,40 @@ 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 } = useFieldApi({
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    label,
+    helperText,
+    description,
+    validateOnMount,
+    meta,
+    FormFieldGridProps,
+    FormControlProps,
+    FormGroupProps,
+    FormControlLabelProps,
+    CheckboxProps,
+    FormLabelProps,
+    FormHelperTextProps
+  } = useFieldApi({
     ...props,
     type: 'checkbox'
   });
   const invalid = validationError(meta, validateOnMount);
   const text = invalid || helperText || description;
 
   return (
-    <FormFieldGrid>
-      <FormControl required={isRequired} error={!!invalid} component="fieldset">
-        <FormGroup>
+    <FormFieldGrid {...FormFieldGridProps}>
+      <FormControl required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
+        <FormGroup {...FormGroupProps}>
           <FormControlLabel
+            {...FormControlLabelProps}
             control={
               <MUICheckbox
                 {...input}
+                {...CheckboxProps}
                 disabled={isDisabled || isReadOnly}
                 value={input.name}
                 inputProps={{
@@ -32,9 +51,9 @@ export const SingleCheckbox = (props) => {
               />
             }
             disabled={isDisabled || isReadOnly}
-            label={<FormLabel>{label}</FormLabel>}
+            label={<FormLabel {...FormLabelProps}>{label}</FormLabel>}
           />
-          {(invalid || text) && <FormHelperText>{invalid || text}</FormHelperText>}
+          {(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
         </FormGroup>
       </FormControl>
     </FormFieldGrid>
@@ -50,7 +69,24 @@ SingleCheckbox.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   description: PropTypes.node,
-  validateOnMount: PropTypes.bool
+  validateOnMount: PropTypes.bool,
+  FormFieldGridProps: PropTypes.object,
+  FormControlProps: PropTypes.object,
+  FormGroupProps: PropTypes.object,
+  FormControlLabelProps: PropTypes.object,
+  CheckboxProps: PropTypes.object,
+  FormLabelProps: PropTypes.object,
+  FormHelperTextProps: PropTypes.object
+};
+
+SingleCheckbox.defaultProps = {
+  FormFieldGridProps: {},
+  FormControlProps: {},
+  FormGroupProps: {},
+  FormControlLabelProps: {},
+  CheckboxProps: {},
+  FormLabelProps: {},
+  FormHelperTextProps: {}
 };
 
 const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);

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

@@ -20,13 +20,16 @@ const DatePicker = (props) => {
     description,
     validateOnMount,
     meta,
-    locale = 'en'
+    locale = 'en',
+    FormFieldGridProps,
+    MuiPickersUtilsProviderProps,
+    DatePickerProps
   } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
-    <FormFieldGrid>
-      <MuiPickersUtilsProvider locale={locale} utils={MomentUtils}>
+    <FormFieldGrid {...FormFieldGridProps}>
+      <MuiPickersUtilsProvider locale={locale} utils={MomentUtils} {...MuiPickersUtilsProviderProps}>
         <MUIDatePicker
           fullWidth
           margin="normal"
@@ -39,6 +42,7 @@ const DatePicker = (props) => {
           readOnly={isReadOnly}
           {...input}
           value={input.value || null}
+          {...DatePickerProps}
         />
       </MuiPickersUtilsProvider>
     </FormFieldGrid>
@@ -56,7 +60,16 @@ DatePicker.propTypes = {
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
   locale: PropTypes.string,
-  description: PropTypes.node
+  description: PropTypes.node,
+  FormFieldGridProps: PropTypes.object,
+  MuiPickersUtilsProviderProps: PropTypes.object,
+  DatePickerProps: PropTypes.object
+};
+
+DatePicker.defaultProps = {
+  FormFieldGridProps: {},
+  MuiPickersUtilsProviderProps: {},
+  DatePickerProps: {}
 };
 
 export default DatePicker;