react-bootstrap-wizard - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

@@ -0,1 +1,9 @@
+## [0.0.6] 2019-01-03
+### Bug fixing
+- Updated README.md
+## Enhancement
+- Added new prop inside `steps` for sending props to the step component (`stepProps`)
+- Added new boolean prop `progressbar`, which will determinate the apperance of a progressbar insted of the moving tab (**Caution: You will need to add steps.stepIcon to your steps for this to work nice**)
+- Added `classnames` library to the project
+
 ## [0.0.5] 2018-08-27
@@ -2,0 +10,0 @@ ### Bug fixing

dist/index.js

@@ -21,4 +21,10 @@ "use strict";
 
+var _classnames4 = require("classnames");
+
+var _classnames5 = _interopRequireDefault(_classnames4);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,3 +44,3 @@
 
-    var width;
+    var width = void 0;
     if (_this.props.steps.length === 1) {
@@ -67,2 +73,5 @@ width = "100%";
         transition: "transform 0s"
+      },
+      progressbarStyle: {
+        width: 100 / _this.props.steps.length / 2 + "%"
       }
@@ -118,3 +127,3 @@ };
           this.setState({
-            wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
+            wizardData: _extends({}, this.state.wizardData, _defineProperty({}, this.props.steps[this.state.currentStep].stepName, this.refs[this.props.steps[this.state.currentStep].stepName].state)),
             currentStep: key,
@@ -135,3 +144,3 @@ nextButton: this.props.steps.length > key + 1 ? true : false,
         this.setState({
-          wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
+          wizardData: _extends({}, this.state.wizardData, _defineProperty({}, this.props.steps[this.state.currentStep].stepName, this.refs[this.props.steps[this.state.currentStep].stepName].state)),
           currentStep: key,
@@ -151,3 +160,3 @@ nextButton: this.props.steps.length > key + 1 ? true : false,
         this.setState({
-          wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
+          wizardData: _extends({}, this.state.wizardData, _defineProperty({}, this.props.steps[this.state.currentStep].stepName, this.refs[this.props.steps[this.state.currentStep].stepName].state)),
           currentStep: key,
@@ -166,5 +175,12 @@ nextButton: this.props.steps.length > key + 1 ? true : false,
 
+      if (this.props.progressbar) {
+        this.setState({
+          progressbarStyle: {
+            width: "100%"
+          }
+        });
+      }
       if (this.props.validate && (this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined && this.refs[this.props.steps[this.state.currentStep].stepName].isValidated() || this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) && this.props.finishButtonClick !== undefined) {
         this.setState({
-          wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state)
+          wizardData: _extends({}, this.state.wizardData, _defineProperty({}, this.props.steps[this.state.currentStep].stepName, this.refs[this.props.steps[this.state.currentStep].stepName].state))
         }, function () {
@@ -174,2 +190,3 @@ _this3.props.finishButtonClick(_this3.state.wizardData);
       }
+      if (this.props.finishButtonClick !== undefined) {}
     }
@@ -211,3 +228,8 @@ }, {
       };
-      this.setState({ movingTabStyle: movingTabStyle });
+      this.setState({
+        movingTabStyle: movingTabStyle,
+        progressbarStyle: {
+          width: move_distance + step_width / 2
+        }
+      });
     }
@@ -245,2 +267,11 @@ }, {
               _react2.default.createElement(
+                "div",
+                { className: "progress-with-circle" },
+                _react2.default.createElement("div", {
+                  className: "progress-bar",
+                  role: "progressbar",
+                  style: this.state.progressbarStyle
+                })
+              ),
+              _react2.default.createElement(
                 _reactstrap.Nav,
@@ -255,3 +286,3 @@ { pills: true },
                       {
-                        className: key === _this4.state.currentStep ? "active" : "",
+                        className: (0, _classnames5.default)({ active: key === _this4.state.currentStep }, { checked: key < _this4.state.currentStep }),
                         onClick: function onClick() {
@@ -262,3 +293,7 @@ return _this4.navigationStepChange(key);
                       prop.stepIcon !== undefined && prop.stepIcon !== "" ? _react2.default.createElement("i", { className: prop.stepIcon }) : null,
-                      prop.stepName
+                      _this4.props.progressbar ? _react2.default.createElement(
+                        "p",
+                        null,
+                        prop.stepName
+                      ) : prop.stepName
                     )
@@ -268,6 +303,8 @@ );
               ),
-              _react2.default.createElement(
+              this.props.progressbar ? null : _react2.default.createElement(
                 "div",
                 { className: "moving-tab", style: this.state.movingTabStyle },
-                this.props.steps[this.state.currentStep].stepIcon !== undefined && this.props.steps[this.state.currentStep].stepIcon !== "" ? _react2.default.createElement("i", { className: this.props.steps[this.state.currentStep].stepIcon }) : null,
+                this.props.steps[this.state.currentStep].stepIcon !== undefined && this.props.steps[this.state.currentStep].stepIcon !== "" ? _react2.default.createElement("i", {
+                  className: this.props.steps[this.state.currentStep].stepIcon
+                }) : null,
                 this.props.steps[this.state.currentStep].stepName
@@ -289,8 +326,10 @@ )
                     key: key,
-                    className: _this4.state.currentStep === key ? "fade show active" : "fade"
+                    className: (0, _classnames5.default)("fade", {
+                      show: _this4.state.currentStep === key
+                    })
                   },
-                  typeof prop.component === "function" ? _react2.default.createElement(prop.component, {
+                  typeof prop.component === "function" ? _react2.default.createElement(prop.component, _extends({
                     ref: prop.stepName,
                     wizardData: _this4.state.wizardData
-                  }) : _react2.default.createElement(
+                  }, prop.stepProps)) : _react2.default.createElement(
                     "div",
@@ -313,3 +352,3 @@ { ref: prop.stepName },
                 {
-                  className: "btn-next" + (this.props.nextButtonClasses !== undefined ? " " + this.props.nextButtonClasses : ""),
+                  className: (0, _classnames5.default)("btn-next", _defineProperty({}, this.props.nextButtonClasses, this.props.nextButtonClasses !== undefined)),
                   onClick: function onClick() {
@@ -324,3 +363,3 @@ return _this4.nextButtonClick();
                 {
-                  className: "btn-finish d-inline-block" + (this.props.finishButtonClasses !== undefined ? " " + this.props.finishButtonClasses : ""),
+                  className: (0, _classnames5.default)("btn-finish d-inline-block", _defineProperty({}, this.props.finishButtonClasses, this.props.finishButtonClasses !== undefined)),
                   onClick: function onClick() {
@@ -339,3 +378,3 @@ return _this4.finishButtonClick();
                 {
-                  className: "btn-previous" + (this.props.previousButtonClasses !== undefined ? " " + this.props.previousButtonClasses : ""),
+                  className: (0, _classnames5.default)("btn-previous", _defineProperty({}, this.props.previousButtonClasses, this.props.previousButtonClasses !== undefined)),
                   onClick: function onClick() {
@@ -360,5 +399,7 @@ return _this4.previousButtonClick();
   validate: false,
-  previousButtonTex: "Previous",
+  previousButtonText: "Previous",
   finishButtonText: "Finish",
-  nextButtonText: "Next"
+  nextButtonText: "Next",
+  color: "primary",
+  progressbar: false
 };
@@ -375,3 +416,3 @@
   finishButtonClick: _propTypes2.default.func,
-  previousButtonTex: _propTypes2.default.node,
+  previousButtonText: _propTypes2.default.node,
   finishButtonText: _propTypes2.default.node,
@@ -381,6 +422,8 @@ nextButtonText: _propTypes2.default.node,
   description: _propTypes2.default.node,
+  progressbar: _propTypes2.default.bool,
   steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     stepName: _propTypes2.default.string.isRequired,
     stepIcon: _propTypes2.default.string,
-    component: _propTypes2.default.func.isRequired
+    component: _propTypes2.default.func.isRequired,
+    stepProps: _propTypes2.default.object
   })).isRequired
@@ -387,0 +430,0 @@ };

index.js

@@ -16,2 +16,3 @@ import React from "react";
 import PropTypes from "prop-types";
+import classnames from "classnames";
 
@@ -21,3 +22,3 @@ class ReactWizard extends React.Component {
     super(props);
-    var width;
+    let width;
     if (this.props.steps.length === 1) {
@@ -51,2 +52,5 @@ width = "100%";
         transition: "transform 0s"
+      },
+      progressbarStyle: {
+        width: 100 / this.props.steps.length / 2 + "%"
       }
@@ -64,3 +68,3 @@ };
   }
-  componentWillUnmount(){
+  componentWillUnmount() {
     this.isCancelled = true;
@@ -74,3 +78,4 @@ window.removeEventListener("resize", this.updateWidth);
   updateWidth() {
-    !this.isCancelled && setTimeout(() => this.refreshAnimation(this.state.currentStep),200);
+    !this.isCancelled &&
+      setTimeout(() => this.refreshAnimation(this.state.currentStep), 200);
   }
@@ -95,4 +100,5 @@ navigationStepChange(key) {
             ...this.state.wizardData,
-            ...this.refs[this.props.steps[this.state.currentStep].stepName]
-              .state
+            [this.props.steps[this.state.currentStep].stepName]: this.refs[
+              this.props.steps[this.state.currentStep].stepName
+            ].state
           },
@@ -118,3 +124,4 @@ currentStep: key,
             .isValidated === undefined)) ||
-      this.props.validate === undefined || !this.props.validate
+      this.props.validate === undefined ||
+      !this.props.validate
     ) {
@@ -125,3 +132,5 @@ var key = this.state.currentStep + 1;
           ...this.state.wizardData,
-          ...this.refs[this.props.steps[this.state.currentStep].stepName].state
+          [this.props.steps[this.state.currentStep].stepName]: this.refs[
+            this.props.steps[this.state.currentStep].stepName
+          ].state
         },
@@ -142,3 +151,5 @@ currentStep: key,
           ...this.state.wizardData,
-          ...this.refs[this.props.steps[this.state.currentStep].stepName].state
+          [this.props.steps[this.state.currentStep].stepName]: this.refs[
+            this.props.steps[this.state.currentStep].stepName
+          ].state
         },
@@ -154,2 +165,9 @@ currentStep: key,
   finishButtonClick() {
+    if (this.props.progressbar) {
+      this.setState({
+        progressbarStyle: {
+          width: "100%"
+        }
+      });
+    }
     if (
@@ -170,4 +188,5 @@ this.props.validate &&
             ...this.state.wizardData,
-            ...this.refs[this.props.steps[this.state.currentStep].stepName]
-              .state
+            [this.props.steps[this.state.currentStep].stepName]: this.refs[
+              this.props.steps[this.state.currentStep].stepName
+            ].state
           }
@@ -180,2 +199,4 @@ },
     }
+    if (this.props.finishButtonClick !== undefined) {
+    }
   }
@@ -220,3 +241,8 @@ refreshAnimation(index) {
     };
-    this.setState({ movingTabStyle: movingTabStyle });
+    this.setState({
+      movingTabStyle: movingTabStyle,
+      progressbarStyle: {
+        width: move_distance + step_width / 2
+      }
+    });
   }
@@ -242,2 +268,9 @@ render() {
               <div className="wizard-navigation" ref="navStepsLi">
+                <div className="progress-with-circle">
+                  <div
+                    className="progress-bar"
+                    role="progressbar"
+                    style={this.state.progressbarStyle}
+                  />
+                </div>
                 <Nav pills>
@@ -248,13 +281,17 @@ {this.props.steps.map((prop, key) => {
                         <NavLink
-                          className={
-                            key === this.state.currentStep ? "active" : ""
-                          }
+                          className={classnames(
+                            { active: key === this.state.currentStep },
+                            { checked: key < this.state.currentStep }
+                          )}
                           onClick={() => this.navigationStepChange(key)}
                         >
-                          {
-                            prop.stepIcon !== undefined && prop.stepIcon !== "" ? (
-                              <i className={prop.stepIcon}/>
-                            ):null
-                          }
-                          {prop.stepName}
+                          {prop.stepIcon !== undefined &&
+                          prop.stepIcon !== "" ? (
+                            <i className={prop.stepIcon} />
+                          ) : null}
+                          {this.props.progressbar ? (
+                            <p>{prop.stepName}</p>
+                          ) : (
+                            prop.stepName
+                          )}
                         </NavLink>
@@ -265,11 +302,16 @@ </NavItem>
                 </Nav>
-                <div className="moving-tab" style={this.state.movingTabStyle}>
-                  {
-                    this.props.steps[this.state.currentStep].stepIcon !== undefined &&
+                {this.props.progressbar ? null : (
+                  <div className="moving-tab" style={this.state.movingTabStyle}>
+                    {this.props.steps[this.state.currentStep].stepIcon !==
+                      undefined &&
                     this.props.steps[this.state.currentStep].stepIcon !== "" ? (
-                      <i className={this.props.steps[this.state.currentStep].stepIcon}/>
-                    ):null
-                  }
-                  {this.props.steps[this.state.currentStep].stepName}
-                </div>
+                      <i
+                        className={
+                          this.props.steps[this.state.currentStep].stepIcon
+                        }
+                      />
+                    ) : null}
+                    {this.props.steps[this.state.currentStep].stepName}
+                  </div>
+                )}
               </div>
@@ -285,7 +327,5 @@ </CardHeader>
                     key={key}
-                    className={
-                      this.state.currentStep === key
-                        ? "fade show active"
-                        : "fade"
-                    }
+                    className={classnames("fade", {
+                      show: this.state.currentStep === key
+                    })}
                   >
@@ -296,2 +336,3 @@ {typeof prop.component === "function" ? (
                         wizardData={this.state.wizardData}
+                        {...prop.stepProps}
                       />
@@ -310,8 +351,6 @@ ) : (
                 <Button
-                  className={
-                    "btn-next" +
-                    (this.props.nextButtonClasses !== undefined
-                      ? " " + this.props.nextButtonClasses
-                      : "")
-                  }
+                  className={classnames("btn-next", {
+                    [this.props.nextButtonClasses]:
+                      this.props.nextButtonClasses !== undefined
+                  })}
                   onClick={() => this.nextButtonClick()}
@@ -326,8 +365,6 @@ >
                 <Button
-                  className={
-                    "btn-finish d-inline-block" +
-                    (this.props.finishButtonClasses !== undefined
-                      ? " " + this.props.finishButtonClasses
-                      : "")
-                  }
+                  className={classnames("btn-finish d-inline-block", {
+                    [this.props.finishButtonClasses]:
+                      this.props.finishButtonClasses !== undefined
+                  })}
                   onClick={() => this.finishButtonClick()}
@@ -344,8 +381,6 @@ >
                 <Button
-                  className={
-                    "btn-previous" +
-                    (this.props.previousButtonClasses !== undefined
-                      ? " " + this.props.previousButtonClasses
-                      : "")
-                  }
+                  className={classnames("btn-previous", {
+                    [this.props.previousButtonClasses]:
+                      this.props.previousButtonClasses !== undefined
+                  })}
                   onClick={() => this.previousButtonClick()}
@@ -369,6 +404,8 @@ >
   validate: false,
-  previousButtonTex: "Previous",
+  previousButtonText: "Previous",
   finishButtonText: "Finish",
-  nextButtonText: "Next"
-}
+  nextButtonText: "Next",
+  color: "primary",
+  progressbar: false
+};
 
@@ -384,3 +421,3 @@ ReactWizard.propTypes = {
   finishButtonClick: PropTypes.func,
-  previousButtonTex: PropTypes.node,
+  previousButtonText: PropTypes.node,
   finishButtonText: PropTypes.node,
@@ -390,2 +427,3 @@ nextButtonText: PropTypes.node,
   description: PropTypes.node,
+  progressbar: PropTypes.bool,
   steps: PropTypes.arrayOf(
@@ -395,7 +433,8 @@ PropTypes.shape({
       stepIcon: PropTypes.string,
-      component: PropTypes.func.isRequired
+      component: PropTypes.func.isRequired,
+      stepProps: PropTypes.object
     })
-  ).isRequired,
+  ).isRequired
 };
 
 export default ReactWizard;

package.json

 {
     "name": "react-bootstrap-wizard",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "A react component package that allows you to split a complicated flow or a complicated form in multiple steps.",
@@ -30,3 +30,5 @@ "main": "dist/index.js",
         "react": "16.x.x",
-        "reactstrap": "6.x.x"
+        "reactstrap": "6.x.x",
+        "prop-types": "15.x.x",
+        "classnames": "2.x.x"
     },
@@ -33,0 +35,0 @@ "keywords": [

README.md

@@ -28,6 +28,8 @@ # React Wizard
   validate: false,
-  previousButtonTex: "Previous",
+  previousButtonText: "Previous",
   finishButtonText: "Finish",
-  nextButtonText: "Next"
-}
+  nextButtonText: "Next",
+  color: "primary",
+  progressbar: false
+};
 
@@ -43,3 +45,3 @@ ReactWizard.propTypes = {
   finishButtonClick: PropTypes.func,
-  previousButtonTex: PropTypes.node,
+  previousButtonText: PropTypes.node,
   finishButtonText: PropTypes.node,
@@ -49,2 +51,3 @@ nextButtonText: PropTypes.node,
   description: PropTypes.node,
+  progressbar: PropTypes.bool,
   steps: PropTypes.arrayOf(
@@ -54,5 +57,6 @@ PropTypes.shape({
       stepIcon: PropTypes.string,
-      component: PropTypes.func.isRequired
+      component: PropTypes.func.isRequired,
+      stepProps: PropTypes.object,
     })
-  ).isRequired,
+  ).isRequired
 };
@@ -101,2 +105,5 @@ ```
 
+### *progressbar*
+By setting this prop to true, a progressbar will we rendered instead of a moving tab for the active tab (default is ***false***).
+
 ### *steps*
@@ -107,2 +114,27 @@ This is an array of objects. This objects have two properties:
 3. *component* -> this is what will be rendered for each *stepName* (**has to be class/function**)
+4. *stepProps* -> this props will be added to the step upon rendering (**has to be an object - like the state object**)
+Example of steps:
+```
+var steps = [
+  {
+    stepName: "About",
+    stepIcon: "tim-icons icon-single-02",
+    component: Step1
+  },
+  {
+    stepName: "Account",
+    stepIcon: "tim-icons icon-settings-gear-63",
+    component: Step2
+  },
+  {
+    stepName: "Address",
+    stepIcon: "tim-icons icon-delivery-fast",
+    component: Step3,
+    stepProp: {
+      prop1: true,
+      prop2: "A string"
+    }
+  }
+];
+```
 
@@ -116,3 +148,3 @@ ### *validate*
 
-### finishButtonClick
+### *finishButtonClick*
 This function is called when the user presses the finish button.
@@ -226,3 +258,3 @@ See the bellow example to see how to use it.
 
-For this component to work properly you have to have the following libraries installed in your project:
+For this component to work properly you need to have the following libraries installed in your project:
 
@@ -238,3 +270,3 @@ ```
 [LICENSE]: ./LICENSE.md
-[version-badge]: https://img.shields.io/badge/version-0.0.5-blue.svg
+[version-badge]: https://img.shields.io/badge/version-0.0.6-blue.svg
 [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

No alert changes

Improved metrics

Total package byte prevSize

111365

increased by4.27%

Lines of code

1506

increased by5.54%

Number of lines in readme file

264

increased by13.79%

Worsened metrics

Dependency count

4

increased by100%

No dependency changes