added more options, cleaned up code

README.md

@@ -33,9 +33,35 @@ const steps =
         <StepZilla steps={steps}/>
     </div>
 ```
+
+- pass in following options as well if you want to customise it further
+
+```
+// hide or show Next and Previous Buttons
+showNavigation: true | false
+
+// disable or enable onClick step jumping from the UI navigation summary 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)
+prevBtnOnLastStep: true | false
+
+// dev control to disable calling and Child form component validation
+dontValidate: true | false
+
+```
+
+example options usage:
+```
+<div className='step-progress'>
+    <StepZilla steps={steps} stepsNavigation={false} prevBtnOnLastStep={false} />
+</div>
+```
+
+
 - 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
+- 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)
 
 ### dev
 - all node source is in src/main.js
@@ -47,6 +73,8 @@ const steps =
 - write the tests
 
 #### change log
+- 1.3.0
+  - added the options showNavigation, stepsNavigation, prevBtnOnLastStep, dontValidate
 - 1.2.0
   - fixed issue when when consumed via npm the jsx was causing a build error on the host project. Its not transpiled via babel into dist
 - 1.0.0

dist/main.js

@@ -76,7 +76,7 @@ var StepZilla = function (_Component) {
         });
       } else {
         this.setState({
-          showPreviousBtn: true,
+          showPreviousBtn: this.props.prevBtnOnLastStep ? true : false,
           showNextBtn: false
         });
       }
@@ -92,13 +92,19 @@ var StepZilla = function (_Component) {
 
       this._checkNavState(next);
     }
+
+    // handles keydown on enter being pressed in any Child component input area. in this case it goes to the next
+
   }, {
     key: '_handleKeyDown',
     value: function _handleKeyDown(evt) {
       if (evt.which === 13) {
         this._next();
       }
     }
+
+    // this utility method lets Child components invoke a direct jump to another step
+
   }, {
     key: '_jumpToStep',
     value: function _jumpToStep(evt) {
@@ -107,7 +113,14 @@ var StepZilla = function (_Component) {
         this._setNavState(evt);
       } else {
         // the main navigation step ui is invoking a jump between steps
-        if (typeof this.refs.activeComponent.isValidated == 'undefined' || this.refs.activeComponent.isValidated()) {
+        if (!this.props.stepsNavigation) {
+          evt.preventDefault();
+          evt.stopPropagation();
+
+          return;
+        }
+
+        if (this.props.dontValidate || 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 {
@@ -120,7 +133,7 @@ var StepZilla = function (_Component) {
     key: '_next',
     value: function _next() {
       // if its a form component, it should have implemeted a public isValidated class. If not then continue
-      if (typeof this.refs.activeComponent.isValidated == 'undefined' || this.refs.activeComponent.isValidated()) {
+      if (this.props.dontValidate || typeof this.refs.activeComponent.isValidated == 'undefined' || this.refs.activeComponent.isValidated()) {
         this._setNavState(this.state.compState + 1);
       }
     }
@@ -134,7 +147,12 @@ var StepZilla = function (_Component) {
   }, {
     key: '_getClassName',
     value: function _getClassName(className, i) {
-      return className + "-" + this.state.navState.styles[i];
+      var liClassName = className + "-" + this.state.navState.styles[i];
+
+      // if step ui based navigation is disabled, then dont highlight step
+      if (!this.props.stepsNavigation) liClassName += " no-hl";
+
+      return liClassName;
     }
   }, {
     key: '_renderSteps',
@@ -163,7 +181,7 @@ var StepZilla = function (_Component) {
     value: function render() {
       var _this3 = this;
 
-      // clone the step component dynamically and tag it as activeComponent so we can validate it on next
+      // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
       var compToRender = _react2.default.cloneElement(this.props.steps[this.state.compState].component, {
         ref: 'activeComponent',
         jumpToStep: function jumpToStep(t) {
@@ -209,5 +227,8 @@ exports.default = StepZilla;
 
 
 StepZilla.defaultProps = {
-  showNavigation: true
+  showNavigation: true,
+  stepsNavigation: true,
+  prevBtnOnLastStep: true,
+  dontValidate: false
 };