react-stepzilla - npm Package Compare versions

Comparing version 4.7.3 to 4.8.0

dist/main.js

@@ -7,4 +7,2 @@ 'use strict';
 
-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; }; }();
@@ -40,6 +38,6 @@
 
-    _this.state = _extends({}, _this.getPrevNextBtnState(_this.props.startAtStep), {
+    _this.state = {
       compState: _this.props.startAtStep,
       navState: _this.getNavStates(_this.props.startAtStep, _this.props.steps.length)
-    });
+    };
 
@@ -98,4 +96,4 @@ _this.hidden = {
   }, {
-    key: 'getPrevNextBtnState',
-    value: function getPrevNextBtnState(currentStep) {
+    key: 'getPrevNextBtnLayout',
+    value: function getPrevNextBtnLayout(currentStep) {
       // first set default values
@@ -137,4 +135,2 @@ var showPreviousBtn = true;
       }
-
-      this.setState(this.getPrevNextBtnState(nextStep));
     }
@@ -396,4 +392,10 @@
 
+      var _getPrevNextBtnLayout = this.getPrevNextBtnLayout(this.state.compState),
+          nextStepText = _getPrevNextBtnLayout.nextStepText,
+          showNextBtn = _getPrevNextBtnLayout.showNextBtn,
+          showPreviousBtn = _getPrevNextBtnLayout.showPreviousBtn;
+
       // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
 
+
       var cloneExtensions = {
@@ -432,3 +434,3 @@ jumpToStep: function jumpToStep(t) {
             {
-              style: this.state.showPreviousBtn ? {} : this.hidden,
+              style: showPreviousBtn ? {} : this.hidden,
               className: props.backButtonCls,
@@ -445,3 +447,3 @@ onClick: function onClick() {
             {
-              style: this.state.showNextBtn ? {} : this.hidden,
+              style: showNextBtn ? {} : this.hidden,
               className: props.nextButtonCls,
@@ -453,3 +455,3 @@ onClick: function onClick() {
             },
-            this.state.nextStepText
+            nextStepText
           )
@@ -456,0 +458,0 @@ )

docs/main.js

@@ -7,4 +7,2 @@ 'use strict';
 
-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; }; }();
@@ -40,6 +38,6 @@
 
-    _this.state = _extends({}, _this.getPrevNextBtnState(_this.props.startAtStep), {
+    _this.state = {
       compState: _this.props.startAtStep,
       navState: _this.getNavStates(_this.props.startAtStep, _this.props.steps.length)
-    });
+    };
 
@@ -98,4 +96,4 @@ _this.hidden = {
   }, {
-    key: 'getPrevNextBtnState',
-    value: function getPrevNextBtnState(currentStep) {
+    key: 'getPrevNextBtnLayout',
+    value: function getPrevNextBtnLayout(currentStep) {
       // first set default values
@@ -137,4 +135,2 @@ var showPreviousBtn = true;
       }
-
-      this.setState(this.getPrevNextBtnState(nextStep));
     }
@@ -396,4 +392,10 @@
 
+      var _getPrevNextBtnLayout = this.getPrevNextBtnLayout(this.state.compState),
+          nextStepText = _getPrevNextBtnLayout.nextStepText,
+          showNextBtn = _getPrevNextBtnLayout.showNextBtn,
+          showPreviousBtn = _getPrevNextBtnLayout.showPreviousBtn;
+
       // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
 
+
       var cloneExtensions = {
@@ -432,3 +434,3 @@ jumpToStep: function jumpToStep(t) {
             {
-              style: this.state.showPreviousBtn ? {} : this.hidden,
+              style: showPreviousBtn ? {} : this.hidden,
               className: props.backButtonCls,
@@ -445,3 +447,3 @@ onClick: function onClick() {
             {
-              style: this.state.showNextBtn ? {} : this.hidden,
+              style: showNextBtn ? {} : this.hidden,
               className: props.nextButtonCls,
@@ -453,3 +455,3 @@ onClick: function onClick() {
             },
-            this.state.nextStepText
+            nextStepText
           )
@@ -456,0 +458,0 @@ )

package.json

 {
   "name": "react-stepzilla",
-  "version": "4.7.3",
+  "version": "4.8.0",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
@@ -56,2 +56,4 @@ "main": "./dist/main.js",
     "gulp-plumber": "^1.1.0",
+    "i18next": "^12.0.0",
+    "i18next-browser-languagedetector": "^2.2.3",
     "isparta": "^4.0.0",
@@ -65,2 +67,3 @@ "joi": "^10.2.2",
     "react-dom": "^15.5.4",
+    "react-i18next": "^8.1.0",
     "react-addons-test-utils": "^15.5.1",
@@ -78,3 +81,5 @@ "react-validation-mixin": "^5.4.0",
     "react-dom": "^15.5.4"
+  },
+  "dependencies": {
   }
 }

README.md

@@ -6,2 +6,3 @@ # react stepzilla [![npm version](https://badge.fury.io/js/react-stepzilla.svg)](https://badge.fury.io/js/react-stepzilla)
 ```
+v4.8.0: multiple examples. includes a cool demo of i18n - Internationalization and localization (tnx @tomtoxx)
 v4.7.2: optimised react, react-dom dependency loading (peerDependencies)
@@ -32,3 +33,3 @@ v4.5.0: ported to react and react-dom 15.5.4
 ```
-var StepZilla = require('react-stepzilla')
+import StepZilla from "react-stepzilla";
 ```
@@ -35,0 +36,0 @@ - define the list of all the components* you want to step through. The `name` indicates the title of the UI step and component is what loads.

src/examples/App.js

@@ -5,6 +5,20 @@ 'use strict';
 import ReactDOM from 'react-dom';
+
+// S: Base - vanilla example
 import Example from './Example';
 
-require('../css/main.css');
+ReactDOM.render(<Example />, document.getElementById('root'));
+// E: Base - vanilla example
 
-ReactDOM.render(<Example />, document.getElementById('root'));
+// S: i18n - Internationalization and localization example
+import Examplei18n from './i18n/Example';
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n/i18n";
+
+ReactDOM.render(
+  <I18nextProvider i18n={i18n}>
+    <Examplei18n />
+  </I18nextProvider>
+  , document.getElementById('rooti18n')
+);
+// E: i18n - Internationalization and localization example

src/examples/Example.js

 'use strict';
 
 import React, { Component } from 'react';
-import StepZilla from '../main'
-import Step1 from './Step1'
-import Step2 from './Step2'
-import Step3 from './Step3'
-import Step4 from './Step4'
-import Step5 from './Step5'
-import Step6 from './Step6'
+import StepZilla from '../main';
+import Step1 from './Step1';
+import Step2 from './Step2';
+import Step3 from './Step3';
+import Step4 from './Step4';
+import Step5 from './Step5';
+import Step6 from './Step6';
 
+import '../css/main.css';
+
 export default class Example extends Component {
@@ -13,0 +15,0 @@ constructor(props) {

src/examples/Step5.js

@@ -23,14 +23,16 @@ 'use strict';
   isValidated() {
-    // typically this method needs to return true or false (to indicate if the local forms are validated, so StepZilla can move to the next step),
-    // but in this example we simulate an ajax request which is async. In the case of async validation or server saving etc. return a Promise and StepZilla will wait
-    // ... for the resolve() to work out if we can move to the next step
-    // So here are the rules:
-    // ~~~~~~~~~~~~~~~~~~~~~~~~
-    // SYNC action (e.g. local JS form validation).. if you return:
-    // true/undefined: validation has passed. Move to next step.
-    // false: validation failed. Stay on current step
-    // ~~~~~~~~~~~~~~~~~~~~~~~~
-    // ASYNC return (server side validation or saving data to server etc).. you need to return a Promise which can resolve like so:
-    // resolve(): validation/save has passed. Move to next step.
-    // reject(): validation/save failed. Stay on current step
+    /*
+    typically this method needs to return true or false (to indicate if the local forms are validated, so StepZilla can move to the next step),
+    but in this example we simulate an ajax request which is async. In the case of async validation or server saving etc. return a Promise and StepZilla will wait
+    ... for the resolve() to work out if we can move to the next step
+    So here are the rules:
+    ~~~~~~~~~~~~~~~~~~~~~~~~
+    SYNC action (e.g. local JS form validation).. if you return:
+    true/undefined: validation has passed. Move to next step.
+    false: validation failed. Stay on current step
+    ~~~~~~~~~~~~~~~~~~~~~~~~
+    ASYNC return (server side validation or saving data to server etc).. you need to return a Promise which can resolve like so:
+    resolve(): validation/save has passed. Move to next step.
+    reject(): validation/save failed. Stay on current step
+    */
 
@@ -37,0 +39,0 @@ this.setState({

src/main.js

@@ -10,3 +10,2 @@ import React, { Component } from 'react';
     this.state = {
-      ...this.getPrevNextBtnState(this.props.startAtStep),
       compState: this.props.startAtStep,
@@ -60,3 +59,3 @@ navState: this.getNavStates(this.props.startAtStep, this.props.steps.length)
 
-  getPrevNextBtnState(currentStep) {
+  getPrevNextBtnLayout(currentStep) {
     // first set default values
@@ -95,4 +94,2 @@ let showPreviousBtn = true;
     }
-
-    this.setState(this.getPrevNextBtnState(nextStep));
   }
@@ -295,2 +292,3 @@
     const { props } = this;
+    const { nextStepText, showNextBtn, showPreviousBtn } = this.getPrevNextBtnLayout(this.state.compState);
 
@@ -327,3 +325,3 @@ // clone the step component dynamically and tag it as activeComponent so we can validate it on next. also bind the jumpToStep piping method
           <button
-            style={this.state.showPreviousBtn ? {} : this.hidden}
+            style={showPreviousBtn ? {} : this.hidden}
             className={props.backButtonCls}
@@ -336,3 +334,3 @@ onClick={() => { this.previous(); }}
           <button
-            style={this.state.showNextBtn ? {} : this.hidden}
+            style={showNextBtn ? {} : this.hidden}
             className={props.nextButtonCls}
@@ -342,3 +340,3 @@ onClick={() => { this.next(); }}
           >
-            {this.state.nextStepText}
+            {nextStepText}
           </button>
@@ -345,0 +343,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

2080270

increased by14.59%

Number of package files

38

increased by40.74%

Lines of code

50357

increased by13.4%

Number of lines in readme file

189

increased by0.53%

Worsened metrics

Dev dependency count

41

increased by7.89%

No dependency changes