@easyguide/stepper - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/Stepper.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; }; }();
+
 var _react = require('react');
@@ -12,2 +14,4 @@
 
+var _history = require('history');
+
 var _propTypes = require('prop-types');
@@ -25,5 +29,3 @@
 
-var StepperContext = _react2.default.createContext({
-  activeStep: 0
-});
+var StepperContext = _react2.default.createContext();
 
@@ -33,2 +35,14 @@ var Stepper = function (_Component) {
 
+  _createClass(Stepper, [{
+    key: 'previousStep',
+    get: function get() {
+      return this.steps[this.steps.indexOf(this.state.activeStep) - 1];
+    }
+  }, {
+    key: 'nextStep',
+    get: function get() {
+      return this.steps[this.steps.indexOf(this.state.activeStep) + 1];
+    }
+  }]);
+
   function Stepper(props) {
@@ -39,21 +53,6 @@ _classCallCheck(this, Stepper);
 
-    _this.findStepIndex = function (step) {
-      if (!step) {
-        return 0;
-      }
-
-      return _this.steps.findIndex(function (x) {
-        return x === step;
-      });
-    };
-
     _this.previous = function () {
-      var currentStep = _this.findStepIndex(_this.state.activeStep);
-      if (currentStep === 0) {
-        return;
+      if (_this.previousStep) {
+        _this.history.push(_this.stepToPath(_this.previousStep));
       }
-
-      _this.setState({
-        activeStep: _this.steps[currentStep - 1]
-      });
     };
@@ -64,5 +63,4 @@
 
-      var currentStep = _this.findStepIndex(_this.state.activeStep);
 
-      if (currentStep === _this.steps.length - 1) {
+      if (!_this.nextStep) {
         finishCallback();
@@ -72,32 +70,45 @@ return;
 
-      _this.setState({
-        activeStep: _this.steps[currentStep + 1]
-      });
+      _this.history.push(_this.stepToPath(_this.nextStep));
     };
 
-    _this.goTo = function (step) {
-      var targetStep = _this.findStepIndex(step);
-      if (targetStep !== -1) {
-        _this.setState({
-          activeStep: _this.steps[targetStep]
-        });
-      }
+    _this.stepToPath = function (stepName) {
+      return `${_this.props.basename}/${stepName}`;
     };
 
+    _this.pathToStep = function (pathname) {
+      var pathStep = pathname.replace(`${_this.props.basename}/`, '');
+
+      var _this$steps$filter = _this.steps.filter(function (stepName) {
+        return stepName === pathStep;
+      }),
+          step = _this$steps$filter[0];
+
+      return step || _this.state.step;
+    };
+
     _this.steps = [];
 
-    _react2.default.Children.map(_this.props.children, function (child, index) {
-      var stepName = child.props.stepName ? child.props.stepName : index;
-      _this.steps.push(stepName);
+    _react2.default.Children.forEach(_this.props.children, function (child) {
+      _this.steps.push(child.props.stepName);
     });
 
     _this.state = {
-      activeStep: _this.steps[props.activeStep] || props.activeStep
+      activeStep: _this.props.activeStep || _this.steps[0]
     };
+
+    _this.history = props.history || (0, _history.createMemoryHistory)();
+    _this.history.replace(_this.stepToPath(_this.state.activeStep));
+    _this.unlisten = _this.history.listen(function (_ref) {
+      var pathname = _ref.pathname;
+
+      _this.setState({ activeStep: _this.pathToStep(pathname) });
+    });
     return _this;
   }
 
+  Stepper.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.unlisten();
+  };
+
   Stepper.prototype.render = function render() {
-    var _this2 = this;
-
     var activeStep = this.state.activeStep;
@@ -110,12 +121,12 @@ var finishCallback = this.props.finishCallback;
       previous: this.previous,
+      steps: this.steps,
       next: this.next,
-      goTo: this.goTo,
+      history: this.history,
       finishCallback
     };
 
-    var _children$filter = children.filter(function (_ref, index) {
-      var stepName = _ref.props.stepName;
+    var _children$filter = children.filter(function (_ref2) {
+      var stepName = _ref2.props.stepName;
 
-      var currentStep = activeStep || _this2.steps[activeStep];
-      return currentStep === stepName || currentStep === index;
+      return activeStep === stepName;
     }),
@@ -139,9 +150,19 @@ _children$filter$ = _children$filter[0],
 process.env.NODE_ENV !== "production" ? Stepper.propTypes = {
-  activeStep: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  basename: _propTypes2.default.string,
+  activeStep: _propTypes2.default.string,
   finishCallback: _propTypes2.default.func,
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  history: _propTypes2.default.shape({
+    entries: _propTypes2.default.array,
+    go: _propTypes2.default.func,
+    goBack: _propTypes2.default.func,
+    listen: _propTypes2.default.func,
+    location: _propTypes2.default.object,
+    push: _propTypes2.default.func,
+    replace: _propTypes2.default.func
+  })
 } : void 0;
 
 Stepper.defaultProps = {
-  activeStep: 0,
+  basename: '',
   finishCallback: function finishCallback() {}
@@ -148,0 +169,0 @@ };

dist/withStep.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _Stepper = require('./Stepper');
@@ -21,4 +25,3 @@
 var withStep = function (Component) {
-
-  return function Step(props) {
+  var Step = function (props) {
     return _react2.default.createElement(
@@ -32,4 +35,10 @@ _Stepper2.default.Consumer,
   };
+
+  process.env.NODE_ENV !== "production" ? Step.propTypes = {
+    stepName: _propTypes2.default.string.isRequired
+  } : void 0;
+
+  return Step;
 };
 
 exports.default = withStep;

package.json

 {
   "name": "@easyguide/stepper",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Components stepper ui",
@@ -80,3 +80,6 @@ "author": "iamtchelo",
   ],
-  "gitHead": "6c8a936cf5502bf19f3e9b2df8cb4e0209740fd2"
+  "dependencies": {
+    "history": "^4.7.2"
+  },
+  "gitHead": "40894f0310fa3a0381f811350d499c61ba4d13da"
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11993

increased by14.6%

Lines of code

159

increased by16.91%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedhistory@^4.7.2

• + Added@babel/runtime@7.26.9(transitive)

• + Addedhistory@4.10.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve-pathname@3.0.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addedvalue-equal@1.0.1(transitive)