Skip to content

Commit 8df00ca

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #8 from rvsia/form-submit
Form submit by pressing enter
2 parents 1521ac0 + 52da8b5 commit 8df00ca

File tree

19 files changed

+1147
-865
lines changed

19 files changed

+1147
-865
lines changed

‎packages/common/src/wizard/enter-handler.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import selectNext from './select-next';
2+
3+
const enterHandler = (e, formOptions, activeStep, findCurrentStep, handleNext, handleSubmit) => {
4+
if (e.key === 'Enter'){
5+
const isNotButton = e.target.type !== 'button';
6+
7+
if (isNotButton) {
8+
e.preventDefault();
9+
10+
const schemaNextStep = findCurrentStep(activeStep).nextStep;
11+
const hasCustomButtons = findCurrentStep(activeStep).buttons;
12+
13+
let nextStep;
14+
if (schemaNextStep) {
15+
nextStep = selectNext(schemaNextStep, formOptions.getState);
16+
}
17+
18+
if (formOptions.valid && nextStep && !hasCustomButtons) {
19+
handleNext(nextStep, formOptions.getRegisteredFields);
20+
} else if (formOptions.valid && !schemaNextStep && !hasCustomButtons) {
21+
handleSubmit();
22+
}
23+
}
24+
}
25+
};
26+
27+
export default enterHandler;

‎packages/common/src/wizard/select-next.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import get from 'lodash/get';
2+
3+
const selectNext = (nextStep, getState) => {
4+
if (typeof nextStep === 'string') {
5+
return nextStep;
6+
}
7+
8+
if (typeof nextStep === 'function') {
9+
return nextStep({ values: getState().values });
10+
}
11+
12+
const selectedValue = get(getState().values, nextStep.when);
13+
14+
return nextStep.stepMapper[selectedValue];
15+
};
16+
17+
export default selectNext;

‎packages/pf3-component-mapper/demo/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ class App extends React.Component {
114114
schemaType="default"
115115
formFieldsMapper={formFieldsMapper}
116116
layoutMapper={layoutMapper}
117-
schema={selectSchema}
117+
schema={sandbox}
118118
onCancel={() => console.log('cancel')}
119119
/>
120120
</Row>

‎packages/pf3-component-mapper/src/form-fields/form-fields.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ const selectComponent = ({
7272
disabled={ isDisabled }
7373
checked={ input.value }
7474
onChange={ ({ target: { checked }}) => input.onChange(checked) }
75+
formOptions={ formOptions }
7576
/>,
7677
[componentTypes.DATE_PICKER]: () => <DateTimePicker pristine={ meta.pristine } onChange={ input.onChange } value={ input.value } isDisabled={ isDisabled } { ...rest } />,
7778
})[componentType];

‎packages/pf3-component-mapper/src/form-fields/switch-field.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,24 @@ class Switch extends React.Component {
4747
}
4848

4949
render() {
50-
const { onText, offText, disabled, isReadOnly, bsSize, ...props } = this.props;
50+
const { onText, offText, disabled, isReadOnly, bsSize, formOptions, ...props } = this.props;
5151
return (
5252
<div>
5353
<label
5454
className={ `pf3-switch${disabled || isReadOnly ? ' disabled' : ''}${bsSize === 'mini' || bsSize === 'mn' ? ' mini' : ''}` }
5555
style={{ width: this.state.labelWidth + DIVIDER_SIZE + COMBINED_MARGIN }}
56+
tabIndex={ disabled || isReadOnly ? -1 : 0 }
57+
onKeyDown={ (e) => {
58+
const SPACEBAR_CODE = 32;
59+
const ENTER_CODE = 13;
60+
if (e.keyCode === SPACEBAR_CODE) {
61+
e.preventDefault();
62+
props.onChange({ target: { checked: !props.checked }});
63+
} else if (e.keyCode === ENTER_CODE) {
64+
e.preventDefault();
65+
formOptions.handleSubmit();
66+
}
67+
} }
5668
>
5769
<input type="checkbox" { ...props } disabled={ disabled || isReadOnly } />
5870
<span className={ `pf3-switch-slider${props.checked ? ' checked' : ''}` }>
@@ -90,6 +102,9 @@ Switch.propTypes = {
90102
checked: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string ]),
91103
onChange: PropTypes.func.isRequired,
92104
bsSize: PropTypes.oneOf([ 'mn', 'mini' ]),
105+
formOptions: PropTypes.shape({
106+
handleSubmit: PropTypes.func.isRequired,
107+
}).isRequired,
93108
};
94109

95110
Switch.defaultProps = {

‎packages/pf3-component-mapper/src/form-fields/wizzard/wizzard.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import WizardStep from './wizard-step';
33
import PropTypes from 'prop-types';
44
import { Wizard as PfWizard, Modal, Icon } from 'patternfly-react';
5+
import handleEnter from '@data-driven-forms/common/src/wizard/enter-handler';
56

67
const defaultButtonLabels = {
78
cancel: 'Cancel',
@@ -51,7 +52,8 @@ class Wizard extends React.Component {
5152
};
5253

5354
return (
54-
<React.Fragment>
55+
<div
56+
onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext, handleSubmit) }>
5557
{ title && <Modal.Header>
5658
{ inModal && <button className="close" onClick={ formOptions.onCancel } aria-hidden="true" aria-label="Close">
5759
<Icon type="pf" name="close" />
@@ -71,7 +73,7 @@ class Wizard extends React.Component {
7173
}}
7274
FieldProvider={ FieldProvider }
7375
/>
74-
</React.Fragment>
76+
</div>
7577
);
7678
}
7779
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,11 +411,13 @@ exports[`FormFields <SwitchField /> should render Switch correctly 1`] = `
411411
<div>
412412
<label
413413
className="pf3-switch"
414+
onKeyDown={[Function]}
414415
style={
415416
Object {
416417
"width": 80,
417418
}
418419
}
420+
tabIndex={0}
419421
>
420422
<input
421423
checked=""
@@ -551,11 +553,13 @@ exports[`FormFields <SwitchField /> should render Switch with label correctly 1`
551553
<div>
552554
<label
553555
className="pf3-switch"
556+
onKeyDown={[Function]}
554557
style={
555558
Object {
556559
"width": 80,
557560
}
558561
}
562+
tabIndex={0}
559563
>
560564
<input
561565
checked=""
@@ -681,11 +685,13 @@ exports[`FormFields <SwitchField /> should render Switch with onText (custom pro
681685
<div>
682686
<label
683687
className="pf3-switch"
688+
onKeyDown={[Function]}
684689
style={
685690
Object {
686691
"width": 80,
687692
}
688693
}
694+
tabIndex={0}
689695
>
690696
<input
691697
checked=""
@@ -811,11 +817,13 @@ exports[`FormFields <SwitchField /> should render Switch with placeholder correc
811817
<div>
812818
<label
813819
className="pf3-switch"
820+
onKeyDown={[Function]}
814821
style={
815822
Object {
816823
"width": 80,
817824
}
818825
}
826+
tabIndex={0}
819827
>
820828
<input
821829
checked=""
@@ -942,11 +950,13 @@ exports[`FormFields <SwitchField /> should render disabled Switch correctly 1`]
942950
<div>
943951
<label
944952
className="pf3-switch disabled"
953+
onKeyDown={[Function]}
945954
style={
946955
Object {
947956
"width": 80,
948957
}
949958
}
959+
tabIndex={-1}
950960
>
951961
<input
952962
checked=""
@@ -1074,11 +1084,13 @@ exports[`FormFields <SwitchField /> should render mini Switch correctly 1`] = `
10741084
<div>
10751085
<label
10761086
className="pf3-switch mini"
1087+
onKeyDown={[Function]}
10771088
style={
10781089
Object {
10791090
"width": 80,
10801091
}
10811092
}
1093+
tabIndex={0}
10821094
>
10831095
<input
10841096
checked=""
@@ -1205,11 +1217,13 @@ exports[`FormFields <SwitchField /> should render readOnly Switch correctly 1`]
12051217
<div>
12061218
<label
12071219
className="pf3-switch disabled"
1220+
onKeyDown={[Function]}
12081221
style={
12091222
Object {
12101223
"width": 80,
12111224
}
12121225
}
1226+
tabIndex={-1}
12131227
>
12141228
<input
12151229
checked=""
@@ -1337,11 +1351,13 @@ exports[`FormFields <SwitchField /> should render sm Switch correctly 1`] = `
13371351
<div>
13381352
<label
13391353
className="pf3-switch mini"
1354+
onKeyDown={[Function]}
13401355
style={
13411356
Object {
13421357
"width": 80,
13431358
}
13441359
}
1360+
tabIndex={0}
13451361
>
13461362
<input
13471363
checked=""

0 commit comments

Comments
 (0)