Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-losen

Package Overview
Dependencies
Maintainers
4
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.1.2 to 2.0.0-0

dist-src/utils.test.js

27

dist-src/index.js

@@ -1,4 +0,23 @@

import Wizard from "./Wizard.js";
import Step from "./Step.js";
import Controls from "./Controls.js";
export { Wizard, Step, Controls };
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Wizard", {
enumerable: true,
get: function get() {
return _Wizard["default"];
}
});
Object.defineProperty(exports, "Step", {
enumerable: true,
get: function get() {
return _Step["default"];
}
});
var _Wizard = _interopRequireDefault(require("./Wizard.js"));
var _Step = _interopRequireDefault(require("./Step.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

2

dist-src/index.min.js

@@ -1,2 +0,2 @@

import Wizard from"./Wizard.js";import Step from"./Step.js";import Controls from"./Controls.js";export{Wizard,Step,Controls};
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Wizard",{enumerable:!0,get:function(){return _Wizard.default}}),Object.defineProperty(exports,"Step",{enumerable:!0,get:function(){return _Step.default}});var _Wizard=_interopRequireDefault(require("./Wizard.js")),_Step=_interopRequireDefault(require("./Step.js"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
//# sourceMappingURL=index.min.js.map

83

dist-src/Step.js

@@ -1,59 +0,52 @@

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; }
"use strict";
import * as React from 'react';
import PropTypes from 'prop-types';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
/*
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.
*/
class Step extends React.Component {
constructor(...args) {
super(...args);
var _react = require("react");
_defineProperty(this, "context", void 0);
}
var _Wizard = require("./Wizard.js");
componentDidMount() {
this.context.registerStep(this.props.name, this.props.validator, this.props.autoSkip);
}
var Step = function Step(_ref) {
var children = _ref.children,
name = _ref.name,
validator = _ref.validator,
autoSkip = _ref.autoSkip;
componentWillReceiveProps(nextProps, nextContext) {
if (nextContext.activeStep.name === this.props.name && this.props.autoSkip) {
this.context.changeStep();
}
var _useStepContext = (0, _Wizard.useStepContext)(),
registerStep = _useStepContext.registerStep,
activeStep = _useStepContext.activeStep,
updateStep = _useStepContext.updateStep,
initialized = _useStepContext.initialized;
if (nextProps.autoSkip !== this.props.autoSkip) {
// autoskip has changed. Lets notify the wizard
this.context.updateStep(this.props.name, {
autoSkip: nextProps.autoSkip
});
var stepInfo = {
name: name,
validator: validator,
autoSkip: autoSkip
};
(0, _react.useEffect)(function () {
if (!initialized) {
registerStep(stepInfo);
}
}
render() {
if (this.context.activeStep.name === this.props.name) {
return this.props.children;
}, [name]);
(0, _react.useEffect)(function () {
if (initialized) {
updateStep(stepInfo);
}
}, [autoSkip, validator]);
if (activeStep.name !== name) {
return null;
}
}
return children;
};
_defineProperty(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
Step.defaultProps = {
validator: null,
autoSkip: false
};
export default Step;
var _default = Step;
exports["default"] = _default;

55

dist-src/utils.js

@@ -1,34 +0,31 @@

/*
Function `findLastValidStepIndex()`
Iterates over the n last steps (starting from nextStep index) and returns the last index
where autoSkip property is not true.
*/
export const findLastValidStepIndex = (steps, startIndex = 0) => {
let last = startIndex;
steps.slice(startIndex).forEach((el, index) => {
if (!el.autoSkip) {
last = startIndex + index;
}
});
return last;
};
export const getSafeNext = (currentIndex, steps, direction) => {
const numberOfSteps = steps.length;
const nextStep = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
"use strict";
if (nextStep < 0) {
return 0;
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.findNextValid = findNextValid;
exports.findPreviousValid = findPreviousValid;
const lastValidStep = findLastValidStepIndex(steps);
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
if (lastValidStep < nextStep) {
return lastValidStep;
}
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
if (nextStep >= numberOfSteps) {
return numberOfSteps - 1;
}
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
return nextStep;
};
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; } }
// flow
function findNextValid(steps, currentIndex) {
var nextValid = currentIndex + steps.slice(currentIndex + 1).findIndex(function (el) {
return !el.autoSkip;
});
return steps.length > nextValid ? nextValid + 1 : nextValid;
}
function findPreviousValid(steps, currentIndex) {
var previousValid = _toConsumableArray(steps).reverse().slice(steps.length - currentIndex).findIndex(function (el) {
return !el.autoSkip;
});
return currentIndex - 1 - previousValid;
}

347

dist-src/Wizard.js

@@ -1,164 +0,229 @@

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; }
"use strict";
import { Component } from 'react';
import PropTypes from 'prop-types';
import { getSafeNext, findLastValidStepIndex } from "./utils.js";
const emptyStep = {
name: '',
validator: () => '',
autoSkip: null
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useStepContext = useStepContext;
exports.useControlsContext = useControlsContext;
exports["default"] = exports.ControlsContext = exports.StepContext = exports.ValidationError = void 0;
class Wizard extends Component {
constructor(...args) {
super(...args);
var _react = _interopRequireWildcard(require("react"));
_defineProperty(this, "state", {
activeStep: emptyStep,
activeStepIndex: 0,
direction: null,
isFirstStep: true,
isLastStep: false,
steps: [],
stepData: {}
});
var _utils = require("./utils.js");
_defineProperty(this, "stateDebugger", () => {
if (this.props.debug) {
console.debug('WIZARD STATE UPDATED', this.state); // eslint-disable-line
}
});
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; } }
_defineProperty(this, "onPartialChange", name => data => {
const newStepData = data !== 'undefined' ? {
[name]: data
} : {};
this.setState(prevState => ({ ...prevState,
stepData: { ...prevState.stepData,
...newStepData
}
}), this.stateDebugger);
});
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); }
_defineProperty(this, "onComplete", () => {
this.props.onComplete(this.state.stepData, this.state.activeStep.name);
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
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 _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
function isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _construct(Parent, args, Class) { if (isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var ValidationError =
/*#__PURE__*/
function (_Error) {
_inherits(ValidationError, _Error);
function ValidationError() {
_classCallCheck(this, ValidationError);
return _possibleConstructorReturn(this, _getPrototypeOf(ValidationError).apply(this, arguments));
}
return ValidationError;
}(_wrapNativeSuper(Error));
exports.ValidationError = ValidationError;
var StepContext = (0, _react.createContext)(null);
exports.StepContext = StepContext;
var ControlsContext = (0, _react.createContext)(null);
exports.ControlsContext = ControlsContext;
function useStepContext() {
return (0, _react.useContext)(StepContext);
}
function useControlsContext() {
return (0, _react.useContext)(ControlsContext);
}
var Wizard = function Wizard(_ref) {
var children = _ref.children,
onComplete = _ref.onComplete;
var _useState = (0, _react.useState)(0),
_useState2 = _slicedToArray(_useState, 2),
index = _useState2[0],
setIndex = _useState2[1];
var _useState3 = (0, _react.useState)([]),
_useState4 = _slicedToArray(_useState3, 2),
steps = _useState4[0],
setSteps = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
isLoading = _useState6[0],
setLoadingState = _useState6[1];
function registerStep(step) {
var alreadyRegistered = steps.map(function (el) {
return el.name;
}).includes(step.name);
if (!alreadyRegistered) {
setSteps(function (prevSteps) {
return [].concat(_toConsumableArray(prevSteps), [step]);
});
}
}
function updateStep(step) {
var stepIndex = steps.findIndex(function (el) {
return el.name === step.name;
});
setSteps(function (prevSteps) {
return [].concat(_toConsumableArray(prevSteps.slice(0, stepIndex)), [step], _toConsumableArray(prevSteps.slice(stepIndex + 1)));
});
}
getChildContext() {
return {
activeStep: this.state.activeStep,
isFirstStep: this.state.isFirstStep,
isLastStep: this.state.isLastStep,
function onNext() {
return _onNext.apply(this, arguments);
}
/*
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)]
}));
},
function _onNext() {
_onNext = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
var validator, next, nextAction;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
validator = steps[index].validator;
next = (0, _utils.findNextValid)(steps, index);
nextAction = (0, _utils.findNextValid)(steps, index) === index ? function () {
return onComplete(steps[index].name);
} : function () {
return setIndex(next);
};
/*
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;
if (!validator) {
_context.next = 23;
break;
}
try {
if (newDirection === 'next' || newDirection === 'complete') {
if (typeof activeStep.validator === 'function') {
await activeStep.validator();
}
}
_context.prev = 4;
setLoadingState(true);
_context.next = 8;
return new Promise(validator);
if (newDirection === 'complete') {
this.onComplete();
} else {
const _direction = newDirection || direction;
case 8:
nextAction();
_context.next = 18;
break;
const nextStep = getSafeNext(activeStepIndex, steps, _direction);
const prevStepName = activeStep.name;
const nextStepName = steps[nextStep].name;
case 11:
_context.prev = 11;
_context.t0 = _context["catch"](4);
if (onStepChange && !steps[nextStep].autoSkip) {
onStepChange({
prevStepName,
nextStepIndex: nextStep,
nextStepName,
numSteps: steps.length,
stepData
});
}
if (!(_context.t0 instanceof ValidationError)) {
_context.next = 17;
break;
}
this.setState({
activeStep: steps[nextStep] || emptyStep,
activeStepIndex: nextStep,
direction: _direction,
isFirstStep: nextStep < 1,
isLastStep: nextStep === findLastValidStepIndex(steps, nextStep)
}, this.stateDebugger);
console.error('ReactLosen', _context.t0); // eslint-disable-line
_context.next = 18;
break;
case 17:
throw _context.t0;
case 18:
_context.prev = 18;
setLoadingState(false);
return _context.finish(18);
case 21:
_context.next = 24;
break;
case 23:
nextAction();
case 24:
case "end":
return _context.stop();
}
} catch (error) {
if (this.props.onError) {
this.props.onError(error);
}
}
}
};
}, _callee, null, [[4, 11, 18, 21]]);
}));
return _onNext.apply(this, arguments);
}
render() {
return this.props.render(this.state.stepData, this.onPartialChange);
function onPrevious() {
var prev = (0, _utils.findPreviousValid)(steps, index);
setIndex(prev);
}
}
(0, _react.useEffect)(function () {
// for debugging purposes only
console.debug('steps updated', steps); // eslint-disable-line
}, [steps]);
return _react["default"].createElement(ControlsContext.Provider, {
value: {
onNext: onNext,
onPrevious: onPrevious,
isLoading: isLoading,
isFirst: (0, _utils.findPreviousValid)(steps, index) === index,
isLast: (0, _utils.findNextValid)(steps, index) === index
}
}, _react["default"].createElement(StepContext.Provider, {
value: {
registerStep: registerStep,
activeStep: steps[index] || {},
initialized: !!steps[index],
updateStep: updateStep
}
}, children));
};
_defineProperty(Wizard, "defaultProps", {
onStepChange: () => {},
debug: false,
onError: null
});
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
};
export default Wizard;
var _default = Wizard;
exports["default"] = _default;

680

dist-umd/index.js

@@ -1,670 +0,32 @@

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
(global = global || self, factory(global.reactLosen = {}, global.React, global.PropTypes));
}(this, function (exports, React, PropTypes) { 'use strict';
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}(function () { 'use strict';
PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Wizard", {
enumerable: true,
get: function get() {
return _Wizard["default"];
}
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 _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 _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 _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 _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _newArrowCheck(innerThis, boundThis) {
if (innerThis !== boundThis) {
throw new TypeError("Cannot instantiate an arrow function");
}
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
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 _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var _this = undefined;
/*
Function `findLastValidStepIndex()`
Iterates over the n last steps (starting from nextStep index) and returns the last index
where autoSkip property is not true.
*/
var findLastValidStepIndex = function findLastValidStepIndex(steps) {
var _this2 = this;
var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
_newArrowCheck(this, _this);
var last = startIndex;
steps.slice(startIndex).forEach(function (el, index) {
_newArrowCheck(this, _this2);
if (!el.autoSkip) {
last = startIndex + index;
}
}.bind(this));
return last;
}.bind(undefined);
var getSafeNext = function getSafeNext(currentIndex, steps, direction) {
_newArrowCheck(this, _this);
var numberOfSteps = steps.length;
var nextStep = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
if (nextStep < 0) {
return 0;
}
var lastValidStep = findLastValidStepIndex(steps);
if (lastValidStep < nextStep) {
return lastValidStep;
}
if (nextStep >= numberOfSteps) {
return numberOfSteps - 1;
}
return nextStep;
}.bind(undefined);
var _this$1 = undefined;
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;
}
var emptyStep = {
name: '',
validator: function validator() {
_newArrowCheck(this, _this$1);
return '';
}.bind(undefined),
autoSkip: null
};
var Wizard =
/*#__PURE__*/
function (_Component) {
_inherits(Wizard, _Component);
function Wizard() {
var _getPrototypeOf2,
_this3 = this;
var _this2;
_classCallCheck(this, Wizard);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Wizard)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty$1(_assertThisInitialized(_this2), "state", {
activeStep: emptyStep,
activeStepIndex: 0,
direction: null,
isFirstStep: true,
isLastStep: false,
steps: [],
stepData: {}
});
_defineProperty$1(_assertThisInitialized(_this2), "stateDebugger", function () {
_newArrowCheck(this, _this3);
if (_this2.props.debug) {
console.debug('WIZARD STATE UPDATED', _this2.state); // eslint-disable-line
}
}.bind(this));
_defineProperty$1(_assertThisInitialized(_this2), "onPartialChange", function (name) {
var _this4 = this;
_newArrowCheck(this, _this3);
return function (data) {
var _this5 = this;
_newArrowCheck(this, _this4);
var newStepData = data !== 'undefined' ? _defineProperty({}, name, data) : {};
_this2.setState(function (prevState) {
_newArrowCheck(this, _this5);
return _objectSpread({}, prevState, {
stepData: _objectSpread({}, prevState.stepData, newStepData)
});
}.bind(this), _this2.stateDebugger);
}.bind(this);
}.bind(this));
_defineProperty$1(_assertThisInitialized(_this2), "onComplete", function () {
_newArrowCheck(this, _this3);
_this2.props.onComplete(_this2.state.stepData, _this2.state.activeStep.name);
}.bind(this));
return _this2;
}
_createClass(Wizard, [{
key: "getChildContext",
value: function getChildContext() {
var _this6 = this;
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: function registerStep(name, validateFunction, autoSkip) {
var _this7 = this;
_newArrowCheck(this, _this6);
var FIRST_ELEMENT = 0;
this.setState(function (prevState) {
_newArrowCheck(this, _this7);
return _objectSpread({}, prevState, {
activeStep: prevState.steps[FIRST_ELEMENT] || name,
activeStepIndex: FIRST_ELEMENT,
steps: [].concat(_toConsumableArray(prevState.steps), [{
name: name,
validator: validateFunction,
autoSkip: autoSkip
}])
});
}.bind(this));
}.bind(this),
// This function finds and updates data in a given step in an immutable fashion
updateStep: function updateStep(name, updatedData) {
var _this8 = this;
_newArrowCheck(this, _this6);
var stepIndex = this.state.steps.findIndex(function (el) {
_newArrowCheck(this, _this8);
return el.name === name;
}.bind(this));
this.setState(function (prevState) {
_newArrowCheck(this, _this8);
return {
steps: [].concat(_toConsumableArray(prevState.steps.slice(0, stepIndex)), [_objectSpread({}, prevState.steps[stepIndex], updatedData)], _toConsumableArray(prevState.steps.slice(stepIndex + 1)))
};
}.bind(this));
}.bind(this),
/*
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:
/*#__PURE__*/
function () {
var _changeStep = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(newDirection) {
var _this$state, activeStep, stepData, steps, direction, activeStepIndex, onStepChange, _direction, nextStep, prevStepName, nextStepName;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_newArrowCheck(this, _this6);
_this$state = this.state, activeStep = _this$state.activeStep, stepData = _this$state.stepData, steps = _this$state.steps, direction = _this$state.direction, activeStepIndex = _this$state.activeStepIndex;
onStepChange = this.props.onStepChange;
_context.prev = 3;
if (!(newDirection === 'next' || newDirection === 'complete')) {
_context.next = 8;
break;
}
if (!(typeof activeStep.validator === 'function')) {
_context.next = 8;
break;
}
_context.next = 8;
return activeStep.validator();
case 8:
if (newDirection === 'complete') {
this.onComplete();
} else {
_direction = newDirection || direction;
nextStep = getSafeNext(activeStepIndex, 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
});
}
this.setState({
activeStep: steps[nextStep] || emptyStep,
activeStepIndex: nextStep,
direction: _direction,
isFirstStep: nextStep < 1,
isLastStep: nextStep === findLastValidStepIndex(steps, nextStep)
}, this.stateDebugger);
}
_context.next = 14;
break;
case 11:
_context.prev = 11;
_context.t0 = _context["catch"](3);
if (this.props.onError) {
this.props.onError(_context.t0);
}
case 14:
case "end":
return _context.stop();
}
}
}, _callee, this, [[3, 11]]);
}));
function changeStep(_x) {
return _changeStep.apply(this, arguments);
}
return changeStep;
}().bind(this)
};
}
}, {
key: "render",
value: function render() {
return this.props.render(this.state.stepData, this.onPartialChange);
}
}]);
return Wizard;
}(React.Component);
_defineProperty$1(Wizard, "defaultProps", {
onStepChange: function onStepChange() {
_newArrowCheck(this, _this$1);
}.bind(undefined),
debug: false,
onError: null
});
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
};
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;
Object.defineProperty(exports, "Step", {
enumerable: true,
get: function get() {
return _Step["default"];
}
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.
*/
var Step =
/*#__PURE__*/
function (_React$Component) {
_inherits(Step, _React$Component);
function Step() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, Step);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Step)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty$2(_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);
}
}, {
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 Step;
}(React.Component);
_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
};
var _Wizard = _interopRequireDefault(require("./Wizard.js"));
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;
}
var _Step = _interopRequireDefault(require("./Step.js"));
return obj;
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
var Controls =
/*#__PURE__*/
function (_Component) {
_inherits(Controls, _Component);
function Controls() {
var _getPrototypeOf2,
_this2 = this;
var _this;
_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$3(_assertThisInitialized(_this), "context", void 0);
_defineProperty$3(_assertThisInitialized(_this), "changeStep", function (direction) {
_newArrowCheck(this, _this2);
_this.context.changeStep(direction);
}.bind(this));
_defineProperty$3(_assertThisInitialized(_this), "onNext", function () {
_newArrowCheck(this, _this2);
if (_this.context.isLastStep) {
_this.context.changeStep('complete');
} else {
_this.context.changeStep('next');
}
}.bind(this));
_defineProperty$3(_assertThisInitialized(_this), "onPrevious", function () {
_newArrowCheck(this, _this2);
if (!_this.context.isFirstStep) {
_this.context.changeStep('previous');
}
}.bind(this));
return _this;
}
_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.func.isRequired,
isFirstStep: PropTypes.bool.isRequired,
isLastStep: PropTypes.bool.isRequired
};
exports.Wizard = Wizard;
exports.Step = Step;
exports.Controls = Controls;
Object.defineProperty(exports, '__esModule', { value: true });
}));

2

dist-umd/index.min.js

@@ -1,2 +0,2 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],e):e((t=t||self).reactLosen={},t.React,t.PropTypes)}(this,function(t,e,n){"use strict";function i(t,e,n,i,r,o,s){try{var a=t[o](s),u=a.value}catch(t){return void n(t)}a.done?e(u):Promise.resolve(u).then(i,r)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function s(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function u(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){a(t,e,n[e])})}return t}function p(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&f(t,e)}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function h(t,e){if(t!==e)throw new TypeError("Cannot instantiate an arrow function")}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function d(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?l(t):e}function v(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}n=n&&n.hasOwnProperty("default")?n.default:n;var b=function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;h(this,void 0);var i=n;return t.slice(n).forEach(function(t,r){h(this,e),t.autoSkip||(i=n+r)}.bind(this)),i}.bind(void 0),S=function(t,e,n){h(this,void 0);var i=e.length,r="previous"===n?t-1:t+1;if(r<0)return 0;var o=b(e);return o<r?o:r>=i?i-1:r}.bind(void 0);function y(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var g={name:"",validator:function(){return h(this,void 0),""}.bind(void 0),autoSkip:null},m=function(t){function n(){var t,e,i=this;r(this,n);for(var o=arguments.length,s=new Array(o),p=0;p<o;p++)s[p]=arguments[p];return y(l(e=d(this,(t=c(n)).call.apply(t,[this].concat(s)))),"state",{activeStep:g,activeStepIndex:0,direction:null,isFirstStep:!0,isLastStep:!1,steps:[],stepData:{}}),y(l(e),"stateDebugger",function(){h(this,i),e.props.debug&&console.debug("WIZARD STATE UPDATED",e.state)}.bind(this)),y(l(e),"onPartialChange",function(t){var n=this;return h(this,i),function(i){var r=this;h(this,n);var o="undefined"!==i?a({},t,i):{};e.setState(function(t){return h(this,r),u({},t,{stepData:u({},t.stepData,o)})}.bind(this),e.stateDebugger)}.bind(this)}.bind(this)),y(l(e),"onComplete",function(){h(this,i),e.props.onComplete(e.state.stepData,e.state.activeStep.name)}.bind(this)),e}return p(n,e.Component),s(n,[{key:"getChildContext",value:function(){var t=this;return{activeStep:this.state.activeStep,isFirstStep:this.state.isFirstStep,isLastStep:this.state.isLastStep,registerStep:function(e,n,i){var r=this;h(this,t);this.setState(function(t){return h(this,r),u({},t,{activeStep:t.steps[0]||e,activeStepIndex:0,steps:[].concat(v(t.steps),[{name:e,validator:n,autoSkip:i}])})}.bind(this))}.bind(this),updateStep:function(e,n){var i=this;h(this,t);var r=this.state.steps.findIndex(function(t){return h(this,i),t.name===e}.bind(this));this.setState(function(t){return h(this,i),{steps:[].concat(v(t.steps.slice(0,r)),[u({},t.steps[r],n)],v(t.steps.slice(r+1)))}}.bind(this))}.bind(this),changeStep:function(){var e,n=(e=regeneratorRuntime.mark(function e(n){var i,r,o,s,a,u,p,c,f,l,d;return regeneratorRuntime.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(h(this,t),i=this.state,r=i.activeStep,o=i.stepData,s=i.steps,a=i.direction,u=i.activeStepIndex,p=this.props.onStepChange,e.prev=3,"next"!==n&&"complete"!==n){e.next=8;break}if("function"!=typeof r.validator){e.next=8;break}return e.next=8,r.validator();case 8:"complete"===n?this.onComplete():(f=S(u,s,c=n||a),l=r.name,d=s[f].name,p&&!s[f].autoSkip&&p({prevStepName:l,nextStepIndex:f,nextStepName:d,numSteps:s.length,stepData:o}),this.setState({activeStep:s[f]||g,activeStepIndex:f,direction:c,isFirstStep:f<1,isLastStep:f===b(s,f)},this.stateDebugger)),e.next=14;break;case 11:e.prev=11,e.t0=e.catch(3),this.props.onError&&this.props.onError(e.t0);case 14:case"end":return e.stop()}},e,this,[[3,11]])}),function(){var t=this,n=arguments;return new Promise(function(r,o){var s=e.apply(t,n);function a(t){i(s,r,o,a,u,"next",t)}function u(t){i(s,r,o,a,u,"throw",t)}a(void 0)})});return function(t){return n.apply(this,arguments)}}().bind(this)}}},{key:"render",value:function(){return this.props.render(this.state.stepData,this.onPartialChange)}}]),n}();function x(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}y(m,"defaultProps",{onStepChange:function(){h(this,void 0)}.bind(void 0),debug:!1,onError:null}),m.childContextTypes={activeStep:n.shape({name:n.string.isRequired,validator:n.func}).isRequired,changeStep:n.func.isRequired,isFirstStep:n.bool.isRequired,isLastStep:n.bool.isRequired,registerStep:n.func.isRequired,updateStep:n.func.isRequired};var w=function(t){function n(){var t,e;r(this,n);for(var i=arguments.length,o=new Array(i),s=0;s<i;s++)o[s]=arguments[s];return x(l(e=d(this,(t=c(n)).call.apply(t,[this].concat(o)))),"context",void 0),e}return p(n,e.Component),s(n,[{key:"componentDidMount",value:function(){this.context.registerStep(this.props.name,this.props.validator,this.props.autoSkip)}},{key:"componentWillReceiveProps",value:function(t,e){e.activeStep.name===this.props.name&&this.props.autoSkip&&this.context.changeStep(),t.autoSkip!==this.props.autoSkip&&this.context.updateStep(this.props.name,{autoSkip:t.autoSkip})}},{key:"render",value:function(){return this.context.activeStep.name===this.props.name?this.props.children:null}}]),n}();function O(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}x(w,"defaultProps",{autoSkip:!1,validator:null}),w.contextTypes={activeStep:n.shape({name:n.string.isRequired,validator:n.func}).isRequired,changeStep:n.func.isRequired,registerStep:n.func.isRequired,updateStep:n.func.isRequired};var P=function(t){function n(){var t,e,i=this;r(this,n);for(var o=arguments.length,s=new Array(o),a=0;a<o;a++)s[a]=arguments[a];return O(l(e=d(this,(t=c(n)).call.apply(t,[this].concat(s)))),"context",void 0),O(l(e),"changeStep",function(t){h(this,i),e.context.changeStep(t)}.bind(this)),O(l(e),"onNext",function(){h(this,i),e.context.isLastStep?e.context.changeStep("complete"):e.context.changeStep("next")}.bind(this)),O(l(e),"onPrevious",function(){h(this,i),e.context.isFirstStep||e.context.changeStep("previous")}.bind(this)),e}return p(n,e.Component),s(n,[{key:"render",value:function(){var t=this.context,e=t.isFirstStep,n=t.isLastStep;return this.props.render(this.onNext,this.onPrevious,e,n)}}]),n}();P.contextTypes={changeStep:n.func.isRequired,isFirstStep:n.bool.isRequired,isLastStep:n.bool.isRequired},t.Wizard=m,t.Step=w,t.Controls=P,Object.defineProperty(t,"__esModule",{value:!0})});
!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Wizard",{enumerable:!0,get:function(){return e.default}}),Object.defineProperty(exports,"Step",{enumerable:!0,get:function(){return t.default}});var e=r(require("./Wizard.js")),t=r(require("./Step.js"));function r(e){return e&&e.__esModule?e:{default:e}}});
//# sourceMappingURL=index.min.js.map

373

dist-web/index.js

@@ -1,364 +0,25 @@

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;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Wizard", {
enumerable: true,
get: function get() {
return _Wizard["default"];
}
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
});
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
};
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;
Object.defineProperty(exports, "Step", {
enumerable: true,
get: function get() {
return _Step["default"];
}
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.
*/
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;
}
}
_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
};
var _Wizard = _interopRequireDefault(require("./Wizard.js"));
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;
}
var _Step = _interopRequireDefault(require("./Step.js"));
return obj;
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": 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
};
export { Wizard, Step, Controls };

2

dist-web/index.min.js

@@ -1,2 +0,2 @@

import{Component}from"react";import PropTypes from"prop-types";function _defineProperty(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{},i=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(s).filter(function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable}))),i.forEach(function(t){_defineProperty(e,t,s[t])})}return e}const findLastValidStepIndex=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=t;return e.slice(t).forEach((e,i)=>{e.autoSkip||(s=t+i)}),s},getSafeNext=(e,t,s)=>{const i=t.length,r="previous"===s?e-1:e+1;if(r<0)return 0;const p=findLastValidStepIndex(t);return p<r?p:r>=i?i-1:r};function _defineProperty$1(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}const emptyStep={name:"",validator:()=>"",autoSkip:null};class Wizard extends Component{constructor(){super(...arguments),_defineProperty$1(this,"state",{activeStep:emptyStep,activeStepIndex:0,direction:null,isFirstStep:!0,isLastStep:!1,steps:[],stepData:{}}),_defineProperty$1(this,"stateDebugger",()=>{this.props.debug&&console.debug("WIZARD STATE UPDATED",this.state)}),_defineProperty$1(this,"onPartialChange",e=>t=>{const s="undefined"!==t?{[e]:t}:{};this.setState(e=>_objectSpread({},e,{stepData:_objectSpread({},e.stepData,s)}),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,registerStep:(e,t,s)=>{this.setState(i=>_objectSpread({},i,{activeStep:i.steps[0]||e,activeStepIndex:0,steps:[...i.steps,{name:e,validator:t,autoSkip:s}]}))},updateStep:(e,t)=>{const s=this.state.steps.findIndex(t=>t.name===e);this.setState(e=>({steps:[...e.steps.slice(0,s),_objectSpread({},e.steps[s],t),...e.steps.slice(s+1)]}))},changeStep:async e=>{const t=this.state,s=t.activeStep,i=t.stepData,r=t.steps,p=t.direction,n=t.activeStepIndex,o=this.props.onStepChange;try{if("next"!==e&&"complete"!==e||"function"==typeof s.validator&&await s.validator(),"complete"===e)this.onComplete();else{const t=e||p,a=getSafeNext(n,r,t),c=s.name,u=r[a].name;o&&!r[a].autoSkip&&o({prevStepName:c,nextStepIndex:a,nextStepName:u,numSteps:r.length,stepData:i}),this.setState({activeStep:r[a]||emptyStep,activeStepIndex:a,direction:t,isFirstStep:a<1,isLastStep:a===findLastValidStepIndex(r,a)},this.stateDebugger)}}catch(e){this.props.onError&&this.props.onError(e)}}}}render(){return this.props.render(this.state.stepData,this.onPartialChange)}}function _defineProperty$2(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}_defineProperty$1(Wizard,"defaultProps",{onStepChange:()=>{},debug:!1,onError:null}),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};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(e,t){t.activeStep.name===this.props.name&&this.props.autoSkip&&this.context.changeStep(),e.autoSkip!==this.props.autoSkip&&this.context.updateStep(this.props.name,{autoSkip:e.autoSkip})}render(){return this.context.activeStep.name===this.props.name?this.props.children:null}}function _defineProperty$3(e,t,s){return t in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}_defineProperty$2(Step,"defaultProps",{autoSkip:!1,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};class Controls extends Component{constructor(){super(...arguments),_defineProperty$3(this,"context",void 0),_defineProperty$3(this,"changeStep",e=>{this.context.changeStep(e)}),_defineProperty$3(this,"onNext",()=>{this.context.isLastStep?this.context.changeStep("complete"):this.context.changeStep("next")}),_defineProperty$3(this,"onPrevious",()=>{this.context.isFirstStep||this.context.changeStep("previous")})}render(){const e=this.context,t=e.isFirstStep,s=e.isLastStep;return this.props.render(this.onNext,this.onPrevious,t,s)}}Controls.contextTypes={changeStep:PropTypes.func.isRequired,isFirstStep:PropTypes.bool.isRequired,isLastStep:PropTypes.bool.isRequired};export{Wizard,Step,Controls};
Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Wizard",{enumerable:!0,get:function(){return _Wizard.default}}),Object.defineProperty(exports,"Step",{enumerable:!0,get:function(){return _Step.default}});var _Wizard=_interopRequireDefault(require("./Wizard.js")),_Step=_interopRequireDefault(require("./Step.js"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}
//# sourceMappingURL=index.min.js.map

11

package.json
{
"name": "react-losen",
"description": "A super customisable Wizard for React and React Native",
"version": "1.1.2",
"version": "2.0.0-0",
"license": "MIT",

@@ -26,2 +26,3 @@ "esnext": "dist-src/index.js",

"dependencies": {
"@babel/preset-react": "^7.0.0",
"prop-types": "^15.7.1",

@@ -31,7 +32,7 @@ "react": "^16.8.1"

"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/core": "^7.4.3",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-env": "^7.4.3",
"@babel/preset-flow": "^7.0.0",
"@pika/pack": "^0.3.2",
"@pika/pack": "^0.3.6",
"@pika/plugin-build-umd": "^0.3.11",

@@ -54,3 +55,5 @@ "@pika/plugin-build-web": "^0.3.11",

"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.2.0",
"flow-bin": "^0.93.0",
"jest": "^24.1.0",
"pika-plugin-minify": "^0.1.0",

@@ -57,0 +60,0 @@ "prettier": "^1.16.4",

4

README.md

@@ -61,3 +61,3 @@ ---

Use `docz:dev` to spin up a dev server which let's you view and play with the source components. To get started, create a `.md` in the `./pages` directory. It uses MDX which let's you import and write
Use `yarn dev` to spin up a dev server which let's you view and play with the source components. To get started, create a `.md` in the `./pages` directory. It uses MDX which let's you import and write
JSX within markdown documents. For more info out the [Docz website](https://www.docz.site/) and read up on the [MDX spec](https://github.com/mdx-js/mdx/).

@@ -79,3 +79,3 @@

The documentation is built by running `yarn docz:build`. This generates a static site in `./docs/`. Currently the site is deployed and hosted with [Zeit's Now](https://zeit.co/blog/now-static).
The documentation is built by running `yarn build:docs`. This generates a static site in `./docs/`. Currently the site is deployed and hosted with [Zeit's Now](https://zeit.co/blog/now-static).

@@ -82,0 +82,0 @@ ## Versioning

dist-src/Controls.js
dist-src/index.min.js.map

Sorry, the diff of this file is not supported yet

dist-umd/index.min.js.map

Sorry, the diff of this file is not supported yet

dist-web/index.min.js.map

Sorry, the diff of this file is not supported yet

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