Merge pull request #833 from rvsia/muiSubformCustomization

fix(mui): allow to customize subform

Author: Hyperkid123

packages/mui-component-mapper/src/files/sub-form.d.ts

@@ -1,10 +1,16 @@
 import { Field } from "@data-driven-forms/react-form-renderer";
+import { GridProps, TypographyProps } from "@material-ui/core";
 import { ReactNode } from "react";
 
 export interface SubFormProps {
   fields: Field[] | Field;
-  title: ReactNode;
-  description: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  TitleGridProps?: GridProps;
+  TitleProps?: TypographyProps;
+  DescriptionProps?: TypographyProps;
+  DescriptionGridProps?: GridProps;
+  ItemsGridProps?: GridProps;
 }
 
 declare const SubForm: React.ComponentType<SubFormProps>;

packages/mui-component-mapper/src/files/sub-form.js

@@ -12,23 +12,38 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const SubForm = ({ fields, title, description, component, ...rest }) => {
+const SubForm = ({
+  fields,
+  title,
+  description,
+  component,
+  TitleGridProps,
+  TitleProps,
+  DescriptionProps,
+  DescriptionGridProps,
+  ItemsGridProps,
+  ...rest
+}) => {
   const { renderForm } = useFormApi();
   const classes = useStyles();
 
   return (
     <Grid item xs={12} container className={classes.grid} {...rest}>
       {title && (
-        <Grid item xs={12}>
-          <Typography variant="h5">{title}</Typography>
+        <Grid item xs={12} {...TitleGridProps}>
+          <Typography variant="h5" {...TitleProps}>
+            {title}
+          </Typography>
         </Grid>
       )}
       {description && (
-        <Grid item xs={12}>
-          <Typography paragraph>{description}</Typography>
+        <Grid item xs={12} {...DescriptionGridProps}>
+          <Typography paragraph {...DescriptionProps}>
+            {description}
+          </Typography>
         </Grid>
       )}
-      <Grid item xs={12} container>
+      <Grid item xs={12} container {...ItemsGridProps}>
         {renderForm(fields)}
       </Grid>
     </Grid>
@@ -39,7 +54,12 @@ SubForm.propTypes = {
   fields: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   title: PropTypes.node,
   description: PropTypes.node,
-  component: PropTypes.any
+  component: PropTypes.any,
+  TitleGridProps: PropTypes.object,
+  TitleProps: PropTypes.object,
+  DescriptionProps: PropTypes.object,
+  DescriptionGridProps: PropTypes.object,
+  ItemsGridProps: PropTypes.object
 };
 
 export default SubForm;

packages/react-renderer-demo/src/doc-components/examples-texts/mui/mui-sub-form.md

@@ -0,0 +1,12 @@
+import Common from './common.md';
+
+<Common />
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|TitleProps|object|`{}`|[Grid](https://material-ui.com/api/typography/)|
+|TitleGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|DescriptionProps|object|`{}`|[Grid](https://material-ui.com/api/typography/)|
+|DescriptionGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|ItemsGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|

packages/react-renderer-demo/src/doc-components/sub-form.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SuirSubForm from './examples-texts/suir/suir-sub-form.md';
 import CarbonSubForm from './examples-texts/carbon/carbon-sub-form.md';
+import MuiSubForm from './examples-texts/mui/mui-sub-form.md';
+
 import GenericMuiComponent from '../helpers/generic-mui-component';
 
 const SubForm = ({ activeMapper }) => {
@@ -13,6 +15,10 @@ const SubForm = ({ activeMapper }) => {
     return <CarbonSubForm />;
   }
 
+  if (activeMapper === 'mui') {
+    return <MuiSubForm />;
+  }
+
   return <GenericMuiComponent activeMapper={activeMapper} component="sub-form" />;
 };