new official version of 4.7.0 to support onStepChange. Closes #62

newbreedofgeek · Dec 27, 2017 · a34f805 · a34f805
1 parent 4ebcd6c
commit a34f805
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -111,6 +111,8 @@ example options usage:
 
 - *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)*
 
+- *check out `src/examples/` for how `onStepChange` can be used to persist last known step state across browser reloads (using `startAtStep` pulled from session storage)*
+
 #### jumpToStep() utility
 - stepzilla injects an utility method called `jumpToStep` as a prop into all your react step components
 - this utility methods lets you jump between steps from inside your react component

diff --git a/dist/main.js b/dist/main.js
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -131,6 +133,7 @@ var StepZilla = function (_Component) {
       if (this.props.onStepChange) {
         this.props.onStepChange(nextStep);
       }
+
       this.setState(this.getPrevNextBtnState(nextStep));
     }
 
@@ -173,66 +176,72 @@ var StepZilla = function (_Component) {
         // a child step wants to invoke a jump between steps. in this case 'evt' is the numeric step number and not the JS event
         this.setNavState(evt);
       } 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;
-        }
+        var _ret = function () {
+          // the main navigation step ui is invoking a jump between steps
+          if (!_this3.props.stepsNavigation || evt.target.value === _this3.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 {
+              v: void 0
+            };
+          }
 
-        evt.persist(); // evt is a react event so we need to persist it as we deal with aync promises which nullifies these events (https://facebook.github.io/react/docs/events.html#event-pooling)
+          evt.persist(); // evt is a react event so we need to persist it as we deal with aync promises which nullifies these events (https://facebook.github.io/react/docs/events.html#event-pooling)
 
-        var movingBack = evt.target.value < this.state.compState; // are we trying to move back or front?
-        var passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
-        var proceed = false; // flag on if we should move on
+          var movingBack = evt.target.value < _this3.state.compState; // are we trying to move back or front?
+          var passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
+          var proceed = false; // flag on if we should move on
 
-        this.abstractStepMoveAllowedToPromise(movingBack).then(function () {
-          var valid = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-          // validation was a success (promise or sync validation). In it was a Promise's resolve() then proceed will be undefined, so make it true. Or else 'proceed' will carry the true/false value from sync v
-          proceed = valid;
+          _this3.abstractStepMoveAllowedToPromise(movingBack).then(function () {
+            var valid = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            // validation was a success (promise or sync validation). In it was a Promise's resolve() then proceed will be undefined, so make it true. Or else 'proceed' will carry the true/false value from sync v
+            proceed = valid;
 
-          if (!movingBack) {
-            _this3.updateStepValidationFlag(proceed);
-          }
+            if (!movingBack) {
+              _this3.updateStepValidationFlag(proceed);
+            }
 
-          if (proceed) {
+            if (proceed) {
+              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 = _this3.props.steps.reduce(function (a, c, i) {
+                  if (i >= _this3.state.compState && i < evt.target.value) {
+                    a.push(c.validated);
+                  }
+                  return a;
+                }, []).some(function (c) {
+                  return c === false;
+                });
+              }
+            }
+          }).catch(function (e) {
+            // Promise based validation was a fail (i.e reject())
             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 = _this3.props.steps.reduce(function (a, c, i) {
-                if (i >= _this3.state.compState && i < evt.target.value) {
-                  a.push(c.validated);
-                }
-                return a;
-              }, []).some(function (c) {
-                return c === false;
-              });
+              _this3.updateStepValidationFlag(false);
             }
-          }
-        }).catch(function (e) {
-          // Promise based validation was a fail (i.e reject())
-          if (!movingBack) {
-            _this3.updateStepValidationFlag(false);
-          }
-        }).then(function () {
-          // this is like finally(), executes if error no no error
-          if (proceed && !passThroughStepsNotValid) {
-            if (evt.target.value === _this3.props.steps.length - 1 && _this3.state.compState === _this3.props.steps.length - 1) {
-              _this3.setNavState(_this3.props.steps.length);
-            } else {
-              _this3.setNavState(evt.target.value);
+          }).then(function () {
+            // this is like finally(), executes if error no no error
+            if (proceed && !passThroughStepsNotValid) {
+              if (evt.target.value === _this3.props.steps.length - 1 && _this3.state.compState === _this3.props.steps.length - 1) {
+                _this3.setNavState(_this3.props.steps.length);
+              } else {
+                _this3.setNavState(evt.target.value);
+              }
             }
-          }
-        }).catch(function (e) {
-          if (e) {
-            // see note below called "CatchRethrowing"
-            // ... plus the finally then() above is what throws the JS Error so we need to catch that here specifically
-            setTimeout(function () {
-              throw e;
-            });
-          }
-        });
+          }).catch(function (e) {
+            if (e) {
+              // see note below called "CatchRethrowing"
+              // ... plus the finally then() above is what throws the JS Error so we need to catch that here specifically
+              setTimeout(function () {
+                throw e;
+              });
+            }
+          });
+        }();
+
+        if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
       }
     }
 

diff --git a/docs/dist/bundle.js b/docs/dist/bundle.js
@@ -22296,7 +22296,11 @@
 	            steps: steps,
 	            preventEnterSubmission: true,
 	            nextTextOnFinalActionStep: "Save",
-	            hocValidationAppliedTo: [3]
+	            hocValidationAppliedTo: [3],
+	            startAtStep: window.sessionStorage.getItem('step') ? parseFloat(window.sessionStorage.getItem('step')) : 0,
+	            onStepChange: function onStepChange(step) {
+	              return window.sessionStorage.setItem('step', step);
+	            }
 	          })
 	        )
 	      );
@@ -22443,8 +22447,12 @@
 
 	  }, {
 	    key: 'checkNavState',
-	    value: function checkNavState(currentStep) {
-	      this.setState(this.getPrevNextBtnState(currentStep));
+	    value: function checkNavState(nextStep) {
+	      if (this.props.onStepChange) {
+	        this.props.onStepChange(nextStep);
+	      }
+
+	      this.setState(this.getPrevNextBtnState(nextStep));
 	    }
 
 	    // set the nav state
@@ -22488,7 +22496,7 @@
 	      } else {
 	        var _ret = function () {
 	          // the main navigation step ui is invoking a jump between steps
-	          if (!_this3.props.stepsNavigation || evt.target.value == _this3.state.compState) {
+	          if (!_this3.props.stepsNavigation || evt.target.value === _this3.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();
@@ -22698,6 +22706,8 @@
 	    value: function render() {
 	      var _this6 = this;
 
+	      var props = this.props;
+
 	      var compToRender = void 0;
 
 	      // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
@@ -22733,20 +22743,26 @@
 	          { style: this.props.showNavigation ? {} : this.hidden, className: 'footer-buttons' },
 	          _react2.default.createElement(
 	            'button',
-	            { style: this.state.showPreviousBtn ? {} : this.hidden,
-	              className: 'btn btn-prev btn-primary btn-lg pull-left',
+	            {
+	              style: this.state.showPreviousBtn ? {} : this.hidden,
+	              className: props.backButtonCls,
 	              onClick: function onClick() {
 	                _this6.previous();
-	              } },
+	              },
+	              id: 'prev-button'
+	            },
 	            this.props.backButtonText
 	          ),
 	          _react2.default.createElement(
 	            'button',
-	            { style: this.state.showNextBtn ? {} : this.hidden,
-	              className: 'btn btn-next btn-primary btn-lg pull-right',
+	            {
+	              style: this.state.showNextBtn ? {} : this.hidden,
+	              className: props.nextButtonCls,
 	              onClick: function onClick() {
 	                _this6.next();
-	              } },
+	              },
+	              id: 'next-button'
+	            },
 	            this.state.nextStepText
 	          )
 	        )
@@ -22769,7 +22785,9 @@
 	  preventEnterSubmission: false,
 	  startAtStep: 0,
 	  nextButtonText: "Next",
+	  nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right",
 	  backButtonText: "Previous",
+	  backButtonCls: "btn btn-next btn-primary btn-lg pull-left",
 	  hocValidationAppliedTo: []
 	};
 
@@ -22786,8 +22804,11 @@
 	  preventEnterSubmission: _propTypes2.default.bool,
 	  startAtStep: _propTypes2.default.number,
 	  nextButtonText: _propTypes2.default.string,
+	  nextButtonCls: _propTypes2.default.string,
+	  backButtonCls: _propTypes2.default.string,
 	  backButtonText: _propTypes2.default.string,
-	  hocValidationAppliedTo: _propTypes2.default.array
+	  hocValidationAppliedTo: _propTypes2.default.array,
+	  onStepChange: _propTypes2.default.func
 	};
 
 /***/ },
@@ -23890,7 +23911,11 @@
 	                      _react2.default.createElement('br', null),
 	                      'nextTextOnFinalActionStep="Save"',
 	                      _react2.default.createElement('br', null),
-	                      'hocValidationAppliedTo=[3]'
+	                      'hocValidationAppliedTo=[3]',
+	                      _react2.default.createElement('br', null),
+	                      'startAtStep=window.sessionStorage.getItem(\'step\') ? parseFloat(window.sessionStorage.getItem(\'step\')) : 0',
+	                      _react2.default.createElement('br', null),
+	                      'onStepChange=(step) => window.sessionStorage.setItem(\'step\', step)'
 	                    )
 	                  ),
 	                  _react2.default.createElement(
@@ -23922,6 +23947,10 @@
 	                      _react2.default.createElement('br', null),
 	                      'backButtonText=\'Previous\'',
 	                      _react2.default.createElement('br', null),
+	                      'nextButtonCls=\'btn btn-prev btn-primary btn-lg pull-right\'',
+	                      _react2.default.createElement('br', null),
+	                      'backButtonCls=\'btn btn-next btn-primary btn-lg pull-left\'',
+	                      _react2.default.createElement('br', null),
 	                      'nextTextOnFinalActionStep=\'[default value of nextButtonText]\'',
 	                      _react2.default.createElement('br', null),
 	                      'hocValidationAppliedTo: []'

diff --git a/docs/index.html b/docs/index.html
@@ -146,7 +146,7 @@
   <!--[if lt IE 8]>
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
-  <div class="lib-version">v4.6.3</div>
+  <div class="lib-version">v4.7.0</div>
 
   <div id="root" class="container"></div>
 

diff --git a/docs/main.js b/docs/main.js
@@ -129,8 +129,12 @@ var StepZilla = function (_Component) {
 
   }, {
     key: 'checkNavState',
-    value: function checkNavState(currentStep) {
-      this.setState(this.getPrevNextBtnState(currentStep));
+    value: function checkNavState(nextStep) {
+      if (this.props.onStepChange) {
+        this.props.onStepChange(nextStep);
+      }
+
+      this.setState(this.getPrevNextBtnState(nextStep));
     }
 
     // set the nav state
@@ -174,7 +178,7 @@ var StepZilla = function (_Component) {
       } else {
         var _ret = function () {
           // the main navigation step ui is invoking a jump between steps
-          if (!_this3.props.stepsNavigation || evt.target.value == _this3.state.compState) {
+          if (!_this3.props.stepsNavigation || evt.target.value === _this3.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();
@@ -384,6 +388,8 @@ var StepZilla = function (_Component) {
     value: function render() {
       var _this6 = this;
 
+      var props = this.props;
+
       var compToRender = void 0;
 
       // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
@@ -419,20 +425,26 @@ var StepZilla = function (_Component) {
           { style: this.props.showNavigation ? {} : this.hidden, className: 'footer-buttons' },
           _react2.default.createElement(
             'button',
-            { style: this.state.showPreviousBtn ? {} : this.hidden,
-              className: 'btn btn-prev btn-primary btn-lg pull-left',
+            {
+              style: this.state.showPreviousBtn ? {} : this.hidden,
+              className: props.backButtonCls,
               onClick: function onClick() {
                 _this6.previous();
-              } },
+              },
+              id: 'prev-button'
+            },
             this.props.backButtonText
           ),
           _react2.default.createElement(
             'button',
-            { style: this.state.showNextBtn ? {} : this.hidden,
-              className: 'btn btn-next btn-primary btn-lg pull-right',
+            {
+              style: this.state.showNextBtn ? {} : this.hidden,
+              className: props.nextButtonCls,
               onClick: function onClick() {
                 _this6.next();
-              } },
+              },
+              id: 'next-button'
+            },
             this.state.nextStepText
           )
         )
@@ -455,7 +467,9 @@ StepZilla.defaultProps = {
   preventEnterSubmission: false,
   startAtStep: 0,
   nextButtonText: "Next",
+  nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right",
   backButtonText: "Previous",
+  backButtonCls: "btn btn-next btn-primary btn-lg pull-left",
   hocValidationAppliedTo: []
 };
 
@@ -472,6 +486,9 @@ StepZilla.propTypes = {
   preventEnterSubmission: _propTypes2.default.bool,
   startAtStep: _propTypes2.default.number,
   nextButtonText: _propTypes2.default.string,
+  nextButtonCls: _propTypes2.default.string,
+  backButtonCls: _propTypes2.default.string,
   backButtonText: _propTypes2.default.string,
-  hocValidationAppliedTo: _propTypes2.default.array
+  hocValidationAppliedTo: _propTypes2.default.array,
+  onStepChange: _propTypes2.default.func
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-stepzilla",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
   "main": "./dist/main.js",
   "scripts": {

diff --git a/src/examples/index.html b/src/examples/index.html
@@ -146,7 +146,7 @@
   <!--[if lt IE 8]>
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
-  <div class="lib-version">v4.6.3</div>
+  <div class="lib-version">v4.7.0</div>
 
   <div id="root" class="container"></div>
 

diff --git a/src/main.js b/src/main.js
@@ -93,6 +93,7 @@ export default class StepZilla extends Component {
     if (this.props.onStepChange) {
       this.props.onStepChange(nextStep);
     }
+
     this.setState(this.getPrevNextBtnState(nextStep));
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -93,6 +93,7 @@ export default class StepZilla extends Component { @@
         if (this.props.onStepChange) {
           this.props.onStepChange(nextStep);
         }
         this.setState(this.getPrevNextBtnState(nextStep));
       }
@@ Expand Down @@