fix(renderer): onCancel receives form values

Author: rvsia

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

@@ -38,7 +38,7 @@ const FormControls = ({
       : (
         <RendererContext.Consumer>
           { ({ layoutMapper: { Button, ButtonGroup }}) => {
-            const { submitting, pristine, validating, form: { submit, reset }} = formSpyProps;
+            const { submitting, pristine, validating, form: { submit, reset }, values } = formSpyProps;
             const buttons = {
               submit: (
                 <Button
@@ -64,7 +64,7 @@ const FormControls = ({
                   label={ resetLabel }
                 />
               ) : null,
-              cancel: onCancel ? <Button key="form-cancel" type="button" onClick={ onCancel } label={ cancelLabel } /> : null,
+              cancel: onCancel ? <Button key="form-cancel" type="button" onClick={ () => onCancel(values) } label={ cancelLabel } /> : null,
             };
             return (
               <ButtonGroup className={ buttonClassName }>

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-controls.test.js.snap

@@ -78,11 +78,11 @@ exports[`<FormControls /> should add missing buttons if not defined in button or
               <Component
                 key="form-cancel"
                 label="Cancel"
-                onClick={[MockFunction]}
+                onClick={[Function]}
                 type="button"
               >
                 <button
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   type="button"
                 >
                   Cancel
@@ -184,11 +184,11 @@ exports[`<FormControls /> should render all controls and with default labels 1`]
               <Component
                 key="form-cancel"
                 label="Cancel"
-                onClick={[MockFunction]}
+                onClick={[Function]}
                 type="button"
               >
                 <button
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   type="button"
                 >
                   Cancel
@@ -257,11 +257,11 @@ exports[`<FormControls /> should render buttons in correct order 1`] = `
               <Component
                 key="form-cancel"
                 label="Cancel"
-                onClick={[MockFunction]}
+                onClick={[Function]}
                 type="button"
               >
                 <button
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   type="button"
                 >
                   Cancel

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

@@ -10,6 +10,7 @@ describe('<FormControls />', () => {
   let initialProps;
   let ContextWrapper;
   let initialLayout;
+
   beforeEach(() => {
     initialLayout = {
       [layoutComponents.BUTTON]: ({ label, ...props }) => <button { ...props }>{ label }</button>,
@@ -36,6 +37,12 @@ describe('<FormControls />', () => {
     };
   });
 
+  afterEach(() => {
+    initialProps.onCancel.mockReset();
+    initialProps.onSubmit.mockReset();
+    initialProps.onReset.mockReset();
+  });
+
   it('should render all controls and with default labels', () => {
     const wrapper = mount(
       <ContextWrapper>
@@ -78,4 +85,27 @@ describe('<FormControls />', () => {
     );
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+
+  it('should call cancel with form values', () => {
+    const wrapper = mount(
+      <ContextWrapper>
+        <FormControls { ...initialProps } />
+      </ContextWrapper>
+    );
+
+    const CANCEL_INDEX = 2;
+    const FIELD_NAME = 'xxx';
+    const FIELD_VALUE = 'yyy';
+
+    const expectedValues =  {
+      [FIELD_NAME]: FIELD_VALUE,
+    };
+
+    wrapper.find(Form).instance().form.change(FIELD_NAME, FIELD_VALUE);
+    wrapper.update();
+
+    wrapper.find('button').at(CANCEL_INDEX).simulate('click');
+
+    expect(initialProps.onCancel).toHaveBeenCalledWith(expectedValues);
+  });
 });

packages/react-renderer-demo/src/docs-components/renderer-api.md

@@ -25,7 +25,7 @@ Form Renderer provides a lot of customization via props.
 |<NavLink to="/renderer/unmounting">clearOnUnmount</NavLink>|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
 |canReset|bool|Show/hide reset button.|false|
 |onReset|func|A reset callback. You don't need to manually clear the form values!||
-|onCancel|func|A cancel callback.||
+|onCancel|func|A cancel callback, which receives `values` as the first argument.||
 |onStateUpdate|func|A function which will be called with every form update, i.e. `({ values }) => setValues(values)`||
 |disableSubmit|array of strings|You can specify a form attributes (see [here](https://final-form.org/docs/final-form/types/FormState)) which will make the submit button disabled. |[ ]|
 |initialValues|object|An object of fields names as keys and values as their values.||