Merge pull request #1218 from zgover/patch-3

rvsia · web-flow · commit 2b6ca00f529b · 2022-04-08T11:14:29.000+02:00
feat(react): pass props and child render props
diff --git a/packages/react-form-renderer/src/form-renderer/form-renderer.d.ts b/packages/react-form-renderer/src/form-renderer/form-renderer.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType, FunctionComponent } from 'react';
+import { ComponentType, FunctionComponent, ReactNode } from 'react';
 import { FormProps } from 'react-final-form';
 import Schema from '../common-types/schema';
 import ComponentMapper from '../common-types/component-mapper';
@@ -12,6 +12,7 @@ export interface FormRendererProps extends FormProps {
   initialValues?: object;
   onCancel?: (values: AnyObject, ...args: any[]) => void;
   onReset?: () => void;
+  onError?: (...args: any[]) => void;
   schema: Schema;
   clearOnUnmount?: boolean;
   clearedValue?: any;
@@ -20,6 +21,8 @@ export interface FormRendererProps extends FormProps {
   validatorMapper?: ValidatorMapper;
   actionMapper?: ActionMapper;
   schemaValidatorMapper?: SchemaValidatorMapper;
+  FormTemplateProps?: AnyObject;
+  children?: ReactNode | ((props: FormTemplateRenderProps) => ReactNode)
 }
 
 declare const FormRenderer: React.ComponentType<FormRendererProps>;
diff --git a/packages/react-form-renderer/src/form-renderer/form-renderer.js b/packages/react-form-renderer/src/form-renderer/form-renderer.js
@@ -1,75 +1,119 @@
-import React, { useState, useRef } from 'react';
-import Form from '../form';
 import arrayMutators from 'final-form-arrays';
-import PropTypes from 'prop-types';
 import createFocusDecorator from 'final-form-focus';
+import PropTypes from 'prop-types';
+import React, { useCallback, useMemo, useRef, useState, cloneElement } from 'react';
 
+import defaultSchemaValidator from '../default-schema-validator';
+import defaultValidatorMapper from '../validator-mapper';
+import Form from '../form';
 import RendererContext from '../renderer-context';
 import renderForm from './render-form';
-import defaultSchemaValidator from '../default-schema-validator';
 import SchemaErrorComponent from './schema-error-component';
-import defaultValidatorMapper from '../validator-mapper';
+
+const isFunc = (fn) => typeof fn === 'function';
 
 const FormRenderer = ({
+  actionMapper,
+  children,
+  clearedValue,
+  clearOnUnmount,
   componentMapper,
+  decorators,
   FormTemplate,
-  onSubmit,
+  FormTemplateProps,
+  mutators,
   onCancel,
+  onError,
   onReset,
-  clearOnUnmount,
-  subscription,
-  clearedValue,
+  onSubmit,
   schema,
-  validatorMapper,
-  actionMapper,
   schemaValidatorMapper,
+  subscription,
+  validatorMapper,
   ...props
 }) => {
   const [fileInputs, setFileInputs] = useState([]);
+  const formFields = useMemo(() => renderForm(schema.fields), [schema]);
   const registeredFields = useRef({});
   const focusDecorator = useRef(createFocusDecorator());
-  let schemaError;
+  const validatorMapperMerged = useMemo(() => {
+    return { ...defaultValidatorMapper, ...validatorMapper };
+  }, [validatorMapper]);
+  const mutatorsMerged = useMemo(() => ({ ...arrayMutators, ...mutators }), [mutators]);
+  const decoratorsMerged = useMemo(() => [focusDecorator.current, ...(Array.isArray(decorators) ? decorators : [])], [decorators]);
 
-  const setRegisteredFields = (fn) => (registeredFields.current = fn({ ...registeredFields.current }));
-  const internalRegisterField = (name) => {
+  const handleSubmitCallback = useCallback(
+    (values, formApi, ...args) => {
+      return !isFunc(onSubmit) ? undefined : onSubmit(values, { ...formApi, fileInputs }, ...args);
+    },
+    [onSubmit, fileInputs]
+  );
+
+  const handleCancelCallback = useCallback(
+    (getState) => {
+      return (...args) => onCancel(getState().values, ...args);
+    },
+    [onCancel]
+  );
+
+  const handleResetCallback = useCallback(
+    (reset) =>
+      (...args) => {
+        reset();
+        return !isFunc(onReset) ? void 0 : onReset(...args);
+      },
+    [onReset]
+  );
+
+  const handleErrorCallback = useCallback(
+    (...args) => {
+      // eslint-disable-next-line no-console
+      console.error(...args);
+      return !isFunc(onError) ? void 0 : onError(...args);
+    },
+    [onError]
+  );
+
+  const registerInputFile = useCallback((name) => {
+    setFileInputs((prevFiles) => [...prevFiles, name]);
+  }, []);
+
+  const unRegisterInputFile = useCallback((name) => {
+    setFileInputs((prevFiles) => [...prevFiles.splice(prevFiles.indexOf(name))]);
+  }, []);
+
+  const setRegisteredFields = useCallback((fn) => {
+    return (registeredFields.current = fn({ ...registeredFields.current }));
+  }, []);
+
+  const internalRegisterField = useCallback((name) => {
     setRegisteredFields((prev) => (prev[name] ? { ...prev, [name]: prev[name] + 1 } : { ...prev, [name]: 1 }));
-  };
+  }, []);
 
-  const internalUnRegisterField = (name) => {
+  const internalUnRegisterField = useCallback((name) => {
     setRegisteredFields(({ [name]: currentField, ...prev }) => (currentField && currentField > 1 ? { [name]: currentField - 1, ...prev } : prev));
-  };
-
-  const internalGetRegisteredFields = () =>
-    Object.entries(registeredFields.current).reduce((acc, [name, value]) => (value > 0 ? [...acc, name] : acc), []);
+  }, []);
 
-  const validatorMapperMerged = { ...defaultValidatorMapper, ...validatorMapper };
+  const internalGetRegisteredFields = useCallback(() => {
+    const fields = registeredFields.current;
+    return Object.entries(fields).reduce((acc, [name, value]) => (value > 0 ? [...acc, name] : acc), []);
+  }, []);
 
   try {
     const validatorTypes = Object.keys(validatorMapperMerged);
     const actionTypes = actionMapper ? Object.keys(actionMapper) : [];
+
     defaultSchemaValidator(schema, componentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
   } catch (error) {
-    schemaError = error;
-    // eslint-disable-next-line no-console
-    console.error(error);
-    // eslint-disable-next-line no-console
-    console.log('error: ', error.message);
-  }
-
-  if (schemaError) {
-    return <SchemaErrorComponent name={schemaError.name} message={schemaError.message} />;
+    handleErrorCallback('schema-error', error);
+    return <SchemaErrorComponent name={error.name} message={error.message} />;
   }
 
-  const registerInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles, name]);
-
-  const unRegisterInputFile = (name) => setFileInputs((prevFiles) => [...prevFiles.splice(prevFiles.indexOf(name))]);
-
   return (
     <Form
-      {...props}
-      onSubmit={(values, formApi, ...args) => onSubmit(values, { ...formApi, fileInputs }, ...args)}
-      mutators={{ ...arrayMutators }}
-      decorators={[focusDecorator.current]}
+      onSubmit={handleSubmitCallback}
+      mutators={mutatorsMerged}
+      decorators={decoratorsMerged}
       subscription={{ pristine: true, submitting: true, valid: true, ...subscription }}
       render={({ handleSubmit, pristine, valid, form: { reset, mutators, getState, submit, ...form } }) => (
         <RendererContext.Provider
@@ -82,11 +126,9 @@ const FormRenderer = ({
               unRegisterInputFile,
               pristine,
               onSubmit,
-              onCancel: onCancel ? (...args) => onCancel(getState().values, ...args) : undefined,
-              onReset: (...args) => {
-                onReset && onReset(...args);
-                reset();
-              },
+              onCancel: isFunc(onCancel) ? handleCancelCallback(getState) : undefined,
+              onReset: handleResetCallback(reset),
+              onError: handleErrorCallback,
               getState,
               valid,
               clearedValue,
@@ -105,25 +147,32 @@ const FormRenderer = ({
             },
           }}
         >
-          <FormTemplate formFields={renderForm(schema.fields)} schema={schema} />
+          {FormTemplate && <FormTemplate formFields={formFields} schema={schema} {...FormTemplateProps} />}
+
+          {isFunc(children) && children({ formFields, schema })}
+          {typeof children === 'object' && cloneElement(children, { formFields, schema })}
         </RendererContext.Provider>
       )}
+      {...props}
     />
   );
 };
 
 FormRenderer.propTypes = {
-  onSubmit: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
   onReset: PropTypes.func,
+  onError: PropTypes.func,
   schema: PropTypes.object.isRequired,
   clearOnUnmount: PropTypes.bool,
   subscription: PropTypes.shape({ [PropTypes.string]: PropTypes.bool }),
   clearedValue: PropTypes.any,
   componentMapper: PropTypes.shape({
     [PropTypes.string]: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func, PropTypes.elementType]),
   }).isRequired,
-  FormTemplate: PropTypes.elementType.isRequired,
+  FormTemplate: PropTypes.elementType,
+  FormTemplateProps: PropTypes.object,
   validatorMapper: PropTypes.shape({
     [PropTypes.string]: PropTypes.func,
   }),
@@ -142,6 +191,8 @@ FormRenderer.propTypes = {
     }),
   }),
   initialValues: PropTypes.object,
+  decorators: PropTypes.array,
+  mutators: PropTypes.object,
 };
 
 FormRenderer.defaultProps = {
diff --git a/packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js b/packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js
@@ -104,7 +104,6 @@ describe('<FormRenderer />', () => {
 
     expect(screen.getByText('Form could not be rendered, because of invalid form schema.')).toBeInTheDocument();
     expect(spy).toHaveBeenCalled();
-    expect(logSpy).toHaveBeenCalledWith('error: ', expect.any(String));
 
     console = _console; // eslint-disable-line
   });
@@ -310,4 +309,80 @@ describe('<FormRenderer />', () => {
 
     expect(registerSpy).toHaveBeenCalledWith([]);
   });
+
+  describe('children prop', () => {
+    const ChildrenTemplate = ({ formFields, schema, hideButtons }) => {
+      const { handleSubmit } = useFormApi();
+      return (
+        <form onSubmit={handleSubmit}>
+          {schema.title}
+          {formFields}
+          {!hideButtons && <button type="submit">Child node submit</button>}
+        </form>
+      );
+    };
+
+    it('should clone template props to children node', () => {
+      render(
+        <FormRenderer componentMapper={componentMapper} schema={schema} onSubmit={jest.fn()}>
+          <ChildrenTemplate />
+        </FormRenderer>
+      );
+
+      expect(screen.getByLabelText('component1')).toBeInTheDocument();
+      expect(screen.getByText('Select field')).toBeInTheDocument();
+      expect(screen.getByText('Child node submit')).toBeInTheDocument();
+    });
+
+    it('should use children node props', () => {
+      render(
+        <FormRenderer componentMapper={componentMapper} schema={schema} onSubmit={jest.fn()}>
+          <ChildrenTemplate hideButtons />
+        </FormRenderer>
+      );
+
+      expect(screen.getByLabelText('component1')).toBeInTheDocument();
+      expect(screen.getByText('Select field')).toBeInTheDocument();
+      const submitButton = screen.queryByText('Child node submit');
+      expect(submitButton).toBeNull();
+    });
+
+    it('should submit data from children node', () => {
+      const submitSpy = jest.fn();
+      render(
+        <FormRenderer initialValues={{ foo: 'bar' }} componentMapper={componentMapper} schema={schema} onSubmit={submitSpy}>
+          <ChildrenTemplate />
+        </FormRenderer>
+      );
+
+      userEvent.click(screen.getByText('Child node submit'));
+
+      expect(submitSpy).toHaveBeenCalledWith({ foo: 'bar' }, expect.any(Object), expect.any(Function));
+    });
+
+    it('should use children render function', () => {
+      render(
+        <FormRenderer componentMapper={componentMapper} schema={schema} onSubmit={jest.fn()}>
+          {(props) => <ChildrenTemplate {...props} />}
+        </FormRenderer>
+      );
+
+      expect(screen.getByLabelText('component1')).toBeInTheDocument();
+      expect(screen.getByText('Select field')).toBeInTheDocument();
+      expect(screen.getByText('Child node submit')).toBeInTheDocument();
+    });
+
+    it('should submit data from children render function', () => {
+      const submitSpy = jest.fn();
+      render(
+        <FormRenderer initialValues={{ foo: 'bar' }} componentMapper={componentMapper} schema={schema} onSubmit={submitSpy}>
+          {(props) => <ChildrenTemplate {...props} />}
+        </FormRenderer>
+      );
+
+      userEvent.click(screen.getByText('Child node submit'));
+
+      expect(submitSpy).toHaveBeenCalledWith({ foo: 'bar' }, expect.any(Object), expect.any(Function));
+    });
+  });
 });
diff --git a/packages/react-renderer-demo/src/components/navigation/schemas/renderer.schema.js b/packages/react-renderer-demo/src/components/navigation/schemas/renderer.schema.js
@@ -12,6 +12,10 @@ const schemaRenderer = [
     component: 'form-template',
     linkText: 'Form template',
   },
+  {
+    component: 'children',
+    linkText: 'Children',
+  },
   {
     subHeader: true,
     title: 'Form components',
diff --git a/packages/react-renderer-demo/src/pages/components/children.md b/packages/react-renderer-demo/src/pages/components/children.md
diff --git a/packages/react-renderer-demo/src/pages/components/renderer.md b/packages/react-renderer-demo/src/pages/components/renderer.md
