fix(pf3): wizard use common wizard

Author: rvsia

packages/common/src/wizard/wizard.js

@@ -81,6 +81,7 @@ const Wizard = ({ fields, isDynamic, crossroads, Wizard, ...props }) => {
       maxStepIndex={state.maxStepIndex}
       isDynamic={state.isDynamic}
       crossroads={crossroads}
+      prevSteps={state.prevSteps}
     />
   );
 };
@@ -97,3 +98,19 @@ Wizard.propTypes = {
 };
 
 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/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>

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

@@ -1,9 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import WizardStep from './wizard/wizard-step';
 import PropTypes from 'prop-types';
 import { Wizard as PfWizard, Modal, Icon } from 'patternfly-react';
-import handleEnter from '@data-driven-forms/common/src/wizard/enter-handler';
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import Wizard, { wizardProps } from '@data-driven-forms/common/src/wizard/wizard';
 
 const defaultButtonLabels = {
   cancel: 'Cancel',
@@ -12,37 +11,7 @@ const defaultButtonLabels = {
   submit: 'Submit'
 };
 
-const Wizard = ({ title, buttonLabels, stepsInfo, fields, inModal }) => {
-  const formOptions = useFormApi();
-
-  const [activeStep, setActiveStep] = useState(fields[0].name);
-  const [prevSteps, setPrevSteps] = useState([]);
-
-  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 WizardInternal = ({ title, buttonLabels, stepsInfo, inModal, onKeyDown, formOptions, handleNext, handlePrev, prevSteps, currentStep }) => {
   const renderSteps = () =>
     stepsInfo.map((step, stepIndex) => (
       <PfWizard.Step
@@ -61,7 +30,7 @@ const Wizard = ({ title, buttonLabels, stepsInfo, fields, inModal }) => {
   };
 
   return (
-    <div onKeyDown={(e) => handleEnter(e, formOptions, activeStep, findCurrentStep, handleNext, handleSubmit)}>
+    <div onKeyDown={onKeyDown}>
       {title && (
         <Modal.Header>
           {inModal && (
@@ -78,32 +47,27 @@ const Wizard = ({ title, buttonLabels, stepsInfo, fields, inModal }) => {
         handlePrev={handlePrev}
         disableBack={prevSteps.length === 0}
         buttonLabels={fullButtonLabels}
-        {...findCurrentStep(activeStep)}
-        formOptions={{
-          ...formOptions,
-          handleSubmit
-        }}
+        {...currentStep}
+        formOptions={formOptions}
       />
     </div>
   );
 };
 
-Wizard.propTypes = {
+WizardInternal.propTypes = {
   title: PropTypes.string,
   buttonLabels: PropTypes.object,
   stepsInfo: PropTypes.array,
   inModal: PropTypes.bool,
-  fields: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string
-    })
-  ).isRequired
+  ...wizardProps
 };
 
-Wizard.defaultProps = {
+WizardInternal.defaultProps = {
   title: undefined,
   stepsInfo: undefined,
   inModal: false
 };
 
-export default Wizard;
+const WizardFinal = (props) => <Wizard Wizard={WizardInternal} {...props} />;
+
+export default WizardFinal;