feat(common): wizard - use context to share props

- allow to set initialState
- state is being sent in onCancel and onSubmit

Author: rvsia

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

@@ -1,29 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import WizardCommon from '@data-driven-forms/common/src/wizard/wizard';
-import { FormSpy } from '@data-driven-forms/react-form-renderer';
+import { FormSpy, WizardContext } from '@data-driven-forms/react-form-renderer';
 
 import StepButtons from './wizard/step-buttons';
 
-const WizardInternal = ({ currentStep, formOptions, onKeyDown, WizardProps, ...props }) => (
-  <div onKeyDown={onKeyDown} {...WizardProps}>
-    {currentStep.fields.map((item) => formOptions.renderForm([item], formOptions))}
-    <FormSpy subscription={{ valid: true, submitting: true, validating: true }}>
-      {({ valid, submitting, validating }) => (
-        <StepButtons isNextDisabled={!valid || submitting || validating} {...props} currentStep={currentStep} formOptions={formOptions} />
-      )}
-    </FormSpy>
-  </div>
-);
+const WizardInternal = ({ WizardProps, ...props }) => {
+  const { formOptions, currentStep, onKeyDown, ...rest } = useContext(WizardContext);
+
+  return (
+    <div onKeyDown={onKeyDown} {...WizardProps}>
+      {currentStep.fields.map((item) => formOptions.renderForm([item], formOptions))}
+      <FormSpy subscription={{ valid: true, submitting: true, validating: true }}>
+        {({ valid, submitting, validating }) => (
+          <StepButtons isNextDisabled={!valid || submitting || validating} {...props} {...rest} currentStep={currentStep} formOptions={formOptions} />
+        )}
+      </FormSpy>
+    </div>
+  );
+};
 
 WizardInternal.propTypes = {
-  currentStep: PropTypes.object,
-  onKeyDown: PropTypes.func,
-  formOptions: PropTypes.shape({
-    onCancel: PropTypes.func,
-    renderForm: PropTypes.func,
-    getState: PropTypes.func
-  }),
   WizardProps: PropTypes.object
 };
 

packages/common/src/wizard/reducer.js

@@ -53,10 +53,8 @@ const handleNext = (state, nextStep, formOptions, fields) => {
     maxStepIndex: newActiveIndex > state.maxStepIndex ? newActiveIndex : state.maxStepIndex,
     navSchema: state.isDynamic
       ? createSchema({
-          ...state,
           fields,
-          formOptions,
-          currentIndex: newActiveIndex
+          formOptions
         })
       : state.navSchema
   };
@@ -103,10 +101,8 @@ const jumpToStep = (state, index, valid, fields, crossroads, formOptions) => {
       updatedState = {
         ...updatedState,
         navSchema: createSchema({
-          ...updatedState,
           formOptions,
-          fields,
-          currentIndex: index
+          fields
         }),
         prevSteps: newState.prevSteps.slice(0, index),
         maxStepIndex: index
@@ -138,10 +134,8 @@ const reducer = (state, { type, payload }) => {
         ...state,
         loading: false,
         navSchema: createSchema({
-          ...state,
           fields: payload.fields,
-          formOptions: payload.formOptions,
-          currentIndex: 0
+          formOptions: payload.formOptions
         })
       };
     case 'handleNext':
@@ -152,10 +146,8 @@ const reducer = (state, { type, payload }) => {
         prevSteps: state.prevSteps.slice(0, state.activeStepIndex),
         maxStepIndex: state.activeStepIndex,
         navSchema: createSchema({
-          ...state,
           fields: payload.fields,
-          formOptions: payload.formOptions,
-          currentIndex: state.activeStepIndex
+          formOptions: payload.formOptions
         })
       };
     case 'jumpToStep':

packages/common/src/wizard/wizard.js

@@ -1,21 +1,23 @@
 import React, { useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import { useFormApi, WizardContext } from '@data-driven-forms/react-form-renderer';
 
 import get from 'lodash/get';
 import set from 'lodash/set';
 import flattenDeep from 'lodash/flattenDeep';
 import handleEnter from './enter-handler';
 import reducer, { DYNAMIC_WIZARD_TYPES, findCurrentStep } from './reducer';
+import selectNext from './select-next';
 
-const Wizard = ({ fields, isDynamic, crossroads, Wizard, component, ...props }) => {
+const Wizard = ({ fields, isDynamic, crossroads, Wizard, component, initialState, ...props }) => {
   const formOptions = useFormApi();
 
   const [state, dispatch] = useReducer(reducer, {
     activeStep: fields[0].name,
     prevSteps: [],
     activeStepIndex: 0,
     maxStepIndex: 0,
+    ...initialState,
     isDynamic: isDynamic || fields.some(({ nextStep }) => DYNAMIC_WIZARD_TYPES.includes(typeof nextStep)),
     loading: true
   });
@@ -45,10 +47,13 @@ const Wizard = ({ fields, isDynamic, crossroads, Wizard, component, ...props })
     return finalObject;
   };
 
+  const onCancel = () => formOptions.onCancel(state);
+
   const handleSubmit = () =>
     formOptions.onSubmit(
       prepareValues(formOptions.getState().values, [...state.prevSteps, state.activeStep], formOptions.getRegisteredFields),
-      formOptions
+      formOptions,
+      state
     );
 
   const jumpToStep = (index, valid) => dispatch({ type: 'jumpToStep', payload: { index, valid, fields, crossroads, formOptions } });
@@ -64,25 +69,30 @@ const Wizard = ({ fields, isDynamic, crossroads, Wizard, component, ...props })
   const onKeyDown = (e) => handleEnter(e, formOptions, state.activeStep, findCurrentStepWrapped, handleNext, handleSubmit);
 
   return (
-    <Wizard
-      {...props}
-      handleNext={handleNext}
-      onKeyDown={onKeyDown}
-      setPrevSteps={setPrevSteps}
-      currentStep={findCurrentStep(state.activeStep, fields)}
-      jumpToStep={jumpToStep}
-      handlePrev={handlePrev}
-      formOptions={{
-        ...formOptions,
-        handleSubmit
+    <WizardContext.Provider
+      value={{
+        handleNext,
+        onKeyDown,
+        setPrevSteps,
+        currentStep: findCurrentStep(state.activeStep, fields),
+        jumpToStep,
+        handlePrev,
+        formOptions: {
+          ...formOptions,
+          onCancel,
+          handleSubmit
+        },
+        navSchema: state.navSchema,
+        activeStepIndex: state.activeStepIndex,
+        maxStepIndex: state.maxStepIndex,
+        isDynamic: state.isDynamic,
+        crossroads,
+        prevSteps: state.prevSteps,
+        selectNext
       }}
-      navSchema={state.navSchema}
-      activeStepIndex={state.activeStepIndex}
-      maxStepIndex={state.maxStepIndex}
-      isDynamic={state.isDynamic}
-      crossroads={crossroads}
-      prevSteps={state.prevSteps}
-    />
+    >
+      <Wizard {...props} />
+    </WizardContext.Provider>
   );
 };
 
@@ -95,7 +105,8 @@ Wizard.propTypes = {
   isDynamic: PropTypes.bool,
   crossroads: PropTypes.arrayOf(PropTypes.string),
   Wizard: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  component: PropTypes.any
+  component: PropTypes.any,
+  initialState: PropTypes.object
 };
 
 export default Wizard;

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

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
+import { WizardContext } from '@data-driven-forms/react-form-renderer';
+
 import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -16,21 +18,9 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const WizardInternal = ({
-  currentStep,
-  formOptions,
-  activeStepIndex,
-  prevSteps,
-  handleNext,
-  handlePrev,
-  buttonLabels,
-  stepsInfo,
-  ButtonContainerProps,
-  StepperProps,
-  WizardBodyProps,
-  WizardProps,
-  onKeyDown
-}) => {
+const WizardInternal = ({ buttonLabels, stepsInfo, ButtonContainerProps, StepperProps, WizardBodyProps, WizardProps }) => {
+  const { formOptions, currentStep, handlePrev, onKeyDown, handleNext, activeStepIndex, prevSteps } = useContext(WizardContext);
+
   const classes = useStyles();
 
   const buttonLabelsFinal = {
@@ -61,19 +51,6 @@ const WizardInternal = ({
 };
 
 WizardInternal.propTypes = {
-  currentStep: PropTypes.object,
-  handlePrev: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  jumpToStep: PropTypes.func,
-  setPrevSteps: PropTypes.func,
-  handleNext: PropTypes.func,
-  activeStepIndex: PropTypes.number,
-  formOptions: PropTypes.shape({
-    onCancel: PropTypes.func,
-    renderForm: PropTypes.func
-  }),
-  prevSteps: PropTypes.array,
-  // ^^ common props
   buttonLabels: PropTypes.object,
   stepsInfo: PropTypes.arrayOf(
     PropTypes.shape({

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import WizardStep from './wizard/wizard-step';
 import PropTypes from 'prop-types';
 import { Wizard as PfWizard, Modal, Icon } from 'patternfly-react';
-import Wizard, { wizardProps } from '@data-driven-forms/common/src/wizard/wizard';
+import { WizardContext } from '@data-driven-forms/react-form-renderer';
+import Wizard from '@data-driven-forms/common/src/wizard/wizard';
 
 const defaultButtonLabels = {
   cancel: 'Cancel',
@@ -11,7 +12,9 @@ const defaultButtonLabels = {
   submit: 'Submit'
 };
 
-const WizardInternal = ({ title, buttonLabels, stepsInfo, inModal, onKeyDown, formOptions, handleNext, handlePrev, prevSteps, currentStep }) => {
+const WizardInternal = ({ title, buttonLabels, stepsInfo, inModal }) => {
+  const { formOptions, currentStep, handlePrev, onKeyDown, handleNext, prevSteps } = useContext(WizardContext);
+
   const renderSteps = () =>
     stepsInfo.map((step, stepIndex) => (
       <PfWizard.Step
@@ -58,14 +61,7 @@ WizardInternal.propTypes = {
   title: PropTypes.node,
   buttonLabels: PropTypes.object,
   stepsInfo: PropTypes.array,
-  inModal: PropTypes.bool,
-  ...wizardProps
-};
-
-WizardInternal.defaultProps = {
-  title: undefined,
-  stepsInfo: undefined,
-  inModal: false
+  inModal: PropTypes.bool
 };
 
 const WizardFinal = (props) => <Wizard Wizard={WizardInternal} {...props} />;