Merge pull request #466 from rvsia/muiWiz

Add stepper to MUI wizard

Author: Hyperkid123

.github/labeler.yml

@@ -18,6 +18,3 @@ PF4:
 
 renderer:
   - packages/react-form-renderer/**/*
-
-dependencies:
-  - '**/package.json'

packages/mui-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -0,0 +1,92 @@
+import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
+
+const wizardSchema = {
+  fields: [
+    {
+      component: componentTypes.WIZARD,
+      name: 'wizzard',
+      buttonLabels: {},
+      title: 'Cokoliv',
+      stepsInfo: [{ title: 'Add a source' }, { title: 'Configure a source' }, { title: 'Summary' }],
+      fields: [
+        {
+          title: 'Get started with adding source',
+          name: 'step-1',
+          nextStep: {
+            when: 'source-type',
+            stepMapper: {
+              aws: 'aws',
+              google: 'google'
+            }
+          },
+          fields: [
+            {
+              component: componentTypes.TEXTAREA,
+              name: 'source-name',
+              type: 'text',
+              label: 'Source name'
+            },
+            {
+              component: componentTypes.SELECT,
+              name: 'source-type',
+              label: 'Source type',
+              isRequired: true,
+              options: [
+                {
+                  value: 'aws',
+                  label: 'Aws'
+                },
+                {
+                  value: 'google',
+                  label: 'Google'
+                }
+              ],
+              validate: [
+                {
+                  type: validatorTypes.REQUIRED
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'Configure AWS',
+          name: 'aws',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'aws-field',
+              label: 'Aws field part'
+            }
+          ]
+        },
+        {
+          name: 'google',
+          title: 'Configure google',
+          nextStep: 'summary',
+          fields: [
+            {
+              component: componentTypes.TEXT_FIELD,
+              name: 'google-field',
+              label: 'Google field part'
+            }
+          ]
+        },
+        {
+          fields: [
+            {
+              name: 'summary',
+              component: componentTypes.TEXT_FIELD,
+              isDisabled: true,
+              label: 'Summary'
+            }
+          ],
+          name: 'summary'
+        }
+      ]
+    }
+  ]
+};
+
+export default wizardSchema;

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

@@ -11,6 +11,7 @@ import demoSchema from '@data-driven-forms/common/src/demoschema';
 import fieldArraySchema from './demo-schemas/field-array-schema';
 
 import Button from '@material-ui/core/Button';
+import wizardSchema from './demo-schemas/wizard-schema';
 
 const theme = createMuiTheme({
   typography: {
@@ -29,7 +30,7 @@ const compositeMapper = {
 };
 
 const App = () => {
-  const [schema, setSchema] = useState(fieldArraySchema);
+  const [schema, setSchema] = useState(wizardSchema);
 
   return (
     <ThemeProvider theme={theme}>
@@ -40,6 +41,7 @@ const App = () => {
         <Grid item xs={12}>
           <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
           <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
+          <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
         </Grid>
         <Grid item xs={12}>
           <FormRenderer

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

@@ -1,10 +1,38 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import WizardStep from './wizard/wizard-step';
-import { Grid, Typography } from '@material-ui/core';
-import Wizard, { wizardProps } from '@data-driven-forms/common/src/wizard/wizard';
+import clsx from 'clsx';
+
+import { Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Wizard from '@data-driven-forms/common/src/wizard/wizard';
+import WizardNav from './wizard/wizard-nav';
+import WizardStepButtons from './wizard/step-buttons';
+
+const useStyles = makeStyles(() => ({
+  wizardBody: {
+    padding: 24,
+    margin: 0
+  }
+}));
+
+const WizardInternal = ({
+  currentStep,
+  formOptions,
+  activeStepIndex,
+  prevSteps,
+  handleNext,
+  handlePrev,
+  buttonLabels,
+  stepsInfo,
+  ButtonContainerProps,
+  StepperProps,
+  WizardBodyProps,
+  WizardProps,
+  onKeyDown
+}) => {
+  const classes = useStyles();
 
-const WizardInternal = ({ title, description, currentStep, formOptions, prevSteps, handleNext, handlePrev, buttonLabels }) => {
   const buttonLabelsFinal = {
     next: 'Continue',
     submit: 'Submit',
@@ -13,30 +41,56 @@ const WizardInternal = ({ title, description, currentStep, formOptions, prevStep
     ...buttonLabels
   };
 
-  const step = <WizardStep {...currentStep} formOptions={formOptions} buttonLabels={buttonLabelsFinal} />;
-
   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(step, {
-          handleNext,
-          handlePrev,
-          disableBack: prevSteps.length === 0
-        })}
+    <Grid container spacing={3} {...WizardProps} onKeyDown={onKeyDown}>
+      {stepsInfo && <WizardNav StepperProps={StepperProps} stepsInfo={stepsInfo} activeStepIndex={activeStepIndex} />}
+      <Grid container spacing={2} {...WizardBodyProps} className={clsx(classes.wizardBody, WizardBodyProps.className)}>
+        {currentStep.fields.map((item) => formOptions.renderForm([item], formOptions))}
+        <WizardStepButtons
+          {...currentStep}
+          formOptions={formOptions}
+          buttonLabels={buttonLabelsFinal}
+          handleNext={handleNext}
+          handlePrev={handlePrev}
+          disableBack={prevSteps.length === 0}
+          ButtonContainerProps={ButtonContainerProps}
+        />
       </Grid>
     </Grid>
   );
 };
 
 WizardInternal.propTypes = {
-  title: PropTypes.node,
-  description: PropTypes.node,
-  ...wizardProps
+  currentStep: PropTypes.object,
+  handlePrev: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  jumpToStep: PropTypes.func,
+  setPrevSteps: PropTypes.func,
+  handleNext: PropTypes.func,
+  activeStepIndex: PropTypes.number,
+  formOptions: PropTypes.shape({
+    onCancel: PropTypes.func,
+    renderForm: PropTypes.func
+  }),
+  prevSteps: PropTypes.array,
+  // ^^ common props
+  buttonLabels: PropTypes.object,
+  stepsInfo: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.node,
+      label: PropTypes.node,
+      StepLabelProps: PropTypes.object,
+      StepProps: PropTypes.object
+    })
+  ),
+  ButtonContainerProps: PropTypes.object,
+  StepperProps: PropTypes.object,
+  WizardBodyProps: PropTypes.object,
+  WizardProps: PropTypes.object
+};
+
+WizardInternal.defaultProps = {
+  WizardBodyProps: {}
 };
 
 const MuiWizard = (props) => <Wizard Wizard={WizardInternal} {...props} />;