Merge pull request #874 from rvsia/formTemplateCustomization

feat(formTemplate): allow to pass props to each component

Author: Hyperkid123

packages/ant-component-mapper/src/files/form-template.d.ts

@@ -1,7 +1,6 @@
-import { FormTemplateRenderProps, AnyObject } from "@data-driven-forms/react-form-renderer";
+import FormTemplateCommonProps from "@data-driven-forms/common/src/form-template";
 
-export interface FormTemplateProps extends FormTemplateRenderProps {
-  formWrapperProps?: AnyObject;
+export interface FormTemplateProps extends FormTemplateCommonProps {
   layout?: string;
 }
 

packages/ant-component-mapper/src/files/form-template.js

@@ -22,8 +22,8 @@ Form.defaultProps = {
   layout: 'vertical'
 };
 
-const Description = ({ children }) => (
-  <Typography>
+const Description = ({ children, ...props }) => (
+  <Typography {...props}>
     <Paragraph>{children}</Paragraph>
   </Typography>
 );
@@ -32,8 +32,8 @@ Description.propTypes = {
   children: childrenPropTypes
 };
 
-const TitleComponent = ({ children }) => (
-  <Typography>
+const TitleComponent = ({ children, ...props }) => (
+  <Typography {...props}>
     <Title level={3}>{children}</Title>
   </Typography>
 );
@@ -42,7 +42,11 @@ TitleComponent.propTypes = {
   children: childrenPropTypes
 };
 
-const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
+const ButtonGroup = ({ children, ...props }) => (
+  <div style={{ display: 'flex', justifyContent: 'flex-end' }} {...props}>
+    {children}
+  </div>
+);
 
 ButtonGroup.propTypes = {
   children: childrenPropTypes

packages/blueprint-component-mapper/src/files/form-template.d.ts

@@ -1,10 +1,8 @@
+import FormTemplateCommonProps from "@data-driven-forms/common/src/form-template";
 import { ReactNode } from "react";
 
-export interface FormTemplateProps {
+export interface FormTemplateProps extends FormTemplateCommonProps {
   requiredLabelInfo?: ReactNode;
-  formWrapperProps?: React.HTMLProps<HTMLFormElement>;
-  showFormControls?: boolean;
-  disableSubmit: string[];
 }
 
 declare const FormTemplate: React.ComponentType<FormTemplateProps>;

packages/carbon-component-mapper/src/files/form-template.d.ts

@@ -1,8 +1,5 @@
-export interface FormTemplateProps {
-  showFormControls?: boolean;
-  disableSubmit: string[];
-}
+import FormTemplateCommonProps from "@data-driven-forms/common/src/form-template";
 
-declare const FormTemplate: React.ComponentType<FormTemplateProps>;
+declare const FormTemplate: React.ComponentType<FormTemplateCommonProps>;
 
 export default FormTemplate;

packages/carbon-component-mapper/src/files/form-template.js

@@ -30,13 +30,13 @@ ButtonGroup.propTypes = {
   className: PropTypes.string
 };
 
-export const Title = ({ children }) => <h3>{children}</h3>;
+export const Title = ({ children, ...props }) => <h3 {...props}>{children}</h3>;
 
 Title.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
-export const Description = ({ children }) => <div>{children}</div>;
+export const Description = ({ children, ...props }) => <div {...props}>{children}</div>;
 
 Description.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])

packages/common/src/form-template.d.ts

@@ -0,0 +1,21 @@
+import { AnyObject, FormTemplateRenderProps } from "@data-driven-forms/react-form-renderer";
+import { ElementType } from "react";
+
+export interface FormTemplateCommonProps extends FormTemplateRenderProps {
+    FormWrapper?: ElementType;
+    Title?: ElementType;
+    Description?: ElementType;
+    Button?: ElementType;
+    ButtonGroup?: ElementType;
+    formWrapperProps?: AnyObject;
+    showFormControls?: boolean;
+    disableSubmit?: string[];
+    Header?: ElementType;
+    headerProps?: AnyObject;
+    titleProps?: AnyObject;
+    descriptionProps?: AnyObject;
+    buttonGroupProps?: AnyObject;
+    buttonsProps?: AnyObject
+}
+
+export default FormTemplateCommonProps;

packages/common/src/form-template.js

@@ -34,13 +34,16 @@ export const FormControls = ({
   FormButtons,
   Button,
   ButtonGroup,
-  formSpyProps
+  formSpyProps,
+  buttonsProps,
+  buttonGroupProps
 }) => {
   if (FormButtons) {
     return <FormButtons />;
   }
 
   const { submitting, pristine, validating } = formSpyProps;
+  const { submit, reset, cancel } = buttonsProps;
 
   const buttons = {
     submit: (
@@ -51,14 +54,17 @@ export const FormControls = ({
         buttonType="submit"
         disabled={submitting || validating || disableSubmit}
         label={submitLabel}
+        {...submit}
       />
     ),
-    reset: canReset ? <Button key="form-reset" type="button" buttonType="reset" disabled={pristine} onClick={onReset} label={resetLabel} /> : null,
-    cancel: onCancel ? <Button key="form-cancel" type="button" buttonType="cancel" onClick={onCancel} label={cancelLabel} /> : null
+    reset: canReset ? (
+      <Button key="form-reset" type="button" buttonType="reset" disabled={pristine} onClick={onReset} label={resetLabel} {...reset} />
+    ) : null,
+    cancel: onCancel ? <Button key="form-cancel" type="button" buttonType="cancel" onClick={onCancel} label={cancelLabel} {...cancel} /> : null
   };
 
   return (
-    <ButtonGroup {...(buttonClassName && { className: buttonClassName })}>
+    <ButtonGroup {...buttonGroupProps} {...(buttonClassName && { className: buttonClassName })}>
       {completeButtons(buttonOrder).map((button) => buttons[button])}
     </ButtonGroup>
   );
@@ -85,7 +91,9 @@ FormControls.propTypes = {
       reset: PropTypes.func
     }),
     values: PropTypes.object
-  })
+  }),
+  buttonGroupProps: PropTypes.object,
+  buttonsProps: PropTypes.object
 };
 
 FormControls.defaultProps = {
@@ -94,7 +102,8 @@ FormControls.defaultProps = {
   resetLabel: 'Reset',
   canReset: false,
   canSubmit: false,
-  buttonOrder: ['submit', 'reset', 'cancel']
+  buttonOrder: ['submit', 'reset', 'cancel'],
+  buttonsProps: {}
 };
 
 const FormTemplate = ({
@@ -107,6 +116,11 @@ const FormTemplate = ({
   showFormControls,
   disableSubmit,
   Header,
+  headerProps,
+  titleProps,
+  descriptionProps,
+  buttonGroupProps,
+  buttonsProps,
   ...rest
 }) => {
   const {
@@ -118,9 +132,9 @@ const FormTemplate = ({
   return (
     <FormWrapper onSubmit={handleSubmit} {...formWrapperProps}>
       {(title || label || description) && (
-        <Header>
-          {(title || label) && <Title>{title || label}</Title>}
-          {description && <Description>{description}</Description>}
+        <Header {...headerProps}>
+          {(title || label) && <Title {...titleProps}>{title || label}</Title>}
+          {description && <Description {...descriptionProps}>{description}</Description>}
         </Header>
       )}
       {formFields}
@@ -130,6 +144,8 @@ const FormTemplate = ({
             <FormControls
               Button={Button}
               FormSpy={FormSpy}
+              buttonGroupProps={buttonGroupProps}
+              buttonsProps={buttonsProps}
               ButtonGroup={ButtonGroup}
               onReset={onReset}
               onCancel={onCancel}
@@ -153,7 +169,12 @@ FormTemplate.propTypes = {
   formWrapperProps: PropTypes.object,
   showFormControls: PropTypes.bool,
   disableSubmit: PropTypes.arrayOf(PropTypes.string),
-  Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element, PropTypes.oneOf([React.Fragment])])
+  Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element, PropTypes.oneOf([React.Fragment])]),
+  headerProps: PropTypes.object,
+  titleProps: PropTypes.object,
+  descriptionProps: PropTypes.object,
+  buttonGroupProps: PropTypes.object,
+  buttonsProps: PropTypes.object
 };
 
 FormTemplate.defaultProps = {

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

@@ -1,14 +1,5 @@
-import { FormTemplateRenderProps } from "@data-driven-forms/react-form-renderer";
+import FormTemplateCommonProps from "@data-driven-forms/common/src/form-template";
 
-export interface FormTemplateProps extends FormTemplateRenderProps {
-  FormWrapper?: React.ComponentType;
-  Button?: React.ComponentType;
-  ButtonGroup?: React.ComponentType;
-  Title?: React.ComponentType;
-  Description?: React.ComponentType;
-  FormWrapperProps?: React.HTMLAttributes<HTMLFormElement>;
-}
-
-declare const FormTemplate: React.ComponentType<FormTemplateProps>;
+declare const FormTemplate: React.ComponentType<FormTemplateCommonProps>;
 
 export default FormTemplate;

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

@@ -15,55 +15,62 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const Form = ({ children, ...props }) => (
-  <Grid item xs={12}>
+const Form = ({ children, GridContainerProps, GridProps, ...props }) => (
+  <Grid item xs={12} {...GridProps}>
     <form noValidate {...props}>
-      <Grid container item spacing={2} xs={12}>
+      <Grid container item spacing={2} xs={12} {...GridContainerProps}>
         {children}
       </Grid>
     </form>
   </Grid>
 );
 
 Form.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  GridProps: PropTypes.object,
+  GridContainerProps: PropTypes.object
 };
 
-const Description = ({ children }) => (
-  <Grid item xs={12}>
-    <Typography variant="body1" gutterBottom>
+const Description = ({ children, GridProps, ...props }) => (
+  <Grid item xs={12} {...GridProps}>
+    <Typography variant="body1" gutterBottom {...props}>
       {children}
     </Typography>
   </Grid>
 );
 
 Description.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  GridProps: PropTypes.object
 };
 
-const Title = ({ children }) => (
-  <Grid item xs={12}>
-    <Typography variant="h3" gutterBottom>
+const Title = ({ children, GridProps, ...props }) => (
+  <Grid item xs={12} {...GridProps}>
+    <Typography variant="h3" gutterBottom {...props}>
       {children}
     </Typography>
   </Grid>
 );
 
 Title.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  GridProps: PropTypes.object
 };
 
-const ButtonGroup = ({ children }) => {
+const ButtonGroup = ({ children, GridProps, ...props }) => {
   const classes = useStyles();
   return (
-    <Grid item xs={12}>
-      <div className={classes.buttonGroup}>{children}</div>
+    <Grid item xs={12} {...GridProps}>
+      <div className={classes.buttonGroup} {...props}>
+        {children}
+      </div>
     </Grid>
   );
 };
 
 ButtonGroup.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  GridProps: PropTypes.object
 };
 
 const Button = ({ label, variant, children, buttonType, ...props }) => (

packages/pf3-component-mapper/src/files/form-template.js

@@ -42,13 +42,13 @@ ButtonGroup.defaultProps = {
   className: ''
 };
 
-export const Title = ({ children }) => <h1>{children}</h1>;
+export const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;
 
 Title.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
 };
 
-export const Description = ({ children }) => <p>{children}</p>;
+export const Description = ({ children, ...props }) => <p {...props}>{children}</p>;
 
 Description.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired