react-stepzilla - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/main.js

@@ -79,3 +79,3 @@ 'use strict';
         this.setState({
-          showPreviousBtn: true,
+          showPreviousBtn: this.props.prevBtnOnLastStep ? true : false,
           showNextBtn: false
@@ -96,2 +96,5 @@ });
     }
+
+    // handles keydown on enter being pressed in any Child component input area. in this case it goes to the next
+
   }, {
@@ -104,2 +107,5 @@ key: '_handleKeyDown',
     }
+
+    // this utility method lets Child components invoke a direct jump to another step
+
   }, {
@@ -113,3 +119,10 @@ key: '_jumpToStep',
         // 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) {
@@ -127,3 +140,3 @@ this._setNavState(this.props.steps.length);
       // 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);
@@ -142,3 +155,8 @@ }
     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;
     }
@@ -172,3 +190,3 @@ }, {
 
-      // 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, {
@@ -219,3 +237,6 @@ ref: 'activeComponent',
 StepZilla.defaultProps = {
-  showNavigation: true
+  showNavigation: true,
+  stepsNavigation: true,
+  prevBtnOnLastStep: true,
+  dontValidate: false
 };

package.json

 {
   "name": "react-stepzilla",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
@@ -5,0 +5,0 @@ "main": "./dist/main.js",

README.md

@@ -36,5 +36,31 @@ # react stepzilla
 ```
+
+- 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)
 
@@ -51,2 +77,4 @@ ### dev
 #### change log
+- 1.3.0
+  - added the options showNavigation, stepsNavigation, prevBtnOnLastStep, dontValidate
 - 1.2.0
@@ -53,0 +81,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

src/main.js

@@ -49,3 +49,3 @@ import React, { Component, PropTypes } from 'react';
     }
-    else if (currentStep === 0) {
+    else if (currentStep === 0 ) {
       this.setState({
@@ -58,3 +58,3 @@ showPreviousBtn: false,
       this.setState({
-        showPreviousBtn: true,
+        showPreviousBtn: (this.props.prevBtnOnLastStep) ? true : false,
         showNextBtn: false
@@ -75,2 +75,3 @@ });
 
+  // handles keydown on enter being pressed in any Child component input area. in this case it goes to the next
   _handleKeyDown(evt) {
@@ -82,2 +83,3 @@ if (evt.which === 13) {
 
+  // this utility method lets Child components invoke a direct jump to another step
   _jumpToStep(evt) {
@@ -90,11 +92,18 @@ if (evt.target == undefined) {
       // the main navigation step ui is invoking a jump between steps
-      if (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);
-        }
+      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 {
+            this._setNavState(evt.target.value);
+          }
+      }
     }
@@ -105,3 +114,3 @@ }
     // 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);
@@ -118,3 +127,9 @@ }
   _getClassName(className, i){
-    return className + "-" + this.state.navState.styles[i];
+    let 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;
   }
@@ -132,3 +147,3 @@
   render() {
-    // 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
     const compToRender = React.cloneElement(this.props.steps[this.state.compState].component, {
@@ -166,3 +181,6 @@ ref: 'activeComponent',
 StepZilla.defaultProps = {
-  showNavigation: true
+  showNavigation: true,
+  stepsNavigation: true,
+  prevBtnOnLastStep: true,
+  dontValidate: false
 };

No alert changes

Improved metrics

Number of lines in readme file

82

increased by51.85%

Worsened metrics

Total package byte prevSize

64852

decreased by-7.13%

Number of package files

10

decreased by-9.09%

Lines of code

542

decreased by-22.9%

No dependency changes