From 5bc445a95bbe35ee431ec21bbc53c41f0601ca52 Mon Sep 17 00:00:00 2001 From: madura Date: Thu, 12 Sep 2019 09:30:36 +0530 Subject: [PATCH] Disabled automatically get component state as wizardState Pass setWizardData function as property to components Update readme --- README.md | 6 +++- demo/src/index.js | 4 +++ package.json | 2 +- src/index.js | 73 ++++++++++++++++++++++++++--------------------- 4 files changed, 51 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 4f29dbd..840fba6 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,8 @@ Original project is based on reactstrap. This is the react bootstrap version wit ## notes -react-bootstrap does not include in the final package. Need to install it separately when using \ No newline at end of file +react-bootstrap does not include in the final package. Need to install it separately when using + +## updates +* Component state will not automatically add to the wizard data (Since component state may have different data which does not required to be track in a global state) +* setWizardData function will receive as a property to the components and wizard data can be set using it. \ No newline at end of file diff --git a/demo/src/index.js b/demo/src/index.js index e59f781..65d31b9 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -12,6 +12,9 @@ const Comp1 = (props, ref) => { return true; + }, + async onClickNext(){ + props.setWizardData({...props.wizardData,step1:"completed"}) } } )) @@ -83,6 +86,7 @@ const Demo = () => { validate title="Upload Data" headerTextCenter + wizardData={{step1:"pending"}} // finishButtonClasses="btn-wd btn-info" // nextButtonClasses="btn-wd btn-info" // previousButtonClasses="btn-wd" diff --git a/package.json b/package.json index 9d9581b..f1bdc64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactbootstrap-wizard-rb", - "version": "1.0.7", + "version": "1.0.8", "description": "reactbootstrap-wizard React component", "main": "lib/index.js", "module": "es/index.js", diff --git a/src/index.js b/src/index.js index 0f5994f..b40cdbb 100644 --- a/src/index.js +++ b/src/index.js @@ -144,12 +144,12 @@ class Wizard extends React.Component { } if (validationState) { this.setState({ - wizardData: { - ...this.state.wizardData, - [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ - this.props.steps[this.state.currentStep].stepName - ].current.state - }, + // wizardData: { + // ...this.state.wizardData, + // [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ + // this.props.steps[this.state.currentStep].stepName + // ].current.state + // }, currentStep: key, highestStep: key > this.state.highestStep ? key : this.state.highestStep, @@ -180,12 +180,12 @@ class Wizard extends React.Component { } let key = this.state.currentStep + 1; this.setState({ - wizardData: { - ...this.state.wizardData, - [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ - this.props.steps[this.state.currentStep].stepName - ].current.state - }, + // wizardData: { + // ...this.state.wizardData, + // [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ + // this.props.steps[this.state.currentStep].stepName + // ].current.state + // }, currentStep: key, highestStep: key > this.state.highestStep ? key : this.state.highestStep, @@ -203,12 +203,12 @@ class Wizard extends React.Component { var key = this.state.currentStep - 1; if (key >= 0) { this.setState({ - wizardData: { - ...this.state.wizardData, - [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ - this.props.steps[this.state.currentStep].stepName - ].current.state - }, + // wizardData: { + // ...this.state.wizardData, + // [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ + // this.props.steps[this.state.currentStep].stepName + // ].current.state + // }, currentStep: key, highestStep: key > this.state.highestStep ? key : this.state.highestStep, @@ -238,19 +238,20 @@ class Wizard extends React.Component { if (this.props.stepRefs[this.props.steps[this.state.currentStep].stepName].current.onClickNext) { await this.props.stepRefs[this.props.steps[this.state.currentStep].stepName].current.onClickNext(); } - this.setState( - { - wizardData: { - ...this.state.wizardData, - [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ - this.props.steps[this.state.currentStep].stepName - ].current.state - } - }, - () => { - this.props.finishButtonClick(this.state.wizardData); - } - ); + // this.setState( + // { + // wizardData: { + // ...this.state.wizardData, + // [this.props.steps[this.state.currentStep].stepName]: this.props.stepRefs[ + // this.props.steps[this.state.currentStep].stepName + // ].current.state + // } + // }, + // () => { + // this.props.finishButtonClick(this.state.wizardData); + // } + // ); + this.props.finishButtonClick(this.state.wizardData); } catch (e) { } @@ -298,6 +299,12 @@ class Wizard extends React.Component { // movingTabStyle: movingTabStyle // }); } + + + + setWizardData=(wizardData)=>{ + this.setState({wizardData}); + } render() { return ( @@ -347,6 +354,7 @@ class Wizard extends React.Component { ) : ( @@ -444,7 +452,8 @@ ReactWizard.propTypes = { component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired, stepProps: PropTypes.object }) - ).isRequired + ).isRequired, + wizardData:PropTypes.object }; export default ReactWizard; \ No newline at end of file