Merge pull request #366 from rvsia/fixPf3wiz

breaking(pf3): wizard use name instead of stepKey

Author: Hyperkid123

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

@@ -12,7 +12,6 @@ const wizardSchema = {
         {
           title: 'Get started with adding source',
           name: 'step-1',
-          stepKey: 1,
           nextStep: {
             when: 'source-type',
             stepMapper: {
@@ -55,8 +54,7 @@ const wizardSchema = {
         },
         {
           title: 'Configure AWS',
-          name: 'step-2',
-          stepKey: 'aws',
+          name: 'aws',
           nextStep: 'summary',
           fields: [
             {
@@ -67,9 +65,8 @@ const wizardSchema = {
           ]
         },
         {
-          stepKey: 'google',
+          name: 'google',
           title: 'Configure google',
-          name: 'step-3',
           nextStep: 'summary',
           fields: [
             {
@@ -88,7 +85,6 @@ const wizardSchema = {
               label: 'Summary'
             }
           ],
-          stepKey: 'summary',
           name: 'summary'
         }
       ]

packages/pf3-component-mapper/src/components/button.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button as PFButton } from 'patternfly-react';
 
-export const Button = ({ label, variant, dataType, validate, ...rest }) => (
+export const Button = ({ label, variant, dataType, validate, children, ...rest }) => (
   <PFButton bsStyle={variant} {...rest}>
-    {label}
+    {label || children}
   </PFButton>
 );
 
@@ -13,7 +13,8 @@ Button.propTypes = {
   variant: PropTypes.string,
   className: PropTypes.string,
   dataType: PropTypes.any, // should be inside inner props or something
-  validate: PropTypes.any // should be inside inner props or something
+  validate: PropTypes.any, // should be inside inner props or something
+  children: PropTypes.any
 };
 
 export default Button;

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

@@ -15,7 +15,7 @@ const defaultButtonLabels = {
 const Wizard = ({ title, buttonLabels, stepsInfo, fields, inModal }) => {
   const formOptions = useFormApi();
 
-  const [activeStep, setActiveStep] = useState(fields[0].stepKey);
+  const [activeStep, setActiveStep] = useState(fields[0].name);
   const [prevSteps, setPrevSteps] = useState([]);
 
   const handleNext = (nextStep) => {
@@ -24,13 +24,14 @@ const Wizard = ({ title, buttonLabels, stepsInfo, fields, inModal }) => {
   };
 
   const handlePrev = () => {
-    const newSteps = prevSteps.slice(0, Math.max(prevSteps.length - 1, 1));
+    setActiveStep(prevSteps[prevSteps.length - 1]);
 
-    setActiveStep(newSteps[newSteps.length - 1]);
+    const newSteps = prevSteps;
+    newSteps.pop();
     setPrevSteps(newSteps);
   };
 
-  const findCurrentStep = (activeStep) => fields.find(({ stepKey }) => stepKey === activeStep);
+  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)), []);
@@ -94,14 +95,13 @@ Wizard.propTypes = {
   inModal: PropTypes.bool,
   fields: PropTypes.arrayOf(
     PropTypes.shape({
-      stepKey: PropTypes.string
+      name: PropTypes.string
     })
   ).isRequired
 };
 
 Wizard.defaultProps = {
   title: undefined,
-  buttonLabels: defaultButtonLabels,
   stepsInfo: undefined,
   inModal: false
 };

packages/pf3-component-mapper/src/components/wizard/step-buttons.js

@@ -2,30 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../button';
 import { Icon, Wizard } from 'patternfly-react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import { useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
 
 import './button.scss';
 
-const SimpleNext = ({ next, valid, handleNext, submit, buttonLabels }) => (
-  <Button className="margin-left-3" bsStyle="primary" type="button" onClick={() => (valid ? handleNext(next) : submit())}>
-    {buttonLabels.next}
-    <Icon type="fa" name="angle-right" />
-  </Button>
-);
+const SimpleNext = ({ next, handleNext, submit, buttonLabels, disabled }) => {
+  const { valid } = useFormApi();
+
+  return (
+    <Button className="margin-left-3" bsStyle="primary" type="button" onClick={() => (valid ? handleNext(next) : submit())} disabled={disabled}>
+      {buttonLabels.next}
+      <Icon type="fa" name="angle-right" />
+    </Button>
+  );
+};
 
 SimpleNext.propTypes = {
   next: PropTypes.string,
-  valid: PropTypes.bool,
   handleNext: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
-  buttonLabels: PropTypes.object.isRequired
+  buttonLabels: PropTypes.object.isRequired,
+  disabled: PropTypes.bool
 };
 
 const ConditionalNext = ({ nextStep, ...rest }) => {
   const {
     input: { value }
   } = useFieldApi({ name: nextStep.when, subscription: { value: true } });
-  return <SimpleNext next={nextStep.stepMapper[value]} {...rest} />;
+
+  const next = nextStep.stepMapper[value];
+
+  return <SimpleNext next={next} {...rest} disabled={!next} />;
 };
 
 ConditionalNext.propTypes = {