fix(pf4): convert wizard to common

Author: rvsia

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,99 @@
+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}
+    />
+  );
+};
+
+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;