Handle enter on PF3 submit wizard and share code

Author: rvsia

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

@@ -0,0 +1,27 @@
+import selectNext from './select-next';
+
+const enterHandler = (e, formOptions, activeStep, findCurrentStep, handleNext, handleSubmit) => {
+  if (e.key === 'Enter'){
+    const isNotButton = e.target.type !== 'button';
+
+    if (isNotButton) {
+      e.preventDefault();
+
+      const schemaNextStep = findCurrentStep(activeStep).nextStep;
+      const hasCustomButtons = findCurrentStep(activeStep).buttons;
+
+      let nextStep;
+      if (schemaNextStep) {
+        nextStep = selectNext(schemaNextStep, formOptions.getState);
+      }
+
+      if (formOptions.valid && nextStep && !hasCustomButtons) {
+        handleNext(nextStep, formOptions.getRegisteredFields);
+      } else if (formOptions.valid && !schemaNextStep && !hasCustomButtons) {
+        handleSubmit();
+      }
+    }
+  }
+};
+
+export default enterHandler;

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

@@ -0,0 +1,17 @@
+import get from 'lodash/get';
+
+const selectNext = (nextStep, getState) => {
+  if (typeof nextStep === 'string') {
+    return nextStep;
+  }
+
+  if (typeof nextStep === 'function') {
+    return nextStep({ values: getState().values });
+  }
+
+  const selectedValue = get(getState().values, nextStep.when);
+
+  return nextStep.stepMapper[selectedValue];
+};
+
+export default selectNext;

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

@@ -114,7 +114,7 @@ class App extends React.Component {
             schemaType="default"
             formFieldsMapper={formFieldsMapper}
             layoutMapper={layoutMapper}
-            schema={selectSchema}
+            schema={sandbox}
             onCancel={() => console.log('cancel')}
           />
         </Row>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import WizardStep from './wizard-step';
 import PropTypes from 'prop-types';
 import { Wizard as PfWizard, Modal, Icon } from 'patternfly-react';
+import handleEnter from '@data-driven-forms/common/src/wizard/enter-handler';
 
 const defaultButtonLabels = {
   cancel: 'Cancel',
@@ -51,7 +52,8 @@ class Wizard extends React.Component {
     };
 
     return (
-      <React.Fragment>
+      <div
+        onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext, handleSubmit) }>
         { title && <Modal.Header>
           { inModal &&  <button className="close" onClick={ formOptions.onCancel } aria-hidden="true" aria-label="Close">
             <Icon type="pf" name="close" />
@@ -71,7 +73,7 @@ class Wizard extends React.Component {
           }}
           FieldProvider={ FieldProvider }
         />
-      </React.Fragment>
+      </div>
     );
   }
 }

packages/pf4-component-mapper/src/form-fields/wizard/step-buttons.js

@@ -1,21 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
-import get from 'lodash/get';
-
-export const selectNext = (nextStep, getState) => {
-  if (typeof nextStep === 'string') {
-    return nextStep;
-  }
-
-  if (typeof nextStep === 'function') {
-    return nextStep({ values: getState().values });
-  }
-
-  const selectedValue = get(getState().values, nextStep.when);
-
-  return nextStep.stepMapper[selectedValue];
-};
+import selectNext from '@data-driven-forms/common/src/wizard/select-next';
 
 const SimpleNext = ({
   nextStep,

packages/pf4-component-mapper/src/form-fields/wizard/wizard.js

@@ -7,7 +7,7 @@ import './wizard-styles.scss';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import flattenDeep from 'lodash/flattenDeep';
-import { selectNext } from './step-buttons';
+import handleEnter from '@data-driven-forms/common/src/wizard/enter-handler';
 
 const DYNAMIC_WIZARD_TYPES = [ 'function', 'object' ];
 
@@ -247,29 +247,7 @@ class Wizard extends React.Component {
         <div className={ `pf-c-wizard ${inModal ? '' : 'no-shadow'} ${isCompactNav ? 'pf-m-compact-nav' : ''} ${setFullWidth ? 'pf-m-full-width' : ''} ${setFullHeight ? 'pf-m-full-height' : ''}` }
           role="dialog"
           aria-modal={ inModal ? 'true' : undefined }
-          onKeyDown={ e => {
-            if (e.key === 'Enter'){
-              const isNotButton = e.target.type !== 'button';
-
-              if (isNotButton) {
-                e.preventDefault();
-
-                const schemaNextStep = this.findCurrentStep(this.state.activeStep).nextStep;
-                const hasCustomButtons = this.findCurrentStep(this.state.activeStep).buttons;
-
-                let nextStep;
-                if (schemaNextStep) {
-                  nextStep = selectNext(schemaNextStep, formOptions.getState);
-                }
-
-                if (formOptions.valid && nextStep && !hasCustomButtons) {
-                  this.handleNext(nextStep, formOptions.getRegisteredFields);
-                } else if (formOptions.valid && !schemaNextStep && !hasCustomButtons) {
-                  handleSubmit();
-                }
-              }
-            }
-          } }
+          onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext, handleSubmit) }
         >
           { title && <WizardHeader
             title={ title }