Merge pull request #202 from rvsia/cancel-values

fix(renderer): onCancel receives form values

Author: Hyperkid123

packages/pf3-component-mapper/src/tests/__snapshots__/tabs.test.js.snap

@@ -42,7 +42,11 @@ exports[`<YearSelector /> should render correctly 1`] = `
                       <span
                         aria-hidden={true}
                         className="fa fa-angle-left"
-                      />
+                      >
+                        <span>
+                          Prev interval
+                        </span>
+                      </span>
                     </FontAwesome>
                   </Icon>
                 </td>
@@ -67,7 +71,11 @@ exports[`<YearSelector /> should render correctly 1`] = `
                       <span
                         aria-hidden={true}
                         className="fa fa-angle-right"
-                      />
+                      >
+                        <span>
+                          Next interval
+                        </span>
+                      </span>
                     </FontAwesome>
                   </Icon>
                 </td>

packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/__snapshots__/year-selector.test.js.snap

@@ -857,8 +857,8 @@ exports[`FormFields should render Switch correctly 1`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
+                      checked={false}
                       className="pf-c-switch__input"
-                      defaultChecked={false}
                       disabled={false}
                       id="someIdKey"
                       name="Name of the field"
@@ -959,6 +959,7 @@ exports[`FormFields should render TextArea correctly 1`] = `
           isRequired={false}
           isValid={true}
           name="Name of the field"
+          resizeOrientation="both"
           value=""
         >
           <textarea
@@ -1997,8 +1998,8 @@ exports[`FormFields should render disabled Switch correctly 1`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
+                      checked={false}
                       className="pf-c-switch__input"
-                      defaultChecked={false}
                       disabled={true}
                       id="someIdKey"
                       name="Name of the field"
@@ -2165,8 +2166,8 @@ exports[`FormFields should render disabled Switch correctly 2`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
+                      checked={false}
                       className="pf-c-switch__input"
-                      defaultChecked={false}
                       disabled={true}
                       id="someIdKey"
                       name="Name of the field"
@@ -2270,6 +2271,7 @@ exports[`FormFields should render disabled TextArea correctly 1`] = `
           isRequired={false}
           isValid={true}
           name="Name of the field"
+          resizeOrientation="both"
           value=""
         >
           <textarea
@@ -2486,8 +2488,8 @@ exports[`FormFields should render with onText/OffText Switch correctly 1`] = `
                     <input
                       aria-label=""
                       aria-labelledby="someIdKey-on"
+                      checked={false}
                       className="pf-c-switch__input"
-                      defaultChecked={false}
                       disabled={false}
                       id="someIdKey"
                       name="Name of the field"

packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap

@@ -5,7 +5,7 @@ exports[`Tabs component should render tabs correctly 1`] = `
   activeKey={0}
   onSelect={[Function]}
 >
-  <ForwardRef
+  <Tab
     eventKey={0}
     key="cosiName"
     title="cosiTitle"
@@ -17,8 +17,8 @@ exports[`Tabs component should render tabs correctly 1`] = `
         Here would be form
       </div>
     </div>
-  </ForwardRef>
-  <ForwardRef
+  </Tab>
+  <Tab
     eventKey={1}
     key="cosiName2"
     title="cosiTitle2"
@@ -30,6 +30,6 @@ exports[`Tabs component should render tabs correctly 1`] = `
         Here would be form
       </div>
     </div>
-  </ForwardRef>
+  </Tab>
 </Component>
 `;

packages/pf4-component-mapper/src/tests/__snapshots__/tabs.test.js.snap

@@ -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/form-renderer/form-controls.js

@@ -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/__snapshots__/form-controls.test.js.snap

@@ -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-form-renderer/src/tests/form-renderer/form-controls.test.js

@@ -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.||