Merge pull request #1238 from data-driven-forms/update-children-rendering

Update children rendering

Author: Hyperkid123

packages/react-form-renderer/src/form-renderer/form-renderer.js

@@ -12,6 +12,33 @@ import SchemaErrorComponent from './schema-error-component';
 
 const isFunc = (fn) => typeof fn === 'function';
 
+const renderChildren = (children, props) => {
+  if (isFunc(children)) {
+    return children(props);
+  }
+
+  let childElement = children;
+  if (Array.isArray(children)) {
+    /**
+     * Only permit one child element
+     */
+    if (children.length !== 1) {
+      throw new Error('FormRenderer expects only one child element!');
+    }
+
+    childElement = children[0];
+  }
+
+  if (typeof childElement === 'object') {
+    /**
+     * Clone react element, pass form fields and schema as props, but override them with child props if present
+     */
+    return cloneElement(children, { ...props, ...childElement.props });
+  }
+
+  throw new Error(`Invalid children prop! Expected one of [null, Function, object], got ${typeof children}`);
+};
+
 const FormRenderer = ({
   actionMapper,
   children,
@@ -144,13 +171,13 @@ const FormRenderer = ({
               ffGetRegisteredFields: form.getRegisteredFields,
               getRegisteredFields: internalGetRegisteredFields,
               initialValues: props.initialValues,
+              schema,
             },
           }}
         >
           {FormTemplate && <FormTemplate formFields={formFields} schema={schema} {...FormTemplateProps} />}
 
-          {isFunc(children) && children({ formFields, schema })}
-          {typeof children === 'object' && cloneElement(children, { formFields, schema })}
+          {children && renderChildren(children, { formFields, schema })}
         </RendererContext.Provider>
       )}
       {...props}

packages/react-form-renderer/src/renderer-context/renderer-context.d.ts

@@ -5,6 +5,7 @@ import { ValidatorMapper } from '../validator-mapper';
 import { ActionMapper } from '../form-renderer';
 import Field from '../common-types/field';
 import { AnyObject } from '../common-types/any-object';
+import Schema from '../common-types/schema';
 
 export interface FormOptions extends FormApi {
   registerInputFile?: (name: string) => void;
@@ -19,6 +20,7 @@ export interface FormOptions extends FormApi {
   getRegisteredFields: () => string[];
   ffGetRegisteredFields: () => string[];
   initialValues: AnyObject;
+  schema: Schema,
 }
 
 export interface RendererContextValue {

packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js

@@ -384,5 +384,42 @@ describe('<FormRenderer />', () => {
 
       expect(submitSpy).toHaveBeenCalledWith({ foo: 'bar' }, expect.any(Object), expect.any(Function));
     });
+
+    it('should render null as a child', () => {
+      expect(() => {
+        render(
+          <FormRenderer initialValues={{ foo: 'bar' }} componentMapper={componentMapper} schema={schema}>
+            {null}
+          </FormRenderer>
+        );
+      }).not.toThrow();
+    });
+
+    it('should throw an error if more than one child was passed', () => {
+      expect(() => {
+        render(
+          <FormRenderer initialValues={{ foo: 'bar' }} componentMapper={componentMapper} schema={schema}>
+            <div />
+            <div />
+          </FormRenderer>
+        );
+      }).toThrow('FormRenderer expects only one child element!');
+    });
+
+    it('should not override schema or formFields prop if explicitely given to child', () => {
+      const ChildSpy = ({ schema, formFields }) => (
+        <div>
+          <div>{schema}</div>
+          <div>{formFields}</div>
+        </div>
+      );
+      render(
+        <FormRenderer initialValues={{ foo: 'bar' }} componentMapper={componentMapper} schema={schema}>
+          <ChildSpy schema="schema-prop" formFields="form-fields-prop" />
+        </FormRenderer>
+      );
+      expect(screen.getByText('schema-prop')).toBeInTheDocument();
+      expect(screen.getByText('form-fields-prop')).toBeInTheDocument();
+    });
   });
 });

packages/react-renderer-demo/src/pages/components/children.md

@@ -8,6 +8,23 @@ import DocPage from '@docs/doc-page';
 
 ## Props
 
+Children are supplied with `formFields` and `schema` props. If a child has one of `schema` or `formFields` prop explicitly set, the explicit props will be used.
+
+```jsx
+
+/**
+ * The ChildComponent will receive schema and formFields props from the FormRenderer.
+ */
+<FormRenderer {...props}><ChildComponent/></FormRenderer>
+
+
+/**
+ * The ChildComponent will not receive schema prop from the FormRenderer! The schema prop will be equal to "Foo".
+ * It will still receive the formFields prop from the renderer.
+ */
+<FormRenderer {...props}><ChildComponent schema="Foo"/></FormRenderer>
+```
+
 ### formFields
 
 *node*

packages/react-renderer-demo/src/pages/hooks/use-form-api.md

@@ -26,6 +26,12 @@ This hook returns object containing following information:
 
 If you want to render fields from a component (`tabs`, `subform`, etc.) you can use `renderForm(fields)` function.
 
+## schema
+
+*object*
+
+The [schema prop](/components/renderer#schema) of FormRenderer.
+
 ## getState
 
 *() => FormState*