Merge pull request #294 from rvsia/wizardRealtimePredicting

feat(pf4): wizard predicts nextSteps in realtime

Author: Hyperkid123

packages/mui-component-mapper/src/form-fields/form-fields.js

@@ -208,6 +208,7 @@ const FieldInterface = ({
   componentType,
   initialKey,
   FieldArrayProvider, // eslint-disable-line react/prop-types
+  FormSpyProvider, // eslint-disable-line react/prop-types
   ...props
 }) => (
   <Grid xs={ 12 } item style={{ marginBottom: 16, padding: 0 }}>

packages/mui-component-mapper/src/form-fields/sub-form.js

@@ -9,6 +9,7 @@ const SubForm = ({
   title,
   description,
   FieldProvider: _FieldProvider,
+  FormSpyProvider: _FormSpyProvider,
   validate: _validate,
   ...rest
 }) => (
@@ -30,6 +31,7 @@ SubForm.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   FieldProvider: PropTypes.any,
+  FormSpyProvider: PropTypes.any,
   validate: PropTypes.any,
 };
 

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

@@ -139,6 +139,7 @@ const FieldInterface = ({
   componentType,
   initialKey,
   FieldArrayProvider, // eslint-disable-line
+  FormSpyProvider, // eslint-disable-line react/prop-types
   ...props
 }) => (
   fieldMapper(componentType)({

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

@@ -7,6 +7,7 @@ const SubForm = ({
   title,
   description,
   FieldProvider: _FieldProvider,
+  FormSpyProvider: _FormSpyProvider,
   validate: _validate,
   ...rest
 }) => (
@@ -26,6 +27,7 @@ SubForm.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   FieldProvider: PropTypes.any,
+  FormSpyProvider: PropTypes.any,
   validate: PropTypes.any,
 };
 

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

@@ -32,6 +32,7 @@ export const wizardSchema = {
   fields: [{
     component: componentTypes.WIZARD,
     name: 'wizzard',
+    crossroads: ['source.source-type'],
     predictSteps: true,
     //inModal: true,
     title: 'Title',

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

@@ -21,7 +21,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = fieldArrayState
+        this.state = { schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }
     }
 
     render() {

packages/pf4-component-mapper/src/form-fields/fieldArray/index.js

@@ -83,6 +83,7 @@ const DynamicArray = ({
   formOptions,
   meta,
   FieldArrayProvider,
+  FormSpyProvider, // eslint-disable-line react/prop-types
   minItems,
   maxItems,
   noItemsMessage,

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

@@ -136,6 +136,7 @@ const FieldInterface = ({
   componentType,
   initialKey,
   FieldArrayProvider, // catch it and don't send it to components
+  FormSpyProvider, // eslint-disable-line react/prop-types
   ...props
 }) => (
   fieldMapper(componentType)({

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { WizardNavItem, WizardNav } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+
+const memoValues = (initialValue) => {
+  let valueCache = initialValue;
+
+  return (value) => {
+    if (!isEqual(value, valueCache)){
+      valueCache = value;
+      return true;
+    }
+
+    return false;
+  };
+};
+
+const WizardNavigationInternal = React.memo(({
+  navSchema,
+  activeStepIndex,
+  formOptions,
+  maxStepIndex,
+  jumpToStep,
+}) => {
+  return (navSchema
+  .filter(field => field.primary)
+  .map(step => {
+    const substeps = step.substepOf && navSchema.filter(field => field.substepOf === step.substepOf);
+
+    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={ formOptions.valid ? maxStepIndex < step.index : step.index > activeStepIndex }
+      onNavItemClick={ (ind) => jumpToStep(ind, formOptions.valid) }
+      step={ step.index }
+    >
+      { substeps && <WizardNav returnList>
+        { substeps.map(substep => <WizardNavItem
+          key={ substep.title }
+          text={ substep.title }
+          isCurrent={ activeStepIndex === substep.index }
+          isDisabled={ formOptions.valid ?
+            maxStepIndex < substep.index
+            : substep.index > activeStepIndex }
+          onNavItemClick={ (ind) => jumpToStep(ind, formOptions.valid) }
+          step={ substep.index }
+        />) }
+      </WizardNav> }
+    </WizardNavItem>;
+  }));
+}, isEqual);
+
+WizardNavigationInternal.propTypes = {
+  activeStepIndex: PropTypes.number.isRequired,
+  formOptions: PropTypes.shape({
+    valid: PropTypes.bool.isRequired,
+  }).isRequired,
+  maxStepIndex: PropTypes.number.isRequired,
+  jumpToStep: PropTypes.func.isRequired,
+  navSchema: PropTypes.array.isRequired,
+};
+
+class WizardNavigationClass extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { crossroads, values } = this.props;
+
+    this.state = {
+      memoValue: memoValues(crossroads ? crossroads.reduce((acc, curr) => ({
+        ...acc,
+        [curr]: get(values, curr),
+      }), {}) : {}),
+      maxStepIndex: undefined,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.crossroads) {
+      const modifiedRoad = this.props.crossroads.reduce((acc, curr) => ({
+        ...acc,
+        [curr]: get(this.props.values, curr),
+      }), {});
+
+      if (this.state.memoValue(modifiedRoad)) {
+        this.setState({
+          maxStepIndex: this.props.activeStepIndex,
+        });
+        this.props.setPrevSteps();
+      } else {
+        if (prevProps.activeStepIndex !== this.props.activeStepIndex) {
+          this.setState({ maxStepIndex: undefined });
+        }
+      }
+    }
+  }
+
+  render() {
+    const {
+      activeStepIndex,
+      formOptions,
+      maxStepIndex,
+      jumpToStep,
+      navSchema,
+    } = this.props;
+
+    const { maxStepIndex: maxStepIndexState } = this.state;
+
+    const maxIndex = typeof maxStepIndexState === 'number' ? maxStepIndexState : maxStepIndex;
+
+    return (
+      <WizardNavigationInternal
+        navSchema={ navSchema }
+        activeStepIndex={ activeStepIndex }
+        formOptions={ formOptions }
+        maxStepIndex={ maxIndex }
+        jumpToStep={ jumpToStep }
+      />
+    );
+  }
+}
+
+WizardNavigationClass.propTypes = {
+  activeStepIndex: PropTypes.number.isRequired,
+  formOptions: PropTypes.object.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),
+};
+
+export default WizardNavigationClass;

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

@@ -1,13 +1,14 @@
 import React, { cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { WizardHeader, WizardNav, WizardNavItem, Backdrop, Bullseye } from '@patternfly/react-core';
+import { WizardHeader, Backdrop, Bullseye, WizardNav } from '@patternfly/react-core';
 import WizardStep from './wizard-step';
 import './wizard-styles.scss';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import flattenDeep from 'lodash/flattenDeep';
 import handleEnter from '@data-driven-forms/common/src/wizard/enter-handler';
+import WizardNavigation from './wizard-nav';
 
 const DYNAMIC_WIZARD_TYPES = [ 'function', 'object' ];
 
@@ -106,11 +107,12 @@ class Wizard extends React.Component {
         const currentStep = this.findCurrentStep(prevState.prevSteps[index]);
         const currentStepHasStepMapper = DYNAMIC_WIZARD_TYPES.includes(typeof currentStep.nextStep);
 
+        const hardcodedCrossroads = this.props.crossroads;
         const dynamicStepShouldDisableNav = prevState.isDynamic && (currentStepHasStepMapper || !this.props.predictSteps);
 
         const invalidStepShouldDisableNav = valid === false;
 
-        if (dynamicStepShouldDisableNav) {
+        if (dynamicStepShouldDisableNav && !hardcodedCrossroads) {
           newState = {
             navSchema: this.props.predictSteps ? this.createSchema({ currentIndex: index }) : prevState.navSchema.slice(0, index + INDEXING_BY_ZERO),
             prevSteps: prevState.prevSteps.slice(0, index),
@@ -181,73 +183,62 @@ class Wizard extends React.Component {
     return schema;
   };
 
+  handleSubmitFinal = () => this.props.formOptions.onSubmit(
+    this.handleSubmit(
+      this.props.formOptions.getState().values,
+      [ ...this.state.prevSteps, this.state.activeStep ],
+      this.props.formOptions.getRegisteredFields,
+    ),
+    this.props.formOptions
+  );
+
+  setPrevSteps = () => this.setState((prevState) => ({
+    navSchema: this.createSchema({ currentIndex: this.state.activeStepIndex }),
+    prevSteps: prevState.prevSteps.slice(0, this.state.activeStepIndex),
+    maxStepIndex: this.state.activeStepIndex,
+  }))
+
   render() {
     if (this.state.loading) {
       return null;
     }
 
     const {
-      title, description, FieldProvider, formOptions, buttonLabels, buttonsClassName, inModal, setFullWidth, setFullHeight, isCompactNav, showTitles,
+      title,
+      description,
+      FieldProvider,
+      formOptions,
+      buttonLabels,
+      buttonsClassName,
+      inModal,
+      setFullWidth,
+      setFullHeight,
+      isCompactNav,
+      showTitles,
+      FormSpyProvider,
+      crossroads,
     } = this.props;
-    const { activeStepIndex, navSchema, maxStepIndex } = this.state;
-
-    const handleSubmit = () =>
-      formOptions.onSubmit(
-        this.handleSubmit(
-          formOptions.getState().values,
-          [ ...this.state.prevSteps, this.state.activeStep ],
-          formOptions.getRegisteredFields,
-        ),
-        formOptions
-      );
+    const { activeStepIndex, navSchema, maxStepIndex, isDynamic } = this.state;
 
     const currentStep = (
       <WizardStep
         { ...this.findCurrentStep(this.state.activeStep) }
         formOptions={{
           ...formOptions,
-          handleSubmit,
+          handleSubmit: this.handleSubmitFinal,
         }}
         buttonLabels={ buttonLabels }
         FieldProvider={ FieldProvider }
         buttonsClassName={ buttonsClassName }
         showTitles={ showTitles }
       />);
 
-    const createStepsMap = () => navSchema
-    .filter(field => field.primary)
-    .map(step => {
-      const substeps = step.substepOf && navSchema.filter(field => field.substepOf === step.substepOf);
-
-      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={ formOptions.valid ? maxStepIndex < step.index : step.index > activeStepIndex }
-        onNavItemClick={ (ind) => this.jumpToStep(ind, formOptions.valid) }
-        step={ step.index }
-      >
-        { substeps && <WizardNav returnList>
-          { substeps.map(substep => <WizardNavItem
-            key={ substep.title }
-            text={ substep.title }
-            isCurrent={ activeStepIndex === substep.index }
-            isDisabled={ formOptions.valid ?
-              maxStepIndex < substep.index
-              : substep.index > activeStepIndex }
-            onNavItemClick={ (ind) => this.jumpToStep(ind, formOptions.valid) }
-            step={ substep.index }
-          />) }
-        </WizardNav> }
-      </WizardNavItem>;
-    });
-
     return (
       <Modal inModal={ inModal } container={ this.container }>
         <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 => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext, handleSubmit) }
+          onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext,  this.handleSubmitFinal) }
         >
           { title && <WizardHeader
             title={ title }
@@ -256,7 +247,21 @@ class Wizard extends React.Component {
           /> }
           <div className="pf-c-wizard__outer-wrap">
             <WizardNav>
-              { createStepsMap() }
+              <FormSpyProvider>
+                { ({ values }) => (
+                  <WizardNavigation
+                    navSchema={ navSchema }
+                    activeStepIndex={ activeStepIndex }
+                    formOptions={ formOptions }
+                    maxStepIndex={ maxStepIndex }
+                    jumpToStep={ this.jumpToStep }
+                    crossroads={ crossroads }
+                    isDynamic={ isDynamic }
+                    values={ values }
+                    setPrevSteps={ this.setPrevSteps }
+                  />
+                ) }
+              </FormSpyProvider>
             </WizardNav>
             { cloneElement(currentStep, {
               handleNext: (nextStep) => this.handleNext(nextStep, formOptions.getRegisteredFields),
@@ -281,6 +286,7 @@ Wizard.propTypes = {
   title: PropTypes.any,
   description: PropTypes.any,
   FieldProvider: PropTypes.PropTypes.oneOfType([ PropTypes.object, PropTypes.func ]).isRequired,
+  FormSpyProvider: PropTypes.PropTypes.oneOfType([ PropTypes.object, PropTypes.func ]).isRequired,
   formOptions: PropTypes.shape({
     getState: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
@@ -298,6 +304,7 @@ Wizard.propTypes = {
   isDynamic: PropTypes.bool,
   showTitles: PropTypes.bool,
   predictSteps: PropTypes.bool,
+  crossroads: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultLabels = {