Merge pull request #398 from rvsia/wizardCommon

[V2] Wizard common

Author: Hyperkid123

packages/common/src/wizard/reducer.js

@@ -0,0 +1,164 @@
+import get from 'lodash/get';
+
+export const DYNAMIC_WIZARD_TYPES = ['function', 'object'];
+
+const createSchema = ({ formOptions, fields }) => {
+  const { values } = formOptions.getState();
+  let schema = [];
+  let field = fields[0]; // find first wizard step
+  let index = -1;
+
+  while (field) {
+    index += 1;
+    schema = [
+      ...schema,
+      {
+        title: field.title,
+        substepOf: field.substepOf,
+        index,
+        primary: !schema[schema.length - 1] || !field.substepOf || field.substepOf !== schema[schema.length - 1].substepOf
+      }
+    ];
+
+    let nextStep = field.nextStep;
+
+    if (typeof field.nextStep === 'object') {
+      nextStep = nextStep.stepMapper[get(values, nextStep.when)];
+    }
+
+    if (typeof field.nextStep === 'function') {
+      nextStep = field.nextStep({ values });
+    }
+
+    if (nextStep) {
+      field = fields.find(({ name }) => name === nextStep);
+    } else {
+      field = undefined;
+    }
+  }
+
+  return schema;
+};
+
+const handleNext = (state, nextStep, formOptions, fields) => {
+  const newActiveIndex = state.activeStepIndex + 1;
+  const shouldInsertStepIntoHistory = state.prevSteps.includes(state.activeStep);
+
+  return {
+    ...state,
+    registeredFieldsHistory: { ...state.registeredFieldsHistory, [state.activeStep]: formOptions.getRegisteredFields() },
+    activeStep: nextStep,
+    prevSteps: shouldInsertStepIntoHistory ? state.prevSteps : [...state.prevSteps, state.activeStep],
+    activeStepIndex: newActiveIndex,
+    maxStepIndex: newActiveIndex > state.maxStepIndex ? newActiveIndex : state.maxStepIndex,
+    navSchema: state.isDynamic
+      ? createSchema({
+          ...state,
+          fields,
+          formOptions,
+          currentIndex: newActiveIndex
+        })
+      : state.navSchema
+  };
+};
+
+export const findCurrentStep = (activeStep, fields) => fields.find(({ name }) => name === activeStep);
+
+const jumpToStep = (state, index, valid, fields, crossroads, formOptions) => {
+  const clickOnPreviousStep = state.prevSteps[index];
+
+  if (clickOnPreviousStep) {
+    let originalActiveStep;
+
+    const includeActiveStep = state.prevSteps.includes(state.activeStep, fields);
+    originalActiveStep = state.activeStep;
+
+    const newState = {
+      ...state,
+      activeStep: state.prevSteps[index],
+      prevSteps: includeActiveStep ? state.prevSteps : [...state.prevSteps, state.activeStep],
+      activeStepIndex: index
+    };
+
+    const INDEXING_BY_ZERO = 1;
+
+    const currentStep = findCurrentStep(newState.prevSteps[index], fields);
+
+    const currentStepHasStepMapper = DYNAMIC_WIZARD_TYPES.includes(typeof currentStep.nextStep);
+
+    const hardcodedCrossroads = crossroads;
+    const dynamicStepShouldDisableNav = newState.isDynamic && currentStepHasStepMapper;
+
+    const invalidStepShouldDisableNav = valid === false;
+
+    let updatedState = {
+      ...newState
+    };
+
+    if (dynamicStepShouldDisableNav && !hardcodedCrossroads) {
+      updatedState = {
+        ...updatedState,
+        navSchema: createSchema({
+          ...updatedState,
+          formOptions,
+          fields,
+          currentIndex: index
+        }),
+        prevSteps: newState.prevSteps.slice(0, index),
+        maxStepIndex: index
+      };
+    } else if (currentStep.disableForwardJumping) {
+      updatedState = {
+        ...updatedState,
+        prevSteps: newState.prevSteps.slice(0, index),
+        maxStepIndex: index
+      };
+    } else if (invalidStepShouldDisableNav) {
+      const indexOfCurrentStep = newState.prevSteps.indexOf(originalActiveStep);
+
+      updatedState = {
+        ...updatedState,
+        prevSteps: newState.prevSteps.slice(0, indexOfCurrentStep + INDEXING_BY_ZERO),
+        maxStepIndex: newState.prevSteps.slice(0, indexOfCurrentStep + INDEXING_BY_ZERO).length - INDEXING_BY_ZERO
+      };
+    }
+
+    return updatedState;
+  }
+};
+
+const reducer = (state, { type, payload }) => {
+  switch (type) {
+    case 'finishLoading':
+      return {
+        ...state,
+        loading: false,
+        navSchema: createSchema({
+          ...state,
+          fields: payload.fields,
+          formOptions: payload.formOptions,
+          currentIndex: 0
+        })
+      };
+    case 'handleNext':
+      return handleNext(state, payload.nextStep, payload.formOptions, payload.fields);
+    case 'setPrevSteps':
+      return {
+        ...state,
+        prevSteps: state.prevSteps.slice(0, state.activeStepIndex),
+        maxStepIndex: state.activeStepIndex,
+        navSchema: createSchema({
+          ...state,
+          fields: payload.fields,
+          formOptions: payload.formOptions,
+          currentIndex: state.activeStepIndex
+        })
+      };
+    case 'jumpToStep':
+      return jumpToStep(state, payload.index, payload.valid, payload.fields, payload.crossroads, payload.formOptions);
+    default:
+      return state;
+  }
+};
+
+export default reducer;

packages/common/src/wizard/wizard.js

@@ -0,0 +1,116 @@
+import React, { useReducer, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useFormApi } 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';
+
+const Wizard = ({ fields, isDynamic, crossroads, Wizard, ...props }) => {
+  const formOptions = useFormApi();
+
+  const [state, dispatch] = useReducer(reducer, {
+    activeStep: fields[0].name,
+    prevSteps: [],
+    activeStepIndex: 0,
+    maxStepIndex: 0,
+    isDynamic: isDynamic || fields.some(({ nextStep }) => DYNAMIC_WIZARD_TYPES.includes(typeof nextStep)),
+    loading: true
+  });
+
+  useEffect(() => {
+    dispatch({ type: 'finishLoading', payload: { formOptions, fields } });
+  }, [fields]);
+
+  if (state.loading) {
+    return null;
+  }
+
+  const prepareValues = (values, visitedSteps, getRegisteredFields) => {
+    // Add the final step fields to history
+    const finalRegisteredFieldsHistory = {
+      ...state.registeredFieldsHistory,
+      [state.activeStep]: getRegisteredFields()
+    };
+
+    const finalObject = {};
+
+    // Find only visited fields
+    flattenDeep(
+      Object.values([...visitedSteps, state.activeStep].reduce((obj, key) => ({ ...obj, [key]: finalRegisteredFieldsHistory[key] }), {}))
+    ).forEach((key) => set(finalObject, key, get(values, key)));
+
+    return finalObject;
+  };
+
+  const handleSubmit = () =>
+    formOptions.onSubmit(
+      prepareValues(formOptions.getState().values, [...state.prevSteps, state.activeStep], formOptions.getRegisteredFields),
+      formOptions
+    );
+
+  const jumpToStep = (index, valid) => dispatch({ type: 'jumpToStep', payload: { index, valid, fields, crossroads, formOptions } });
+
+  const handlePrev = () => jumpToStep(state.activeStepIndex - 1);
+
+  const handleNext = (nextStep) => dispatch({ type: 'handleNext', payload: { nextStep, formOptions, fields } });
+
+  const setPrevSteps = () => dispatch({ type: 'setPrevSteps', payload: { formOptions, fields } });
+
+  const findCurrentStepWrapped = (step) => findCurrentStep(step, fields);
+
+  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
+      }}
+      navSchema={state.navSchema}
+      activeStepIndex={state.activeStepIndex}
+      maxStepIndex={state.maxStepIndex}
+      isDynamic={state.isDynamic}
+      crossroads={crossroads}
+      prevSteps={state.prevSteps}
+    />
+  );
+};
+
+Wizard.propTypes = {
+  fields: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    })
+  ).isRequired,
+  isDynamic: PropTypes.bool,
+  crossroads: PropTypes.arrayOf(PropTypes.string),
+  Wizard: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export default Wizard;
+
+export const wizardProps = {
+  currentStep: PropTypes.object,
+  handlePrev: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  jumpToStep: PropTypes.func,
+  setPrevSteps: PropTypes.func,
+  handleNext: PropTypes.func,
+  navSchema: PropTypes.array,
+  activeStepIndex: PropTypes.number,
+  maxStepIndex: PropTypes.number,
+  formOptions: PropTypes.shape({
+    onCancel: PropTypes.func
+  }),
+  prevSteps: PropTypes.array
+};

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

@@ -1,49 +1,11 @@
-import React, { useState, cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import WizardStep from './wizard/wizard-step';
 import { Grid, Typography } from '@material-ui/core';
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import Wizard, { wizardProps } from '@data-driven-forms/common/src/wizard/wizard';
 
-const Wizard = ({ fields, title, description }) => {
-  const [activeStep, setActiveStep] = useState(fields[0].name);
-  const [prevSteps, setPrevSteps] = useState([]);
-
-  const formOptions = useFormApi();
-
-  const handleNext = (nextStep) => {
-    setPrevSteps([...prevSteps, activeStep]);
-    setActiveStep(nextStep);
-  };
-
-  const handlePrev = () => {
-    setActiveStep(prevSteps[prevSteps.length - 1]);
-
-    const newSteps = prevSteps;
-    newSteps.pop();
-    setPrevSteps(newSteps);
-  };
-
-  const findCurrentStep = (activeStep) => fields.find(({ name }) => name === activeStep);
-
-  const findActiveFields = (visitedSteps) =>
-    visitedSteps.map((key) => findCurrentStep(key).fields.map(({ name }) => name)).reduce((acc, curr) => curr.concat(acc.map((item) => item)), []);
-
-  const getValues = (values, visitedSteps) =>
-    Object.keys(values)
-      .filter((key) => findActiveFields(visitedSteps).includes(key))
-      .reduce((acc, curr) => ({ ...acc, [curr]: values[curr] }), {});
-
-  const handleSubmit = () => formOptions.onSubmit(getValues(formOptions.getState().values, [...prevSteps, activeStep]));
-
-  const currentStep = (
-    <WizardStep
-      {...findCurrentStep(activeStep)}
-      formOptions={{
-        ...formOptions,
-        handleSubmit
-      }}
-    />
-  );
+const WizardInternal = ({ title, description, currentStep, formOptions, prevSteps, handleNext, handlePrev }) => {
+  const step = <WizardStep {...currentStep} formOptions={formOptions} />;
 
   return (
     <Grid container spacing={6}>
@@ -53,7 +15,7 @@ const Wizard = ({ fields, title, description }) => {
         <Typography component="h5">{`Step ${prevSteps.length + 1}`}</Typography>
       </Grid>
       <Grid item xs={12}>
-        {cloneElement(currentStep, {
+        {cloneElement(step, {
           handleNext,
           handlePrev,
           disableBack: prevSteps.length === 0
@@ -63,14 +25,12 @@ const Wizard = ({ fields, title, description }) => {
   );
 };
 
-Wizard.propTypes = {
+WizardInternal.propTypes = {
   title: PropTypes.node,
   description: PropTypes.node,
-  fields: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string
-    })
-  ).isRequired
+  ...wizardProps
 };
 
-export default Wizard;
+const MuiWizard = (props) => <Wizard Wizard={WizardInternal} {...props} />;
+
+export default MuiWizard;

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

@@ -104,7 +104,7 @@ const selectSchema = {
 }
 
 const App = () => {
-  const [schema, setSchema] = useState(sandbox)
+  const [schema, setSchema] = useState(wizardSchema)
 
   return (
     <div>