major upgrade to v3.0.0. fixes #6 and major code refactor

Author: newbreedofgeek

README.md

@@ -37,19 +37,19 @@ const steps =
 - pass in following options as well if you want to customise it further
 
 ```
-// hide or show Next and Previous Buttons
+// hide or show Next and Previous Buttons at the bottom
 showNavigation: true | false
 
 // disable or enable the steps UI navigation on top
 showSteps: true | false
 
-// disable or enable onClick step jumping from the UI navigation summary on top
+// disable or enable onClick step jumping from the UI navigation on top
 stepsNavigation: true | false
 
-// show or hide the previews button in the last step (maybe the last step is a thank you message and you don't want them to go back)
+// show or hide the previous button in the last step (maybe the last step is a thank you message and you don't want them to go back)
 prevBtnOnLastStep: true | false
 
-// dev control to disable calling and Child form component validation
+// dev control to disable validation rules called in step components **
 dontValidate: true | false
 
 // by default if you hit the Enter key on any element it validates the form and moves to next step if validation passes. Use this to prevent this behaviour
@@ -71,7 +71,7 @@ example options usage:
 ```
 
 
-- if one of your components is a form that requires validation before moving to the next component, then that component needs to implement a `isValidated()` public method which validates the form and returns true/false if the data is valid. For an e.g. on this have a look at the `src/examples/Step2` component.
+- ** if one of your components is a form that requires validation before moving to the next component, then that component needs to implement a `isValidated()` public method which validates the form and returns true/false if the data is valid. For an e.g. on this have a look at the `src/examples/Step2` component.
 
 - also if you want some default style, copy the source from `src/css/main.css` code into your project (the above look in the picture also requires bootstrap)
 
@@ -101,19 +101,21 @@ A full example is found in the `src/examples` directory.
 - all code is run against coverage, not just the unit tested modules
 - test coverage improvement is currently a work in progress
 
-Current coverage sitting at v1.9.3:
+Current coverage sitting at v3.0.0:
 ```
-Statements   : 67.01% ( 65/97 ), 4 ignored
-Branches     : 50.6% ( 42/83 ), 13 ignored
-Functions    : 95.24% ( 20/21 ), 6 ignored
-Lines        : 43.86% ( 25/57 )
+Statements   : 53.17% ( 67/126 ), 4 ignored
+Branches     : 41.75% ( 43/103 ), 13 ignored
+Functions    : 76.67% ( 23/30 ), 7 ignored
+Lines        : 31.4% ( 27/86 )
 ```
 
 ### todo
 - ~~write the tests~~
 - improve code coverage
 
 #### change log
+- 3.0.0
+  - major revamp of logic to deal with validation bugs from stepsNavigation (fixes [#6](/newbreedofgeek/react-stepzilla/issues/6)). Also complete revamp of example app to be a fully working sample
 - 2.0.1
   - bug with handleKeyDown, as we capture enter if preventEnterSubmission=true, then onEnter the page refreshes
 - 2.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stepzilla",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
   "main": "./dist/main.js",
   "scripts": {

src/examples/Example.js

@@ -29,7 +29,8 @@ export default class Example extends Component {
 
   updateStore(update) {
     this.sampleStore = {
-      ...update
+      ...this.sampleStore,
+      ...update,
     }
   }
 

src/examples/Step1.js

@@ -3,7 +3,6 @@
 import React, { Component, PropTypes } from 'react';
 
 export default class Step1 extends Component {
-
   constructor(props) {
     super(props);
 
@@ -25,7 +24,20 @@ export default class Step1 extends Component {
             <div className="form-group">
               <label className="md-col-12 control-label">
                 <h1>Step 1: Welcome to the StepZilla Example</h1>
+                <h2>This example uses this config:</h2>
               </label>
+              <br />
+              <code>
+                stepsNavigation=true
+                  <br />
+                  prevBtnOnLastStep=true
+                  <br />
+                  dontValidate=false
+                  <br />
+                  preventEnterSubmission=true
+                  <br />
+                  nextTextOnFinalActionStep="Save"
+                </code>
             </div>
           </form>
         </div>

src/examples/Step2.js

@@ -28,7 +28,12 @@ export default class Step2 extends Component {
 
     // if full validation passes then save to store and pass as valid
     if (Object.keys(validateNewInput).every((k) => { return validateNewInput[k] === true })) {
-        this.props.updateStore(userInput);  // Update store here (this is just an example, in reality you will do it via redux or flux)
+        if (this.props.getStore().email != userInput.email || this.props.getStore().gender != userInput.gender) { // only update store of something changed
+          this.props.updateStore({
+            ...userInput,
+            savedToCloud: false // use this to notify step4 that some changes took place and prompt the user to save again
+          });  // Update store here (this is just an example, in reality you will do it via redux or flux)
+        }
 
         isDataValid = true;
     }

src/examples/Step4.js

@@ -19,17 +19,23 @@ export default class Step4 extends Component {
   // _isValidated() {}
 
   render() {
-    const showSavedCls = (this.state.savedToCloud) ? 'show' : 'hide';
-
     return (
       <div className="step step4">
         <div className="row">
           <form id="Form" className="form-horizontal">
             <div className="form-group">
-                <label className="md-col-12 control-label">
-                  <h1>Thanks!</h1>
-                  <h2 className={showSavedCls}>Data was successfully saved to cloud...</h2>
-                </label>
+              <label className="md-col-12 control-label">
+                {
+                  (this.state.savedToCloud)
+                  ?
+                    <div>
+                      <h1>Thanks!</h1>
+                      <h2>Data was successfully saved to cloud...</h2>
+                    </div>
+                  :
+                    <h1>You have updated data, go <a onClick={() => {this.props.jumpToStep(2)}}>back</a> and Save again!</h1>
+                }
+              </label>
               </div>
           </form>
         </div>

src/examples/index.html

@@ -73,6 +73,12 @@
     width: 90%;
     padding: 5px;
   }
+
+  code {
+    position: relative;
+    left: 12px;
+    line-height: 25px;
+  }
   </style>
 </head>
 <body>

src/main.js

@@ -16,10 +16,11 @@ export default class StepZilla extends Component {
       display: 'none'
     };
 
-    this.applyValidationState();
+    this.applyValidationFlagsToSteps();
   }
 
-  applyValidationState() {
+  // extend the "steps" array with flags to indicate if they have been validated
+  applyValidationFlagsToSteps() {
     this.props.steps.map((i) => {
       if (this.props.dontValidate) {
         i.validated = true;
@@ -32,6 +33,7 @@ export default class StepZilla extends Component {
     });
   }
 
+  // update the header nav states via classes so they can be styled via css
   getNavStates(indx, length) {
     let styles = [];
 
@@ -50,6 +52,7 @@ export default class StepZilla extends Component {
     return { current: indx, styles }
   }
 
+  // which step are we in?
   checkNavState(currentStep){
     if (currentStep > 0 && currentStep !== this.props.steps.length - 1) {
       let correctNextText = 'Next';
@@ -78,6 +81,7 @@ export default class StepZilla extends Component {
     }
   }
 
+  // set the nav state
   setNavState(next) {
     this.setState({navState: this.getNavStates(next, this.props.steps.length)});
 
@@ -106,34 +110,35 @@ export default class StepZilla extends Component {
       // a child step wants to invoke a jump between steps
       this.setNavState(evt);
     }
-    else {
-      // the main navigation step ui is invoking a jump between steps
-      if (!this.props.stepsNavigation) {
+    else { // the main navigation step ui is invoking a jump between steps
+      if (!this.props.stepsNavigation || evt.target.value == this.state.compState) { // if stepsNavigation is turned off or user clicked on existing step again (on step 2 and clicked on 2 again) then ignore
         evt.preventDefault();
         evt.stopPropagation();
 
         return;
       }
 
-      // debugger;
-      if (this.stepMoveAllowed(true)) {
-
-        let passThroughStepsValidated = true;
-
-        if (evt.target.value > this.state.compState) {
-          console.log('moving ahead so validate in between steps');
-          passThroughStepsValidated = false;
-          // console.log(this.props.steps);
-
-          const go = this.props.steps.reduce((r, i) => {
-            r.push(i.validated);
-            return r;
-          }, []);
-
-          console.log(go);
+      // are we trying to move back or front?
+      const movingBack = evt.target.value < this.state.compState;
+
+      if (this.stepMoveAllowed(movingBack)) {
+        let passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
+
+        if (!movingBack) {
+          // looks like we are moving forward, 'reduce' a new array of step>validated values we need to check and 'some' that to get a decision on if we should allow moving forward
+          passThroughStepsNotValid = this.props.steps
+            .reduce((a, c, i) => {
+              if (i >= this.state.compState && i < evt.target.value) {
+                a.push(c.validated);
+              }
+              return a;
+            }, [])
+            .some((c) => {
+              return c === false
+            })
         }
 
-        if (passThroughStepsValidated) {
+        if (!passThroughStepsNotValid) {
           if (evt.target.value === (this.props.steps.length - 1) &&
             this.state.compState === (this.props.steps.length - 1)) {
               this.setNavState(this.props.steps.length);
@@ -143,31 +148,24 @@ export default class StepZilla extends Component {
           }
         }
       }
-
-      // if (this.props.dontValidate || (passThroughStepsValidated && typeof this.refs.activeComponent.isValidated == 'undefined' || this.refs.activeComponent.isValidated()) ) {
-      //     if (evt.target.value === (this.props.steps.length - 1) &&
-      //       this.state.compState === (this.props.steps.length - 1)) {
-      //         this.setNavState(this.props.steps.length);
-      //     }
-      //     else {
-      //       this.setNavState(evt.target.value);
-      //     }
-      // }
     }
   }
 
+  // move next via next button
   next() {
     if (this.stepMoveAllowed()) {
       this.setNavState(this.state.compState + 1);
     }
   }
 
+  // move behind via previous button
   previous() {
     if (this.state.compState > 0) {
       this.setNavState(this.state.compState - 1);
     }
   }
 
+  // are we allowed to move forward? via the next button or via jumpToStep?
   stepMoveAllowed(skipValidationExecution = false) {
     let proceed = false;
 
@@ -179,7 +177,12 @@ export default class StepZilla extends Component {
       if (typeof this.refs.activeComponent.isValidated == 'undefined') {
         proceed = true;
       }
-      else if (!skipValidationExecution) {
+      else if (skipValidationExecution) {
+        // we are moving backwards in steps, in this case dont validate as it means the user is not commiting to "save"
+        proceed = true;
+      }
+      else {
+        // user is moving forward in steps, invoke validation as its available
         proceed = this.refs.activeComponent.isValidated();
         this.props.steps[this.state.compState].validated = (typeof proceed == 'undefined') ? true : proceed; // if a step component returns 'underfined' then trate as "true" as it's an aync call (i.e. ajax call)
       }
@@ -188,6 +191,7 @@ export default class StepZilla extends Component {
     return proceed;
   }
 
+  // get the classmame of steps
   getClassName(className, i){
     let liClassName = className + "-" + this.state.navState.styles[i];
 
@@ -198,6 +202,7 @@ export default class StepZilla extends Component {
     return liClassName;
   }
 
+  // render the steps as stepsNavigation
   renderSteps() {
     return this.props.steps.map((s, i)=> (
       <li className={this.getClassName("progtrckr", i)} onClick={(evt) => {this.jumpToStep(evt)}} key={i} value={i}>
@@ -207,6 +212,7 @@ export default class StepZilla extends Component {
     ));
   }
 
+  // main render of stepzilla container
   render() {
     // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
     const compToRender = React.cloneElement(this.props.steps[this.state.compState].component, {

tests/main.spec.js

@@ -37,7 +37,7 @@ function setup(stepCount = 1, config = {}) {
 
 describe('StepZilla', () => {
   describe('base component render', () => {
-    const { enzymeWrapper } = setup(2);
+    const { enzymeWrapper } = setup(2, {dontValidate: true});
 
     it('should render self and primary css classes', () => {
       expect(enzymeWrapper).to.have.length(1);
@@ -50,7 +50,7 @@ describe('StepZilla', () => {
   });
 
   describe('default props based ui render', () => {
-    const { enzymeWrapper } = setup(2);
+    const { enzymeWrapper } = setup(2, {dontValidate: true});
 
     it('should render showSteps based header', () => {
       expect(enzymeWrapper.find('.progtrckr')).to.have.length(1);
@@ -64,7 +64,8 @@ describe('StepZilla', () => {
   describe('custom props based ui render', () => {
     const { enzymeWrapper } = setup(2, {
       showSteps: false,
-      showNavigation: false
+      showNavigation: false,
+      dontValidate: true
     });
 
     it('should NOT render showSteps based header as "showSteps: false"', () => {