feat(mui): move mui wizard from demo to mapper

Author: rvsia

packages/mui-component-mapper/src/components/component-mapper.js

@@ -10,6 +10,7 @@ import DatePicker from './time-picker';
 import PlainText from './plain-text';
 import Select from './select';
 import Radio from './radio';
+import Wizard from './wizard';
 
 export const components = {
   TextField,
@@ -21,7 +22,8 @@ export const components = {
   DatePicker,
   TimePicker,
   PlainText,
-  SubForm
+  SubForm,
+  Wizard
 };
 
 const componentMapper = {
@@ -35,7 +37,8 @@ const componentMapper = {
   [componentTypes.DATE_PICKER]: DatePicker,
   [componentTypes.TIME_PICKER]: TimePicker,
   [componentTypes.SWITCH]: Switch,
-  [componentTypes.PLAIN_TEXT]: PlainText
+  [componentTypes.PLAIN_TEXT]: PlainText,
+  [componentTypes.WIZARD]: Wizard
 };
 
 export default componentMapper;

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

@@ -0,0 +1,77 @@
+import React, { useState, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import WizardStep from './wizard/wizard-step';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { useFormApi } from '@data-driven-forms/react-form-renderer';
+
+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
+      }}
+    />
+  );
+
+  return (
+    <Grid container spacing={6}>
+      <Grid item xs={12}>
+        <Typography component="h3">{title}</Typography>
+        <Typography paragraph>{description}</Typography>
+        <Typography component="h5">{`Step ${prevSteps.length + 1}`}</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        {cloneElement(currentStep, {
+          handleNext,
+          handlePrev,
+          disableBack: prevSteps.length === 0
+        })}
+      </Grid>
+    </Grid>
+  );
+};
+
+Wizard.propTypes = {
+  title: PropTypes.node,
+  description: PropTypes.node,
+  fields: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string
+    })
+  ).isRequired
+};
+
+export default Wizard;

packages/react-renderer-demo/src/app/src/components/missing-demo-fields/mui-wizard/step-buttons.js renamed to packages/mui-component-mapper/src/components/wizard/step-buttons.js

@@ -3,16 +3,14 @@ import PropTypes from 'prop-types';
 import WizardStepButtons from './step-buttons';
 import Typography from '@material-ui/core/Typography';
 
-const WizardStep = ({ title, description, fields, formOptions, ...rest }) => {
-  return (
-    <Fragment>
-      <Typography component="h5">{title}</Typography>
-      <Typography paragraph>{description}</Typography>
-      {fields.map((item) => formOptions.renderForm([item], formOptions))}
-      <WizardStepButtons formOptions={formOptions} {...rest} />
-    </Fragment>
-  );
-};
+const WizardStep = ({ title, description, fields, formOptions, ...rest }) => (
+  <Fragment>
+    <Typography component="h5">{title}</Typography>
+    <Typography paragraph>{description}</Typography>
+    {fields.map((item) => formOptions.renderForm([item], formOptions))}
+    <WizardStepButtons formOptions={formOptions} {...rest} />
+  </Fragment>
+);
 
 WizardStep.propTypes = {
   title: PropTypes.string,