Removed wizard data

manage your own global state
shoutout-labs · Sep 12, 2019 · f0e29b6 · f0e29b6
1 parent 5bc445a
commit f0e29b6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -17,5 +17,4 @@ Original project is based on reactstrap. This is the react bootstrap version wit
 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.
+* Removed wizard data since it is erroneous if click on previous button and had to set state. Use state in the root component and pass properties as required to the steps with stepProps (manage state in the root component)
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,24 +1,29 @@
-import React, { useImperativeHandle } from 'react'
+import React, { useImperativeHandle, useState } from 'react'
 import { render } from 'react-dom'
 
 import ReactWizard from '../../src';
 import './fonts/fontawesome/all.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-const Comp1 = (props, ref) => {
-  console.debug("props:",props);
+const Comp1 = ({setState,count}, ref) => {
+
   useImperativeHandle(ref, () => ({
     isValidated() {
 
 
       return true;
     },
-    async onClickNext(){
-      props.setWizardData({...props.wizardData,step1:"completed"})
+    async onClickNext() {
+
     }
   }
   ))
-  return <div ref={ref}>Component 1</div>
+
+  return <div ref={ref}>Component 1<br/>
+
+  Count: {count}
+  <button onClick={() => setState({count:count+1})}>Update count</button>
+  </div>
 }
 const Comp2 = ({ }, ref) => {
   return <div ref={ref}>Component 2</div>
@@ -27,13 +32,19 @@ const Comp3 = ({ }, ref) => {
   return <div ref={ref}>Component 3</div>
 }
 
+
+const Demo = () => {
+const [state,setState]=useState({count:0});
+
 const steps = [
   {
     stepName: "Select Files",
     stepIcon: "fas fa-home",
     component: Comp1,
     stepProps: {
-      formData:{test:"test"}
+      formData: { test: "test" },
+      count:state.count,
+      setState
     }
   },
   {
@@ -75,22 +86,21 @@ const steps = [
   },
 
 ];
-const Demo = () => {
 
   return <div className="container">
 
     <ReactWizard
-    color="success"
+      color="success"
       steps={steps}
       navSteps={false}
       validate
       title="Upload Data"
       headerTextCenter
-      wizardData={{step1:"pending"}}
+
       // finishButtonClasses="btn-wd btn-info"
       // nextButtonClasses="btn-wd btn-info"
       // previousButtonClasses="btn-wd"
-  
+
       finishButtonClick={(data) => {
         // setAlertData({ show: true, type: "success", title: "Success", body: 'The calculation job will run in the background, It may take a few minutes to complete this process, once complete upon approval of the admins this data will be merged into the existing customer data.', action: () => props.history.push("/") });
       }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactbootstrap-wizard-rb",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "reactbootstrap-wizard React component",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef ,useMemo} from "react";
 import {
     Card,
     Nav,
@@ -90,8 +90,7 @@ class Wizard extends React.Component {
             nextButton: this.props.steps.length > 1 ? true : false,
             previousButton: false,
             finishButton: this.props.steps.length === 1 ? true : false,
-            wizardData:
-                this.props.wizardData !== undefined ? this.props.wizardData : {},
+
             // movingTabStyle: {
             //     transition: "transform 0s"
             // }
@@ -144,12 +143,6 @@ 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
-                    // },
                     currentStep: key,
                     highestStep:
                         key > this.state.highestStep ? key : this.state.highestStep,
@@ -180,12 +173,7 @@ 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
-                    // },
+
                     currentStep: key,
                     highestStep:
                         key > this.state.highestStep ? key : this.state.highestStep,
@@ -203,12 +191,7 @@ 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
-                // },
+
                 currentStep: key,
                 highestStep:
                     key > this.state.highestStep ? key : this.state.highestStep,
@@ -238,20 +221,8 @@ 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.props.finishButtonClick(this.state.wizardData);
+
+                this.props.finishButtonClick();
             } catch (e) {
 
             }
@@ -302,9 +273,7 @@ class Wizard extends React.Component {
 
 
 
-    setWizardData=(wizardData)=>{
-        this.setState({wizardData});
-    }
+
     render() {
 
         return (
@@ -353,8 +322,6 @@ class Wizard extends React.Component {
                                             {typeof prop.component === "function" || typeof prop.component === "object" ? (
                                                 <Component
                                                 ref={stepRefs[prop.stepName]}
-                                                wizardData={this.state.wizardData}
-                                                setWizardData={this.setWizardData}
                                                 {...prop.stepProps}
                                             />
                                             ) : (
@@ -452,8 +419,7 @@ ReactWizard.propTypes = {
             component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
             stepProps: PropTypes.object
         })
-    ).isRequired,
-    wizardData:PropTypes.object
+    ).isRequired
 };
 
 export default ReactWizard;