Socket
Socket
Sign inDemoInstall

react-losen

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-losen - npm Package Compare versions

Comparing version 1.0.3 to 1.1.1

dist-umd/index.js

102

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;

29

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
};

122

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;

29

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;
};

351

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;

377

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;

8

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",

6

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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc