Merge pull request #352 from data-driven-forms/fix-template-re-render

Rewrite mappers FormTemplates to be components.

Author: rvsia

__mocks__/mock-form-template.js

@@ -8,7 +8,6 @@ const path = require('path');
 const FormTemplate = ({ schema: { title, label, description }, formFields }) => {
   // When testing inside the renderer package, it cannot import things from itself!
   const isInternal = path.dirname(module.parent.filename).includes('/react-form-renderer/');
-
   const formOptions = isInternal ? useFormApiInternal() : useFormApi();
   const FormSpyFinal = isInternal ? FormSpyInternal : FormSpy;
 

packages/common/src/form-template.js

@@ -104,7 +104,7 @@ FormControls.defaultProps = {
   buttonOrder: ['submit', 'reset', 'cancel']
 };
 
-const formTemplate = ({
+const FormTemplate = ({
   FormWrapper,
   Title,
   Description,
@@ -113,17 +113,19 @@ const formTemplate = ({
   formWrapperProps,
   showFormControls = true,
   disableSubmit = [],
-  onStateUpdate,
-  ...options
-}) => ({ schema: { title, description, label }, formFields }) => {
+  ...rest
+}) => {
+  const {
+    schema: { title, description, label },
+    formFields
+  } = rest;
   const { onReset, onCancel, getState, handleSubmit } = useFormApi();
 
   return (
     <FormWrapper onSubmit={handleSubmit} {...formWrapperProps}>
       {(title || label) && <Title>{title || label}</Title>}
       {description && <Description>{description}</Description>}
       {formFields}
-      {onStateUpdate && <FormSpy onChange={onStateUpdate} />}
       {showFormControls && (
         <FormSpy>
           {(formSpyProps) => (
@@ -135,7 +137,7 @@ const formTemplate = ({
               onCancel={onCancel}
               disableSubmit={isDisabled(disableSubmit, getState)}
               formSpyProps={formSpyProps}
-              {...options}
+              {...rest}
             />
           )}
         </FormSpy>
@@ -144,4 +146,20 @@ const formTemplate = ({
   );
 };
 
-export default formTemplate;
+FormTemplate.propTypes = {
+  FormWrapper: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
+  Title: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
+  Description: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
+  Button: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
+  ButtonGroup: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
+  formWrapperProps: PropTypes.object,
+  showFormControls: PropTypes.bool,
+  disableSubmit: PropTypes.arrayOf(PropTypes.string)
+};
+
+FormTemplate.defaultProps = {
+  showFormControls: true,
+  disableSubmit: []
+};
+
+export default FormTemplate;

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

@@ -4,7 +4,7 @@ import ReactDOM from "react-dom";
 import FormRenderer from '@data-driven-forms/react-form-renderer';
 
 import Grid from '@material-ui/core/Grid';
-import { componentMapper, formTemplate } from '../src'
+import { componentMapper, FormTemplate } from '../src'
 import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
@@ -32,7 +32,7 @@ const App = () => (
                 <FormRenderer
                     onSubmit={console.log}
                     componentMapper={componentMapper}
-                    formTemplate={formTemplate()}
+                    FormTemplate={props => <FormTemplate {...props} />}
                     schema={demoSchema}
                     onCancel={() => console.log('canceling')}
                 />

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

@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import MUIButton from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-import formTemplate from '@data-driven-forms/common/src/form-template';
+import FormTemplate from '@data-driven-forms/common/src/form-template';
 
 const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
 const Description = ({ children }) => (
@@ -28,6 +28,8 @@ const Button = ({ label, variant, children, ...props }) => (
   </MUIButton>
 );
 
-const MuiFormTemplate = (options) => formTemplate({ FormWrapper: Form, Button, ButtonGroup, Title, Description, ...options });
+const MuiFormTemplate = (props) => (
+  <FormTemplate FormWrapper={Form} Button={Button} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
+);
 
 export default MuiFormTemplate;

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

@@ -1,2 +1,2 @@
 export { default as componentMapper, components } from './components/component-mapper';
-export { default as formTemplate } from './components/form-template';
+export { default as FormTemplate } from './components/form-template';

packages/mui-component-mapper/src/tests/form-fields.test.js

@@ -7,12 +7,18 @@ import Checkbox from '../components/checkbox';
 
 import MockFieldProvider from '../../../../__mocks__/mock-field-provider';
 import RenderWithProvider from '../../../../__mocks__/with-provider';
-import formTemplate from '../components/form-template';
+import FormTemplate from '../components/form-template';
 import componentMapper from '../components/component-mapper';
 import { Radio } from '@material-ui/core';
 
 const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
-  <FormRenderer onSubmit={jest.fn()} formTemplate={formTemplate()} schema={schema} componentMapper={componentMapper} {...props} />
+  <FormRenderer
+    onSubmit={jest.fn()}
+    FormTemplate={(props) => <FormTemplate {...props} />}
+    schema={schema}
+    componentMapper={componentMapper}
+    {...props}
+  />
 );
 
 describe('formFields', () => {

packages/mui-component-mapper/src/tests/tabs.test.js

@@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
 import FormTabs from '../components/tabs';
 import RenderWithProvider from '../../../../__mocks__/with-provider';
 import FormRenderer, { validatorTypes } from '@data-driven-forms/react-form-renderer';
-import { componentMapper, formTemplate } from '../index';
+import { componentMapper, FormTemplate } from '../index';
 
 describe('tabs', () => {
   const props = {
@@ -85,7 +85,7 @@ describe('tabs', () => {
     const wrapper = mount(
       <FormRenderer
         componentMapper={componentMapper}
-        formTemplate={formTemplate()}
+        FormTemplate={(props) => <FormTemplate {...props} />}
         onSubmit={(values) => onSubmit(values)}
         schema={{
           fields: [

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

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import FormRenderer from '@data-driven-forms/react-form-renderer';
 import { Grid, Row, Button } from 'patternfly-react';
-import { componentMapper, formTemplate } from '../src'
+import { componentMapper, FormTemplate } from '../src'
 import { schema, uiSchema, conditionalSchema, arraySchema, uiArraySchema } from './demo-schemas/widget-schema';
 import miqSchema from './demo-schemas/miq-schema';
 import wizardSchema from './demo-schemas/wizard-schema';
@@ -120,7 +120,7 @@ const App = () => {
           initialValues={{}}
           onSubmit={console.log}
           componentMapper={componentMapper}
-          formTemplate={formTemplate()}
+          FormTemplate={(props) => <FormTemplate {...props} />}
           schema={schema}
           onCancel={() => console.log('cancel')}
         />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button as PF3Button, Form } from 'patternfly-react';
 import './form-template.scss';
-import formTemplate from '@data-driven-forms/common/src/form-template';
+import FormTemplate from '@data-driven-forms/common/src/form-template';
 
 export const FormWrapper = ({ children, ...props }) => <Form {...props}>{children}</Form>;
 
@@ -49,6 +49,8 @@ Description.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
 };
 
-const PF3FormTemplate = (options) => formTemplate({ FormWrapper, Button, ButtonGroup, Title, Description, ...options });
+const PF3FormTemplate = (props) => (
+  <FormTemplate FormWrapper={FormWrapper} Button={Button} ButtonGroup={ButtonGroup} Title={Title} Description={Description} {...props} />
+);
 
 export default PF3FormTemplate;

packages/pf3-component-mapper/src/index.js

@@ -1,2 +1,2 @@
 export { default as componentMapper, components, rawComponents } from './components/component-mapper';
-export { default as formTemplate } from './components/form-template';
+export { default as FormTemplate } from './components/form-template';