Skip to content

Commit daae740

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #375 from rvsia/enhanceOnCancelReset
[V2] Enhance on cancel reset
2 parents 8a72fc1 + 82174ed commit daae740

File tree

10 files changed

+82
-87
lines changed

10 files changed

+82
-87
lines changed

‎packages/common/src/form-template.js

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,12 @@ export const FormControls = ({
4040
return <FormButtons {...formSpyProps} />;
4141
}
4242

43-
const {
44-
submitting,
45-
pristine,
46-
validating,
47-
form: { reset },
48-
values
49-
} = formSpyProps;
43+
const { submitting, pristine, validating } = formSpyProps;
5044

5145
const buttons = {
5246
submit: <Button key="form-submit" type="submit" variant="primary" disabled={submitting || validating || disableSubmit} label={submitLabel} />,
53-
reset: canReset ? (
54-
<Button
55-
key="form-reset"
56-
type="button"
57-
disabled={pristine}
58-
onClick={() => {
59-
if (canReset) {
60-
onReset && onReset();
61-
reset();
62-
}
63-
}}
64-
label={resetLabel}
65-
/>
66-
) : null,
67-
cancel: onCancel ? <Button key="form-cancel" type="button" onClick={() => onCancel(values)} label={cancelLabel} /> : null
47+
reset: canReset ? <Button key="form-reset" type="button" disabled={pristine} onClick={onReset} label={resetLabel} /> : null,
48+
cancel: onCancel ? <Button key="form-cancel" type="button" onClick={onCancel} label={cancelLabel} /> : null
6849
};
6950

7051
return <ButtonGroup className={buttonClassName}>{completeButtons(buttonOrder).map((button) => buttons[button])}</ButtonGroup>;

‎packages/pf4-component-mapper/src/components/wizard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const Wizard = ({
134134
aria-modal={inModal ? 'true' : undefined}
135135
onKeyDown={(e) => handleEnter(e, formOptions, state.activeStep, findCurrentStepWrapped, handleNext, handleSubmit)}
136136
>
137-
{title && <WizardHeader title={title} description={description} onClose={() => formOptions.onCancel(formOptions.getState().values)} />}
137+
{title && <WizardHeader title={title} description={description} onClose={formOptions.onCancel} />}
138138
<div className="pf-c-wizard__outer-wrap">
139139
<WizardNav>
140140
<FormSpy>

‎packages/pf4-component-mapper/src/components/wizard/step-buttons.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const WizardStepButtons = ({
7171
<Button type="button" variant="secondary" isDisabled={disableBack} onClick={handlePrev}>
7272
{back}
7373
</Button>
74-
<Button type="button" variant="link" onClick={() => formOptions.onCancel(formOptions.getState().values)}>
74+
<Button type="button" variant="link" onClick={formOptions.onCancel}>
7575
{cancel}
7676
</Button>
7777
</React.Fragment>

‎packages/pf4-component-mapper/src/tests/__snapshots__/form-template-common.test.js.snap

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -187,12 +187,12 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
187187
disabled={true}
188188
key="form-reset"
189189
label="Reset"
190-
onClick={[Function]}
190+
onClick={[MockFunction]}
191191
type="button"
192192
>
193193
<Component
194194
isDisabled={true}
195-
onClick={[Function]}
195+
onClick={[MockFunction]}
196196
type="button"
197197
variant="secondary"
198198
>
@@ -205,7 +205,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
205205
undefined,
206206
],
207207
"isDisabled": true,
208-
"onClick": [Function],
208+
"onClick": [MockFunction],
209209
"type": "button",
210210
"variant": "secondary",
211211
}
@@ -214,7 +214,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
214214
>
215215
<Button
216216
isDisabled={true}
217-
onClick={[Function]}
217+
onClick={[MockFunction]}
218218
ouiaContext={
219219
Object {
220220
"isOuia": false,
@@ -229,7 +229,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
229229
aria-label={null}
230230
className="pf-c-button pf-m-secondary"
231231
disabled={true}
232-
onClick={[Function]}
232+
onClick={[MockFunction]}
233233
tabIndex={null}
234234
type="button"
235235
>
@@ -242,11 +242,11 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
242242
<Button
243243
key="form-cancel"
244244
label="Cancel"
245-
onClick={[Function]}
245+
onClick={[MockFunction]}
246246
type="button"
247247
>
248248
<Component
249-
onClick={[Function]}
249+
onClick={[MockFunction]}
250250
type="button"
251251
variant="secondary"
252252
>
@@ -259,15 +259,15 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
259259
undefined,
260260
],
261261
"isDisabled": undefined,
262-
"onClick": [Function],
262+
"onClick": [MockFunction],
263263
"type": "button",
264264
"variant": "secondary",
265265
}
266266
}
267267
consumerContext={null}
268268
>
269269
<Button
270-
onClick={[Function]}
270+
onClick={[MockFunction]}
271271
ouiaContext={
272272
Object {
273273
"isOuia": false,
@@ -282,7 +282,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
282282
aria-label={null}
283283
className="pf-c-button pf-m-secondary"
284284
disabled={false}
285-
onClick={[Function]}
285+
onClick={[MockFunction]}
286286
tabIndex={null}
287287
type="button"
288288
>
@@ -494,11 +494,11 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
494494
<Button
495495
key="form-cancel"
496496
label="Cancel"
497-
onClick={[Function]}
497+
onClick={[MockFunction]}
498498
type="button"
499499
>
500500
<Component
501-
onClick={[Function]}
501+
onClick={[MockFunction]}
502502
type="button"
503503
variant="secondary"
504504
>
@@ -511,15 +511,15 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
511511
undefined,
512512
],
513513
"isDisabled": undefined,
514-
"onClick": [Function],
514+
"onClick": [MockFunction],
515515
"type": "button",
516516
"variant": "secondary",
517517
}
518518
}
519519
consumerContext={null}
520520
>
521521
<Button
522-
onClick={[Function]}
522+
onClick={[MockFunction]}
523523
ouiaContext={
524524
Object {
525525
"isOuia": false,
@@ -534,7 +534,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
534534
aria-label={null}
535535
className="pf-c-button pf-m-secondary"
536536
disabled={false}
537-
onClick={[Function]}
537+
onClick={[MockFunction]}
538538
tabIndex={null}
539539
type="button"
540540
>
@@ -715,11 +715,11 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
715715
<Button
716716
key="form-cancel"
717717
label="Cancel"
718-
onClick={[Function]}
718+
onClick={[MockFunction]}
719719
type="button"
720720
>
721721
<Component
722-
onClick={[Function]}
722+
onClick={[MockFunction]}
723723
type="button"
724724
variant="secondary"
725725
>
@@ -732,15 +732,15 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
732732
undefined,
733733
],
734734
"isDisabled": undefined,
735-
"onClick": [Function],
735+
"onClick": [MockFunction],
736736
"type": "button",
737737
"variant": "secondary",
738738
}
739739
}
740740
consumerContext={null}
741741
>
742742
<Button
743-
onClick={[Function]}
743+
onClick={[MockFunction]}
744744
ouiaContext={
745745
Object {
746746
"isOuia": false,
@@ -755,7 +755,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
755755
aria-label={null}
756756
className="pf-c-button pf-m-secondary"
757757
disabled={false}
758-
onClick={[Function]}
758+
onClick={[MockFunction]}
759759
tabIndex={null}
760760
type="button"
761761
>
@@ -818,12 +818,12 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
818818
disabled={true}
819819
key="form-reset"
820820
label="Reset"
821-
onClick={[Function]}
821+
onClick={[MockFunction]}
822822
type="button"
823823
>
824824
<Component
825825
isDisabled={true}
826-
onClick={[Function]}
826+
onClick={[MockFunction]}
827827
type="button"
828828
variant="secondary"
829829
>
@@ -836,7 +836,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
836836
undefined,
837837
],
838838
"isDisabled": true,
839-
"onClick": [Function],
839+
"onClick": [MockFunction],
840840
"type": "button",
841841
"variant": "secondary",
842842
}
@@ -845,7 +845,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
845845
>
846846
<Button
847847
isDisabled={true}
848-
onClick={[Function]}
848+
onClick={[MockFunction]}
849849
ouiaContext={
850850
Object {
851851
"isOuia": false,
@@ -860,7 +860,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
860860
aria-label={null}
861861
className="pf-c-button pf-m-secondary"
862862
disabled={true}
863-
onClick={[Function]}
863+
onClick={[MockFunction]}
864864
tabIndex={null}
865865
type="button"
866866
>

‎packages/pf4-component-mapper/src/tests/form-template-common.test.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Form, FormSpy } from '@data-driven-forms/react-form-renderer';
2+
import FormRenderer, { Form, FormSpy } from '@data-driven-forms/react-form-renderer';
33
import { mount } from 'enzyme';
44
import toJson from 'enzyme-to-json';
55
import { FormTemplate } from '../index';
@@ -134,24 +134,29 @@ describe('FormTemplate PF4 Common', () => {
134134
});
135135

136136
it('should call cancel with form values', () => {
137+
const expectedValues = { name: 'some name', b: { type: 'good' } };
138+
139+
const onCancel = jest.fn();
140+
137141
const wrapper = mount(
138-
<ContextWrapper>
139-
<FormTemplate {...initialProps} canReset />
140-
</ContextWrapper>
142+
<FormRenderer
143+
onCancel={(values) => onCancel(values)}
144+
schema={{ fields: [] }}
145+
onSubmit={jest.fn}
146+
FormTemplate={FormTemplate}
147+
initialValues={expectedValues}
148+
/>
141149
);
142150

143-
expect(wrapper.find(Button)).toHaveLength(3);
144-
145-
const CANCEL_INDEX = 2;
151+
expect(wrapper.find(Button)).toHaveLength(2);
146152

147-
const expectedValues = {};
148-
wrapper.update();
153+
const CANCEL_INDEX = 1;
149154

150155
wrapper
151156
.find('button')
152157
.at(CANCEL_INDEX)
153158
.simulate('click');
154159

155-
expect(formOptions.onCancel).toHaveBeenCalledWith(expectedValues);
160+
expect(onCancel).toHaveBeenCalledWith(expectedValues);
156161
});
157162
});

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`<WizardSTepButtons should add custom className to toolbar 1`] = `
2222
Back
2323
</Component>
2424
<Component
25-
onClick={[Function]}
25+
onClick={[MockFunction]}
2626
type="button"
2727
variant="link"
2828
>
@@ -53,7 +53,7 @@ exports[`<WizardSTepButtons should render correctly 1`] = `
5353
Back
5454
</Component>
5555
<Component
56-
onClick={[Function]}
56+
onClick={[MockFunction]}
5757
type="button"
5858
variant="link"
5959
>

0 commit comments

Comments
 (0)