Merge pull request #436 from rvsia/refactorPf4wizard

fix(pf4): refactor wizard, validating disable nav

Author: Hyperkid123

packages/common/src/wizard/reducer.js

@@ -65,6 +65,10 @@ const handleNext = (state, nextStep, formOptions, fields) => {
 export const findCurrentStep = (activeStep, fields) => fields.find(({ name }) => name === activeStep);
 
 const jumpToStep = (state, index, valid, fields, crossroads, formOptions) => {
+  if (index === state.activeStepIndex) {
+    return state;
+  }
+
   const clickOnPreviousStep = state.prevSteps[index];
 
   if (clickOnPreviousStep) {

packages/pf4-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -43,6 +43,8 @@ ValidateButtons.propTypes = {
   renderNextButton: PropTypes.func.isRequired
 };
 
+const asyncValidator = () => new Promise((res) => setTimeout(() => res(), 1000));
+
 export const wizardSchema = {
   fields: [
     {
@@ -70,7 +72,8 @@ export const wizardSchema = {
               component: componentTypes.TEXTAREA,
               name: 'source.source-name',
               type: 'text',
-              label: 'Source name'
+              label: 'Source name',
+              validate: [asyncValidator]
             },
             {
               component: componentTypes.SELECT,

packages/pf4-component-mapper/src/files/wizard.js

@@ -1,4 +1,4 @@
-import React, { cloneElement, useReducer, useEffect } from 'react';
+import React, { useReducer, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
@@ -72,10 +72,6 @@ const WizardInternal = ({
     return null;
   }
 
-  const step = (
-    <WizardStep {...currentStep} formOptions={formOptions} buttonLabels={buttonLabels} buttonsClassName={buttonsClassName} showTitles={showTitles} />
-  );
-
   return (
     <Modal inModal={inModal} container={state.container}>
       <div
@@ -89,27 +85,33 @@ const WizardInternal = ({
         {title && <WizardHeader title={title} description={description} onClose={formOptions.onCancel} />}
         <div className="pf-c-wizard__outer-wrap">
           <WizardNav>
-            <FormSpy>
-              {({ values }) => (
+            <FormSpy subscription={{ values: true, valid: true, validating: true }}>
+              {({ values, valid, validating }) => (
                 <WizardNavigation
                   navSchema={navSchema}
                   activeStepIndex={activeStepIndex}
-                  formOptions={formOptions}
+                  valid={valid}
                   maxStepIndex={maxStepIndex}
                   jumpToStep={jumpToStep}
                   crossroads={crossroads}
                   isDynamic={isDynamic}
                   values={values}
                   setPrevSteps={setPrevSteps}
+                  validating={validating}
                 />
               )}
             </FormSpy>
           </WizardNav>
-          {cloneElement(step, {
-            handleNext: (nextStep) => handleNext(nextStep),
-            handlePrev,
-            disableBack: activeStepIndex === 0
-          })}
+          <WizardStep
+            {...currentStep}
+            formOptions={formOptions}
+            buttonLabels={buttonLabels}
+            buttonsClassName={buttonsClassName}
+            showTitles={showTitles}
+            handleNext={(nextStep) => handleNext(nextStep)}
+            handlePrev={handlePrev}
+            disableBack={activeStepIndex === 0}
+          />
         </div>
       </div>
     </Modal>
@@ -126,11 +128,6 @@ WizardInternal.propTypes = {
   buttonsClassName: PropTypes.string,
   title: PropTypes.any,
   description: PropTypes.any,
-  fields: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-    })
-  ).isRequired,
   isCompactNav: PropTypes.bool,
   inModal: PropTypes.bool,
   setFullWidth: PropTypes.bool,

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

@@ -4,44 +4,25 @@ import { Button } from '@patternfly/react-core';
 import selectNext from '@data-driven-forms/common/src/wizard/select-next';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 
-const SimpleNext = ({ nextStep, valid, handleNext, submit, nextLabel, getState }) => (
+const NextButton = ({ nextStep, valid, handleNext, nextLabel, getState, handleSubmit, submitLabel }) => (
   <Button
     variant="primary"
     type="button"
     isDisabled={!valid || getState().validating}
-    onClick={() => (valid ? handleNext(selectNext(nextStep, getState)) : submit())}
+    onClick={() => (nextStep ? handleNext(selectNext(nextStep, getState)) : handleSubmit())}
   >
-    {nextLabel}
+    {nextStep ? nextLabel : submitLabel}
   </Button>
 );
 
-SimpleNext.propTypes = {
-  valid: PropTypes.bool,
-  handleNext: PropTypes.func.isRequired,
-  submit: PropTypes.func.isRequired,
-  nextLabel: PropTypes.string.isRequired,
-  getState: PropTypes.func.isRequired,
-  nextStep: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]).isRequired
-};
-
-const SubmitButton = ({ handleSubmit, submitLabel }) => (
-  <Button type="button" variant="primary" onClick={handleSubmit}>
-    {submitLabel}
-  </Button>
-);
-
-SubmitButton.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  submitLabel: PropTypes.node.isRequired
-};
-
-const NextButton = ({ nextStep, handleSubmit, submitLabel, ...rest }) =>
-  nextStep ? <SimpleNext nextStep={nextStep} {...rest} /> : <SubmitButton handleSubmit={handleSubmit} submitLabel={submitLabel} />;
-
 NextButton.propTypes = {
   nextStep: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   handleSubmit: PropTypes.func.isRequired,
-  submitLabel: PropTypes.string.isRequired
+  submitLabel: PropTypes.string.isRequired,
+  valid: PropTypes.bool,
+  handleNext: PropTypes.func.isRequired,
+  nextLabel: PropTypes.string.isRequired,
+  getState: PropTypes.func.isRequired
 };
 
 const WizardStepButtons = ({
@@ -57,9 +38,6 @@ const WizardStepButtons = ({
   <footer className={`pf-c-wizard__footer ${buttonsClassName ? buttonsClassName : ''}`}>
     {Buttons ? (
       <Buttons
-        ConditionalNext={SimpleNext}
-        SubmitButton={SubmitButton}
-        SimpleNext={SimpleNext}
         disableBack={disableBack}
         handlePrev={handlePrev}
         nextStep={nextStep}

packages/pf4-component-mapper/src/files/wizard/wizard-nav.js

@@ -20,19 +20,21 @@ const memoValues = (initialValue) => {
 };
 
 const WizardNavigationInternal = React.memo(
-  ({ navSchema, activeStepIndex, maxStepIndex, jumpToStep, formOptions: { valid } }) =>
+  ({ navSchema, activeStepIndex, maxStepIndex, jumpToStep, valid, validating }) =>
     navSchema
       .filter((field) => field.primary)
       .map((step) => {
         const substeps = step.substepOf && navSchema.filter((field) => field.substepOf === step.substepOf);
 
+        const isValid = valid && !validating;
+
         return (
           <WizardNavItem
             key={step.substepOf || step.title}
             text={step.substepOf || step.title}
             isCurrent={substeps ? activeStepIndex >= step.index && activeStepIndex < step.index + substeps.length : activeStepIndex === step.index}
-            isDisabled={valid ? maxStepIndex < step.index : step.index > activeStepIndex}
-            onNavItemClick={(ind) => jumpToStep(ind, valid)}
+            isDisabled={isValid ? maxStepIndex < step.index : step.index > activeStepIndex}
+            onNavItemClick={(ind) => jumpToStep(ind, isValid)}
             step={step.index}
           >
             {substeps && (
@@ -42,8 +44,8 @@ const WizardNavigationInternal = React.memo(
                     key={substep.title}
                     text={substep.title}
                     isCurrent={activeStepIndex === substep.index}
-                    isDisabled={valid ? maxStepIndex < substep.index : substep.index > activeStepIndex}
-                    onNavItemClick={(ind) => jumpToStep(ind, valid)}
+                    isDisabled={isValid ? maxStepIndex < substep.index : substep.index > activeStepIndex}
+                    onNavItemClick={(ind) => jumpToStep(ind, isValid)}
                     step={substep.index}
                   />
                 ))}
@@ -60,12 +62,11 @@ WizardNavigationInternal.propTypes = {
   maxStepIndex: PropTypes.number.isRequired,
   jumpToStep: PropTypes.func.isRequired,
   navSchema: PropTypes.array.isRequired,
-  formOptions: PropTypes.shape({
-    valid: PropTypes.bool.isRequired
-  }).isRequired
+  valid: PropTypes.bool.isRequired,
+  validating: PropTypes.bool.isRequired
 };
 
-const WizardNavigation = ({ activeStepIndex, maxStepIndex, jumpToStep, navSchema, formOptions, setPrevSteps, crossroads, values }) => {
+const WizardNavigation = ({ setPrevSteps, crossroads, values, ...props }) => {
   const [memoValue] = useState(() =>
     memoValues(
       crossroads
@@ -96,26 +97,13 @@ const WizardNavigation = ({ activeStepIndex, maxStepIndex, jumpToStep, navSchema
     }
   });
 
-  return (
-    <WizardNavigationInternal
-      navSchema={navSchema}
-      activeStepIndex={activeStepIndex}
-      maxStepIndex={maxStepIndex}
-      jumpToStep={jumpToStep}
-      formOptions={formOptions}
-    />
-  );
+  return <WizardNavigationInternal {...props} />;
 };
 
 WizardNavigation.propTypes = {
-  activeStepIndex: PropTypes.number.isRequired,
-  maxStepIndex: PropTypes.number.isRequired,
-  jumpToStep: PropTypes.func.isRequired,
   setPrevSteps: PropTypes.func.isRequired,
-  navSchema: PropTypes.array.isRequired,
   values: PropTypes.object.isRequired,
-  crossroads: PropTypes.arrayOf(PropTypes.string),
-  formOptions: PropTypes.object.isRequired
+  crossroads: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default WizardNavigation;