feat(pf4): wizard predicts nextSteps in realtime

rvsia · rvsia · commit e8a930cc9283 · 2020-01-23T17:03:01.000+01:00
diff --git a/packages/mui-component-mapper/src/form-fields/form-fields.js b/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 }}>
diff --git a/packages/mui-component-mapper/src/form-fields/sub-form.js b/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,
 };
 
diff --git a/packages/pf3-component-mapper/src/form-fields/form-fields.js b/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)({
diff --git a/packages/pf4-component-mapper/demo/demo-schemas/wizard-schema.js b/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',
diff --git a/packages/pf4-component-mapper/demo/index.js b/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() {
diff --git a/packages/pf4-component-mapper/src/form-fields/fieldArray/index.js b/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,
diff --git a/packages/pf4-component-mapper/src/form-fields/form-fields.js b/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)({
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard-nav.js b/packages/pf4-component-mapper/src/form-fields/wizard/wizard-nav.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import { WizardNavItem, WizardNav } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
+
+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);
+
+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 }
+      />
+    );
+  }
+}
+
+export default WizardNavigationClass;
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard.js b/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),
@@ -187,9 +189,21 @@ class Wizard extends React.Component {
     }
 
     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 { activeStepIndex, navSchema, maxStepIndex, isDynamic } = this.state;
 
     const handleSubmit = () =>
       formOptions.onSubmit(
@@ -214,34 +228,6 @@ class Wizard extends React.Component {
         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' : ''}` }
@@ -256,7 +242,25 @@ 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.setState((prevState) => ({
+                      navSchema: this.createSchema({ currentIndex: activeStepIndex }),
+                      prevSteps: prevState.prevSteps.slice(0, activeStepIndex),
+                      maxStepIndex: activeStepIndex,
+                    })) }
+                  />
+                ) }
+              </FormSpyProvider>
             </WizardNav>
             { cloneElement(currentStep, {
               handleNext: (nextStep) => this.handleNext(nextStep, formOptions.getRegisteredFields),
@@ -281,6 +285,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 +303,7 @@ Wizard.propTypes = {
   isDynamic: PropTypes.bool,
   showTitles: PropTypes.bool,
   predictSteps: PropTypes.bool,
+  crossroads: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultLabels = {
diff --git a/packages/react-form-renderer/src/form-renderer/field-wrapper.js b/packages/react-form-renderer/src/form-renderer/field-wrapper.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormSpy } from 'react-final-form';
 
 import { components } from '../constants';
 import FieldProvider from './field-provider';
@@ -38,7 +39,7 @@ const FieldWrapper = ({ componentType, validate, component, ...rest }) => {
   const Component = component;
   return shouldWrapInField(componentType)
     ? <FieldProvider { ...componentProps } />
-    : <Component validate={ composeValidators(validate) } { ...rest } FieldProvider={ FieldProvider } />;
+    : <Component validate={ composeValidators(validate) } { ...rest } FieldProvider={ FieldProvider } FormSpyProvider={ FormSpy } />;
 };
 
 FieldWrapper.propTypes = {
diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap
@@ -960,6 +960,7 @@ exports[`<FormRenderer /> should render hidden field 1`] = `
             >
               <Component
                 FieldProvider={[Function]}
+                FormSpyProvider={[Function]}
                 formOptions={
                   Object {
                     "batch": [Function],
@@ -1079,6 +1080,7 @@ exports[`<FormRenderer /> should render hidden field 1`] = `
               >
                 <Component
                   FieldProvider={[Function]}
+                  FormSpyProvider={[Function]}
                   formOptions={
                     Object {
                       "batch": [Function],
diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/render-form.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/render-form.test.js.snap

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {`
`21`	`21`	`class App extends React.Component {`
`22`	`22`	`constructor(props) {`
`23`	`23`	`super(props);`
`24`		`- this.state = fieldArrayState`
	`24`	`+ this.state = { schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`render() {`