react-losen - npm Package Compare versions

Comparing version 1.0.3 to 1.1.1

dist-src/Controls.js

@@ -1,94 +0,46 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 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; }
 
-var Controls =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Controls, _Component);
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 
-  function Controls() {
-    var _getPrototypeOf2;
+class Controls extends Component {
+  constructor(...args) {
+    super(...args);
 
-    var _this;
+    _defineProperty(this, "context", void 0);
 
-    _classCallCheck(this, Controls);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Controls)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "context", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "changeStep", function (direction) {
-      _this.context.changeStep(direction);
+    _defineProperty(this, "changeStep", direction => {
+      this.context.changeStep(direction);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onNext", function () {
-      if (_this.context.isLastStep) {
-        _this.context.changeStep('complete');
+    _defineProperty(this, "onNext", () => {
+      if (this.context.isLastStep) {
+        this.context.changeStep('complete');
       } else {
-        _this.context.changeStep('next');
+        this.context.changeStep('next');
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onPrevious", function () {
-      if (!_this.context.isFirstStep) {
-        _this.context.changeStep('previous');
+    _defineProperty(this, "onPrevious", () => {
+      if (!this.context.isFirstStep) {
+        this.context.changeStep('previous');
       }
     });
+  }
 
-    return _this;
+  render() {
+    const {
+      isFirstStep,
+      isLastStep
+    } = this.context;
+    return this.props.render(this.onNext, this.onPrevious, isFirstStep, isLastStep);
   }
 
-  _createClass(Controls, [{
-    key: "render",
-    value: function render() {
-      var _this$context = this.context,
-          isFirstStep = _this$context.isFirstStep,
-          isLastStep = _this$context.isLastStep;
-      return this.props.render(this.onNext, this.onPrevious, isFirstStep, isLastStep);
-    }
-  }]);
+}
 
-  return Controls;
-}(_react.Component);
-
 Controls.contextTypes = {
-  changeStep: _propTypes.default.func.isRequired,
-  isFirstStep: _propTypes.default.bool.isRequired,
-  isLastStep: _propTypes.default.bool.isRequired
+  changeStep: PropTypes.func.isRequired,
+  isFirstStep: PropTypes.bool.isRequired,
+  isLastStep: PropTypes.bool.isRequired
 };
-var _default = Controls;
-exports.default = _default;
+export default Controls;

dist-src/index.js

@@ -1,21 +0,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Wizard = _interopRequireDefault(require("./Wizard.js"));
-
-var _Step = _interopRequireDefault(require("./Step.js"));
-
-var _Controls = _interopRequireDefault(require("./Controls.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  Wizard: _Wizard.default,
-  Step: _Step.default,
-  Controls: _Controls.default
-};
-exports.default = _default;
+import Wizard from "./Wizard.js";
+import Step from "./Step.js";
+import Controls from "./Controls.js";
+export default {
+  Wizard,
+  Step,
+  Controls
+};

dist-src/Step.js

@@ -1,36 +0,6 @@
-"use strict";
+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; }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+import * as React from 'react';
+import PropTypes from 'prop-types';
 
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-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; }
-
 /*
@@ -41,72 +11,50 @@ This component accepts a name acts as a context provider between Wizard and it's children.
 */
-var Step =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(Step, _React$Component);
+class Step extends React.Component {
+  constructor(...args) {
+    super(...args);
 
-  function Step() {
-    var _getPrototypeOf2;
+    _defineProperty(this, "context", void 0);
+  }
 
-    var _this;
+  componentDidMount() {
+    this.context.registerStep(this.props.name, this.props.validator, this.props.autoSkip);
+  }
 
-    _classCallCheck(this, Step);
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextContext.activeStep.name === this.props.name && this.props.autoSkip) {
+      this.context.changeStep();
+    }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (nextProps.autoSkip !== this.props.autoSkip) {
+      // autoskip has changed. Lets notify the wizard
+      this.context.updateStep(this.props.name, {
+        autoSkip: nextProps.autoSkip
+      });
     }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Step)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "context", void 0);
-
-    return _this;
   }
 
-  _createClass(Step, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.context.registerStep(this.props.name, this.props.validator, this.props.autoSkip);
+  render() {
+    if (this.context.activeStep.name === this.props.name) {
+      return this.props.children;
     }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps, nextContext) {
-      if (nextContext.activeStep.name === this.props.name && this.props.autoSkip) {
-        this.context.changeStep();
-      }
 
-      if (nextProps.autoSkip !== this.props.autoSkip) {
-        // autoskip has changed. Lets notify the wizard
-        this.context.updateStep(this.props.name, {
-          autoSkip: nextProps.autoSkip
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.context.activeStep.name === this.props.name) {
-        return this.props.children;
-      }
+    return null;
+  }
 
-      return null;
-    }
-  }]);
+}
 
-  return Step;
-}(React.Component);
-
 _defineProperty(Step, "defaultProps", {
-  autoSkip: false
+  autoSkip: false,
+  validator: null
 });
 
 Step.contextTypes = {
-  activeStep: _propTypes.default.shape({
-    name: _propTypes.default.string.isRequired,
-    validator: _propTypes.default.func
+  activeStep: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    validator: PropTypes.func
   }).isRequired,
-  changeStep: _propTypes.default.func.isRequired,
-  registerStep: _propTypes.default.func.isRequired,
-  updateStep: _propTypes.default.func.isRequired
+  changeStep: PropTypes.func.isRequired,
+  registerStep: PropTypes.func.isRequired,
+  updateStep: PropTypes.func.isRequired
 };
-var _default = Step;
-exports.default = _default;
+export default Step;

dist-src/utils.js

@@ -1,8 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSafeNext = exports.findLastValidStepIndex = void 0;
-
 /*
@@ -13,6 +6,5 @@ Function `findLastValidStepIndex()`
 */
-var findLastValidStepIndex = function findLastValidStepIndex(steps) {
-  var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var last = startIndex;
-  steps.slice(startIndex).forEach(function (el, index) {
+export const findLastValidStepIndex = (steps, startIndex = 0) => {
+  let last = startIndex;
+  steps.slice(startIndex).forEach((el, index) => {
     if (!el.autoSkip) {
@@ -24,9 +16,6 @@ last = startIndex + index;
 };
+export const getSafeNext = (currentIndex, steps, direction) => {
+  const numberOfSteps = steps.length;
+  const nextStep = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
 
-exports.findLastValidStepIndex = findLastValidStepIndex;
-
-var getSafeNext = function getSafeNext(currentIndex, steps, direction) {
-  var numberOfSteps = steps.length;
-  var nextStep = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
-
   if (nextStep < 0) {
@@ -36,3 +25,3 @@ return 0;
 
-  var lastValidStep = findLastValidStepIndex(steps);
+  const lastValidStep = findLastValidStepIndex(steps);
 
@@ -48,4 +37,2 @@ if (lastValidStep < nextStep) {
   return nextStep;
-};
-
-exports.getSafeNext = getSafeNext;
+};

dist-src/Wizard.js

@@ -1,79 +0,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _loglevel = _interopRequireDefault(require("loglevel"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("./utils.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 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; }
 
-var emptyStep = {
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getSafeNext, findLastValidStepIndex } from "./utils.js";
+const emptyStep = {
   name: '',
-  validator: function validator() {
-    return '';
-  },
+  validator: () => '',
   autoSkip: null
 };
 
-var Wizard =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Wizard, _Component);
+class Wizard extends Component {
+  constructor(...args) {
+    super(...args);
 
-  function Wizard() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    _classCallCheck(this, Wizard);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Wizard)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _defineProperty(this, "state", {
       activeStep: emptyStep,
@@ -88,183 +26,140 @@ activeStepIndex: 0,
 
-    _defineProperty(_assertThisInitialized(_this), "stateDebugger", function () {
-      if (_this.props.debug) {
-        _loglevel.default.debug('WIZARD STATE UPDATED', _this.state);
+    _defineProperty(this, "stateDebugger", () => {
+      if (this.props.debug) {
+        console.debug('WIZARD STATE UPDATED', this.state); // eslint-disable-line
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onPartialChange", function (name) {
-      return function (data) {
-        var newStepData = data !== 'undefined' ? _defineProperty({}, name, data) : {};
-
-        _this.setState(function (prevState) {
-          return _objectSpread({}, prevState, {
-            stepData: _objectSpread({}, prevState.stepData, newStepData)
-          });
-        }, _this.stateDebugger);
-      };
+    _defineProperty(this, "onPartialChange", name => data => {
+      const newStepData = data !== 'undefined' ? {
+        [name]: data
+      } : {};
+      this.setState(prevState => ({ ...prevState,
+        stepData: { ...prevState.stepData,
+          ...newStepData
+        }
+      }), this.stateDebugger);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onComplete", function () {
-      _this.props.onComplete(_this.state.stepData, _this.state.activeStep.name);
+    _defineProperty(this, "onComplete", () => {
+      this.props.onComplete(this.state.stepData, this.state.activeStep.name);
     });
-
-    return _this;
   }
 
-  _createClass(Wizard, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      var _this2 = this;
+  getChildContext() {
+    return {
+      activeStep: this.state.activeStep,
+      isFirstStep: this.state.isFirstStep,
+      isLastStep: this.state.isLastStep,
 
-      return {
-        activeStep: this.state.activeStep,
-        isFirstStep: this.state.isFirstStep,
-        isLastStep: this.state.isLastStep,
+      /*
+        Called in componentDidMount() lifecycle of Step.js
+        It sets the FIRST_ELEMENT to make the wizard always start at the first registered Step element.
+         Note: The first element to register is implicitly a start_step (as is the last one a finishing_step).
+      */
+      registerStep: (name, validateFunction, autoSkip) => {
+        const FIRST_ELEMENT = 0;
+        this.setState(prevState => ({ ...prevState,
+          activeStep: prevState.steps[FIRST_ELEMENT] || name,
+          activeStepIndex: FIRST_ELEMENT,
+          steps: [...prevState.steps, {
+            name,
+            validator: validateFunction,
+            autoSkip
+          }]
+        }));
+      },
+      // This function finds and updates data in a given step in an immutable fashion
+      updateStep: (name, updatedData) => {
+        const stepIndex = this.state.steps.findIndex(el => el.name === name);
+        this.setState(prevState => ({
+          steps: [...prevState.steps.slice(0, stepIndex), { ...prevState.steps[stepIndex],
+            ...updatedData
+          }, ...prevState.steps.slice(stepIndex + 1)]
+        }));
+      },
 
-        /*
-          Called in componentDidMount() lifecycle of Step.js
-          It sets the FIRST_ELEMENT to make the wizard always start at the first registered Step element.
-           Note: The first element to register is implicitly a start_step (as is the last one a finishing_step).
-        */
-        registerStep: function registerStep(name, validateFunction, autoSkip) {
-          var FIRST_ELEMENT = 0;
+      /*
+        Main usage: Used by Controls.js when clicking either next or previous button.
+        Secondary: Called from Step.js if autoSkip prop is true. This is why we store the direction
+         // TODO: Direction should probably be renamed. Can be of type <'' | 'next' | 'previous' | 'complete'>
+      */
+      changeStep: async newDirection => {
+        const {
+          activeStep,
+          stepData,
+          steps,
+          direction,
+          activeStepIndex
+        } = this.state;
+        const {
+          onStepChange
+        } = this.props;
 
-          _this2.setState(function (prevState) {
-            return _objectSpread({}, prevState, {
-              activeStep: prevState.steps[FIRST_ELEMENT] || name,
-              activeStepIndex: FIRST_ELEMENT,
-              steps: [].concat(_toConsumableArray(prevState.steps), [{
-                name: name,
-                validator: validateFunction,
-                autoSkip: autoSkip
-              }])
-            });
-          });
-        },
-        // This function finds and updates data in a given step in an immutable fashion
-        updateStep: function updateStep(name, updatedData) {
-          var stepIndex = _this2.state.steps.findIndex(function (el) {
-            return el.name === name;
-          });
+        try {
+          if (newDirection === 'next' || newDirection === 'complete') {
+            if (typeof activeStep.validator === 'function') {
+              await activeStep.validator();
+            }
+          }
 
-          _this2.setState(function (prevState) {
-            return {
-              steps: [].concat(_toConsumableArray(prevState.steps.slice(0, stepIndex)), [_objectSpread({}, prevState.steps[stepIndex], updatedData)], _toConsumableArray(prevState.steps.slice(stepIndex + 1)))
-            };
-          });
-        },
+          if (newDirection === 'complete') {
+            this.onComplete();
+          } else {
+            const _direction = newDirection || direction;
 
-        /*
-          Main usage: Used by Controls.js when clicking either next or previous button.
-          Secondary: Called from Step.js if autoSkip prop is true. This is why we store the direction
-           // TODO: Direction should probably be renamed. Can be of type <'' | 'next' | 'previous' | 'complete'>
-        */
-        changeStep: function () {
-          var _changeStep = _asyncToGenerator(
-          /*#__PURE__*/
-          regeneratorRuntime.mark(function _callee(newDirection) {
-            var _this2$state, activeStep, stepData, steps, onStepChange, direction, nextStep, prevStepName, nextStepName;
+            const nextStep = getSafeNext(activeStepIndex, steps, _direction);
+            const prevStepName = activeStep.name;
+            const nextStepName = steps[nextStep].name;
 
-            return regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    _this2$state = _this2.state, activeStep = _this2$state.activeStep, stepData = _this2$state.stepData, steps = _this2$state.steps;
-                    onStepChange = _this2.props.onStepChange;
-                    _context.prev = 2;
+            if (onStepChange && !steps[nextStep].autoSkip) {
+              onStepChange({
+                prevStepName,
+                nextStepIndex: nextStep,
+                nextStepName,
+                numSteps: steps.length,
+                stepData
+              });
+            }
 
-                    if (!(newDirection === 'next' || newDirection === 'complete')) {
-                      _context.next = 7;
-                      break;
-                    }
-
-                    if (!(typeof activeStep.validator === 'function')) {
-                      _context.next = 7;
-                      break;
-                    }
-
-                    _context.next = 7;
-                    return activeStep.validator();
-
-                  case 7:
-                    if (newDirection === 'complete') {
-                      _this2.onComplete();
-                    } else {
-                      direction = newDirection || _this2.state.direction;
-                      nextStep = (0, _utils.getSafeNext)(_this2.state.activeStepIndex, _this2.state.steps, direction);
-                      prevStepName = activeStep.name;
-                      nextStepName = steps[nextStep].name;
-
-                      if (onStepChange && !steps[nextStep].autoSkip) {
-                        onStepChange({
-                          prevStepName: prevStepName,
-                          nextStepIndex: nextStep,
-                          nextStepName: nextStepName,
-                          numSteps: steps.length,
-                          stepData: stepData
-                        });
-                      }
-
-                      _this2.setState({
-                        activeStep: _this2.state.steps[nextStep] || emptyStep,
-                        activeStepIndex: nextStep,
-                        direction: direction,
-                        isFirstStep: nextStep < 1,
-                        isLastStep: nextStep === (0, _utils.findLastValidStepIndex)(_this2.state.steps, nextStep)
-                      }, _this2.stateDebugger);
-                    }
-
-                    _context.next = 13;
-                    break;
-
-                  case 10:
-                    _context.prev = 10;
-                    _context.t0 = _context["catch"](2);
-
-                    if (_this2.props.onError) {
-                      _this2.props.onError(_context.t0);
-                    }
-
-                  case 13:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee, this, [[2, 10]]);
-          }));
-
-          function changeStep(_x) {
-            return _changeStep.apply(this, arguments);
+            this.setState({
+              activeStep: steps[nextStep] || emptyStep,
+              activeStepIndex: nextStep,
+              direction: _direction,
+              isFirstStep: nextStep < 1,
+              isLastStep: nextStep === findLastValidStepIndex(steps, nextStep)
+            }, this.stateDebugger);
           }
+        } catch (error) {
+          if (this.props.onError) {
+            this.props.onError(error);
+          }
+        }
+      }
+    };
+  }
 
-          return changeStep;
-        }()
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.render(this.state.stepData, this.onPartialChange);
-    }
-  }]);
+  render() {
+    return this.props.render(this.state.stepData, this.onPartialChange);
+  }
 
-  return Wizard;
-}(_react.Component);
+}
 
 _defineProperty(Wizard, "defaultProps", {
-  onStepChange: function onStepChange() {}
+  onStepChange: () => {},
+  debug: false,
+  onError: null
 });
 
 Wizard.childContextTypes = {
-  activeStep: _propTypes.default.shape({
-    name: _propTypes.default.string.isRequired,
-    validator: _propTypes.default.func
+  activeStep: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    validator: PropTypes.func
   }).isRequired,
-  changeStep: _propTypes.default.func.isRequired,
-  isFirstStep: _propTypes.default.bool.isRequired,
-  isLastStep: _propTypes.default.bool.isRequired,
-  registerStep: _propTypes.default.func.isRequired,
-  updateStep: _propTypes.default.func.isRequired
+  changeStep: PropTypes.func.isRequired,
+  isFirstStep: PropTypes.bool.isRequired,
+  isLastStep: PropTypes.bool.isRequired,
+  registerStep: PropTypes.func.isRequired,
+  updateStep: PropTypes.func.isRequired
 };
-var _default = Wizard;
-exports.default = _default;
+export default Wizard;

dist-web/index.js

@@ -1,23 +0,370 @@
-Object.defineProperty(exports, "__esModule", {
-  value: true
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+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 _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
+/*
+  Function `findLastValidStepIndex()`
+    Iterates over the n last steps (starting from nextStep index) and returns the last index
+    where autoSkip property is not true.
+*/
+const findLastValidStepIndex = function findLastValidStepIndex(steps) {
+  let startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let last = startIndex;
+  steps.slice(startIndex).forEach((el, index) => {
+    if (!el.autoSkip) {
+      last = startIndex + index;
+    }
+  });
+  return last;
+};
+const getSafeNext = (currentIndex, steps, direction) => {
+  const numberOfSteps = steps.length;
+  const nextStep = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
+
+  if (nextStep < 0) {
+    return 0;
+  }
+
+  const lastValidStep = findLastValidStepIndex(steps);
+
+  if (lastValidStep < nextStep) {
+    return lastValidStep;
+  }
+
+  if (nextStep >= numberOfSteps) {
+    return numberOfSteps - 1;
+  }
+
+  return nextStep;
+};
+
+function _defineProperty$1(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;
+}
+const emptyStep = {
+  name: '',
+  validator: () => '',
+  autoSkip: null
+};
+
+class Wizard extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty$1(this, "state", {
+      activeStep: emptyStep,
+      activeStepIndex: 0,
+      direction: null,
+      isFirstStep: true,
+      isLastStep: false,
+      steps: [],
+      stepData: {}
+    });
+
+    _defineProperty$1(this, "stateDebugger", () => {
+      if (this.props.debug) {
+        console.debug('WIZARD STATE UPDATED', this.state); // eslint-disable-line
+      }
+    });
+
+    _defineProperty$1(this, "onPartialChange", name => data => {
+      const newStepData = data !== 'undefined' ? {
+        [name]: data
+      } : {};
+      this.setState(prevState => _objectSpread({}, prevState, {
+        stepData: _objectSpread({}, prevState.stepData, newStepData)
+      }), this.stateDebugger);
+    });
+
+    _defineProperty$1(this, "onComplete", () => {
+      this.props.onComplete(this.state.stepData, this.state.activeStep.name);
+    });
+  }
+
+  getChildContext() {
+    return {
+      activeStep: this.state.activeStep,
+      isFirstStep: this.state.isFirstStep,
+      isLastStep: this.state.isLastStep,
+
+      /*
+        Called in componentDidMount() lifecycle of Step.js
+        It sets the FIRST_ELEMENT to make the wizard always start at the first registered Step element.
+         Note: The first element to register is implicitly a start_step (as is the last one a finishing_step).
+      */
+      registerStep: (name, validateFunction, autoSkip) => {
+        const FIRST_ELEMENT = 0;
+        this.setState(prevState => _objectSpread({}, prevState, {
+          activeStep: prevState.steps[FIRST_ELEMENT] || name,
+          activeStepIndex: FIRST_ELEMENT,
+          steps: [...prevState.steps, {
+            name,
+            validator: validateFunction,
+            autoSkip
+          }]
+        }));
+      },
+      // This function finds and updates data in a given step in an immutable fashion
+      updateStep: (name, updatedData) => {
+        const stepIndex = this.state.steps.findIndex(el => el.name === name);
+        this.setState(prevState => ({
+          steps: [...prevState.steps.slice(0, stepIndex), _objectSpread({}, prevState.steps[stepIndex], updatedData), ...prevState.steps.slice(stepIndex + 1)]
+        }));
+      },
+
+      /*
+        Main usage: Used by Controls.js when clicking either next or previous button.
+        Secondary: Called from Step.js if autoSkip prop is true. This is why we store the direction
+         // TODO: Direction should probably be renamed. Can be of type <'' | 'next' | 'previous' | 'complete'>
+      */
+      changeStep: async newDirection => {
+        const _this$state = this.state,
+              activeStep = _this$state.activeStep,
+              stepData = _this$state.stepData,
+              steps = _this$state.steps,
+              direction = _this$state.direction,
+              activeStepIndex = _this$state.activeStepIndex;
+        const onStepChange = this.props.onStepChange;
+
+        try {
+          if (newDirection === 'next' || newDirection === 'complete') {
+            if (typeof activeStep.validator === 'function') {
+              await activeStep.validator();
+            }
+          }
+
+          if (newDirection === 'complete') {
+            this.onComplete();
+          } else {
+            const _direction = newDirection || direction;
+
+            const nextStep = getSafeNext(activeStepIndex, steps, _direction);
+            const prevStepName = activeStep.name;
+            const nextStepName = steps[nextStep].name;
+
+            if (onStepChange && !steps[nextStep].autoSkip) {
+              onStepChange({
+                prevStepName,
+                nextStepIndex: nextStep,
+                nextStepName,
+                numSteps: steps.length,
+                stepData
+              });
+            }
+
+            this.setState({
+              activeStep: steps[nextStep] || emptyStep,
+              activeStepIndex: nextStep,
+              direction: _direction,
+              isFirstStep: nextStep < 1,
+              isLastStep: nextStep === findLastValidStepIndex(steps, nextStep)
+            }, this.stateDebugger);
+          }
+        } catch (error) {
+          if (this.props.onError) {
+            this.props.onError(error);
+          }
+        }
+      }
+    };
+  }
+
+  render() {
+    return this.props.render(this.state.stepData, this.onPartialChange);
+  }
+
+}
+
+_defineProperty$1(Wizard, "defaultProps", {
+  onStepChange: () => {},
+  debug: false,
+  onError: null
 });
-exports.default = void 0;
 
-var _Wizard = _interopRequireDefault(require("./Wizard.js"));
+Wizard.childContextTypes = {
+  activeStep: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    validator: PropTypes.func
+  }).isRequired,
+  changeStep: PropTypes.func.isRequired,
+  isFirstStep: PropTypes.bool.isRequired,
+  isLastStep: PropTypes.bool.isRequired,
+  registerStep: PropTypes.func.isRequired,
+  updateStep: PropTypes.func.isRequired
+};
 
-var _Step = _interopRequireDefault(require("./Step.js"));
+function _defineProperty$2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-var _Controls = _interopRequireDefault(require("./Controls.js"));
+  return obj;
+}
+/*
+ This component accepts a name acts as a context provider between Wizard and it's children.
+ It register itself on mount and accepts a validator prop. This can be used by the wizard to 
+ validate if it's cool to advance to the next step.
+*/
 
-function _interopRequireDefault(obj) {
-  return obj && obj.__esModule ? obj : {
-    default: obj
-  };
+class Step extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty$2(this, "context", void 0);
+  }
+
+  componentDidMount() {
+    this.context.registerStep(this.props.name, this.props.validator, this.props.autoSkip);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextContext.activeStep.name === this.props.name && this.props.autoSkip) {
+      this.context.changeStep();
+    }
+
+    if (nextProps.autoSkip !== this.props.autoSkip) {
+      // autoskip has changed. Lets notify the wizard
+      this.context.updateStep(this.props.name, {
+        autoSkip: nextProps.autoSkip
+      });
+    }
+  }
+
+  render() {
+    if (this.context.activeStep.name === this.props.name) {
+      return this.props.children;
+    }
+
+    return null;
+  }
+
 }
 
-var _default = {
-  Wizard: _Wizard.default,
-  Step: _Step.default,
-  Controls: _Controls.default
+_defineProperty$2(Step, "defaultProps", {
+  autoSkip: false,
+  validator: null
+});
+
+Step.contextTypes = {
+  activeStep: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    validator: PropTypes.func
+  }).isRequired,
+  changeStep: PropTypes.func.isRequired,
+  registerStep: PropTypes.func.isRequired,
+  updateStep: PropTypes.func.isRequired
 };
-exports.default = _default;
+
+function _defineProperty$3(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;
+}
+
+class Controls extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty$3(this, "context", void 0);
+
+    _defineProperty$3(this, "changeStep", direction => {
+      this.context.changeStep(direction);
+    });
+
+    _defineProperty$3(this, "onNext", () => {
+      if (this.context.isLastStep) {
+        this.context.changeStep('complete');
+      } else {
+        this.context.changeStep('next');
+      }
+    });
+
+    _defineProperty$3(this, "onPrevious", () => {
+      if (!this.context.isFirstStep) {
+        this.context.changeStep('previous');
+      }
+    });
+  }
+
+  render() {
+    const _this$context = this.context,
+          isFirstStep = _this$context.isFirstStep,
+          isLastStep = _this$context.isLastStep;
+    return this.props.render(this.onNext, this.onPrevious, isFirstStep, isLastStep);
+  }
+
+}
+
+Controls.contextTypes = {
+  changeStep: PropTypes.func.isRequired,
+  isFirstStep: PropTypes.bool.isRequired,
+  isLastStep: PropTypes.bool.isRequired
+};
+
+var index = {
+  Wizard,
+  Step,
+  Controls
+};
+
+export default index;

package.json

 {
   "name": "react-losen",
   "description": "A super customisable Wizard for React and React Native",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "license": "MIT",
   "esnext": "dist-src/index.js",
   "module": "dist-web/index.js",
+  "umd:main": "dist-umd/index.js",
   "pika": true,
@@ -20,6 +21,4 @@ "sideEffects": false,
   "dependencies": {
-    "loglevel": "^1.6.1",
     "prop-types": "^15.7.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "^16.8.1"
   },
@@ -32,2 +31,3 @@ "devDependencies": {
     "@pika/pack": "^0.3.2",
+    "@pika/plugin-build-umd": "^0.3.11",
     "@pika/plugin-build-web": "^0.3.11",
@@ -34,0 +34,0 @@ "@pika/plugin-standard-pkg": "^0.3.11",

README.md

@@ -10,4 +10,8 @@ ---
 
-> A brutallty simple wizard for React and React Native. Note: This module is under active development and not ready for release yet.
+> A brutallty simple wizard for React and React Native.
 
+*Note:* This module _works_, but we got some nice changes coming out soon:
+  - Async step validation
+  - Upgrade to new React Context API
+
 ## Install
@@ -14,0 +18,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45069

increased by50.84%

Dependency count

2

decreased by-50%

Number of package files

10

increased by11.11%

Lines of code

1119

increased by156.65%

Number of lines in readme file

105

increased by3.96%

Worsened metrics

Dev dependency count

25

increased by4.17%

Dependency changes

• - Removedloglevel@^1.6.1

• - Removedreact-dom@^16.8.1

• - Removedloglevel@1.9.2(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)