diff --git a/src/modules/wizard/components/WizardContainer.js b/src/modules/wizard/components/WizardContainer.js
index 9ac10d0..369a4fa 100644
--- a/src/modules/wizard/components/WizardContainer.js
+++ b/src/modules/wizard/components/WizardContainer.js
@@ -15,7 +15,6 @@ import { wizardStates } from "../wizard.constants";
export class WizardContainer extends Component {
componentDidMount() {
const { pages, startWizard, name } = this.props;
-
startWizard(name, pages.length);
}
@@ -36,6 +35,17 @@ export class WizardContainer extends Component {
nextClicked
} = this.props;
+ let pagesWithReduxForm = [];
+ if (pages) {
+ pagesWithReduxForm = pages.reduce((acc, field, index) => {
+ if (field.props && field.props.formName) {
+ field.index = index;
+ acc.push(field);
+ }
+ return acc;
+ }, []);
+ }
+
return (
);
}
diff --git a/src/screens/wizardExample/components/WizardExampleContainer.js b/src/screens/wizardExample/components/WizardExampleContainer.js
index 84db117..12ae32e 100644
--- a/src/screens/wizardExample/components/WizardExampleContainer.js
+++ b/src/screens/wizardExample/components/WizardExampleContainer.js
@@ -1,5 +1,6 @@
import React, { Component } from "react";
import { connect } from "react-redux";
+import { SubmissionError } from "redux-form";
import wizard from "../../../modules/wizard";
import PageWithValidations from "./samplePages/PageWithValidations";
import PageWithInitializations from "./samplePages/PageWithInitializations";
@@ -30,6 +31,26 @@ class WizardExampleContainer extends Component {
}
}
+ handleSubmit = values => {
+ if (
+ values.requiredText &&
+ values.requiredText.toLowerCase() === "servererror"
+ ) {
+ const errors = {
+ requiredText: "A fake server error occurred. Please try again."
+ };
+
+ const addEditPromoDetailsPage = 4;
+ this.props.pageNotValid(addEditPromoDetailsPage);
+
+ throw new SubmissionError(errors);
+ }
+
+ alert(`Submit succeeded with values: ${JSON.stringify(values)}`);
+
+ return Promise.resolve("Success!");
+ };
+
render() {
return (
@@ -58,10 +79,14 @@ class WizardExampleContainer extends Component {
title: "Step 5: Page with redux forms validations",
props: { formName: "PageWithReduxFormsValidations" }
},
+
{
component: LastPageOfWizardWithReduxFormsValidations,
title: "Step 6: Last page with redux forms validations",
- props: { formName: "PageWithReduxFormsValidations" }
+ props: {
+ formName: "PageWithReduxFormsValidations",
+ onSubmit: this.handleSubmit
+ }
}
]}
formName="PageWithReduxFormsValidations"
@@ -75,4 +100,7 @@ const mapStateToProps = state => ({
wizard: getWizardState(state)
});
-export default connect(mapStateToProps)(WizardExampleContainer);
+export default connect(
+ mapStateToProps,
+ { pageNotValid: wizard.actions.pageNotValid }
+)(WizardExampleContainer);
diff --git a/src/screens/wizardExample/components/samplePages/LastPageOfWizardWithReduxFormsValidations.js b/src/screens/wizardExample/components/samplePages/LastPageOfWizardWithReduxFormsValidations.js
index 16b1301..ea2731f 100644
--- a/src/screens/wizardExample/components/samplePages/LastPageOfWizardWithReduxFormsValidations.js
+++ b/src/screens/wizardExample/components/samplePages/LastPageOfWizardWithReduxFormsValidations.js
@@ -1,5 +1,5 @@
import React from "react";
-import { Field, SubmissionError } from "redux-form";
+import { Field } from "redux-form";
import { connect } from "react-redux";
import "../wizardExample.css";
import wizard from "../../../../modules/wizard";
@@ -10,53 +10,19 @@ const {
validators: { required }
} = forms;
-const {
- components: { WithReduxFormWizardPageValidation }
-} = wizard;
-
-let PageWithReduxFormsValidations = ({ onSubmit, handleSubmit, ...rest }) => (
-
-);
-
-PageWithReduxFormsValidations = WithReduxFormWizardPageValidation(
- PageWithReduxFormsValidations,
- {
- formName: "PageWithReduxFormsValidations",
- isLastPage: true
- }
+const PageWithReduxFormsValidations = () => (
+
);
class PageWithReduxFormsValidationsContainer extends React.Component {
- handleSubmit = values => {
- if (
- values.requiredText &&
- values.requiredText.toLowerCase() === "servererror"
- ) {
- const errors = {
- requiredText: "A fake server error occurred. Please try again."
- };
-
- const addEditPromoDetailsPage = 4;
- this.props.pageNotValid(addEditPromoDetailsPage);
-
- throw new SubmissionError(errors);
- }
-
- alert(`Submit succeeded with values: ${JSON.stringify(values)}`);
-
- return Promise.resolve("Success!");
- };
-
render() {
- return
;
+ return
;
}
}
diff --git a/src/screens/wizardExample/components/samplePages/PageWithReduxFormsValidations.js b/src/screens/wizardExample/components/samplePages/PageWithReduxFormsValidations.js
index 0eab7cb..74b7b4b 100644
--- a/src/screens/wizardExample/components/samplePages/PageWithReduxFormsValidations.js
+++ b/src/screens/wizardExample/components/samplePages/PageWithReduxFormsValidations.js
@@ -1,7 +1,6 @@
import React from "react";
import { Field } from "redux-form";
import "../wizardExample.css";
-import wizard from "../../../../modules/wizard";
import forms from "../../../../modules/forms";
const {
@@ -9,23 +8,14 @@ const {
validators: { required }
} = forms;
-const {
- components: { WithReduxFormWizardPageValidation }
-} = wizard;
-
-const PageWithReduxFormsValidations = props => (
-
+const PageWithReduxFormsValidations = () => (
+
);
-export default WithReduxFormWizardPageValidation(
- PageWithReduxFormsValidations,
- { formName: "PageWithReduxFormsValidations" }
-);
+export default PageWithReduxFormsValidations;