fix(mui): convert wizard to common

Author: rvsia

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;