Skip to content

Commit

Permalink
Disabled automatically get component state as wizardState
Browse files Browse the repository at this point in the history
Pass setWizardData function as property to components

Update readme
  • Loading branch information
maduraPradeep committed Sep 12, 2019
1 parent 5c61edb commit 5bc445a
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 34 deletions.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
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.
4 changes: 4 additions & 0 deletions demo/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const Comp1 = (props, ref) => {


return true;
},
async onClickNext(){
props.setWizardData({...props.wizardData,step1:"completed"})
}
}
))
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
73 changes: 41 additions & 32 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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) {

}
Expand Down Expand Up @@ -298,6 +299,12 @@ class Wizard extends React.Component {
// movingTabStyle: movingTabStyle
// });
}



setWizardData=(wizardData)=>{
this.setState({wizardData});
}
render() {

return (
Expand Down Expand Up @@ -347,6 +354,7 @@ class Wizard extends React.Component {
<Component
ref={stepRefs[prop.stepName]}
wizardData={this.state.wizardData}
setWizardData={this.setWizardData}
{...prop.stepProps}
/>
) : (
Expand Down Expand Up @@ -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;

0 comments on commit 5bc445a

Please sign in to comment.