Skip to content

Block the UI navigation #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Block the UI navigation #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 56 additions & 63 deletions dist/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
Expand Down Expand Up @@ -176,76 +174,71 @@ var StepZilla = function (_Component) {
// a child step wants to invoke a jump between steps. in this case 'evt' is the numeric step number and not the JS event
this.setNavState(evt);
} else {
var _ret = function () {
// the main navigation step ui is invoking a jump between steps
// if stepsNavigation is turned off or user clicked on existing step again (on step 2 and clicked on 2 again) then ignore
if (!_this3.props.stepsNavigation || evt.target.value === _this3.state.compState) {
evt.preventDefault();
evt.stopPropagation();

return {
v: void 0
};
}
// the main navigation step ui is invoking a jump between steps
var movingBack = evt.target.value < this.state.compState; // are we trying to move back or front?
var lastStep = this.state.compState === this.props.steps.length - 1;
// if stepsNavigation is turned off or user clicked on existing step again (on step 2 and clicked on 2 again) or prevBtnOnLastStep is hidden and we try to move back by top navigation then ignore
if (!this.props.stepsNavigation || evt.target.value === this.state.compState || !this.props.prevBtnOnLastStep && lastStep) {
evt.preventDefault();
evt.stopPropagation();

// evt is a react event so we need to persist it as we deal with aync promises which nullifies these events (https://facebook.github.io/react/docs/events.html#event-pooling)
evt.persist();
return;
}

var movingBack = evt.target.value < _this3.state.compState; // are we trying to move back or front?
var passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
var proceed = false; // flag on if we should move on
// evt is a react event so we need to persist it as we deal with aync promises which nullifies these events (https://facebook.github.io/react/docs/events.html#event-pooling)
evt.persist();

_this3.abstractStepMoveAllowedToPromise(movingBack).then(function () {
var valid = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
var proceed = false; // flag on if we should move on

// validation was a success (promise or sync validation). In it was a Promise's resolve()
// ... then proceed will be undefined, so make it true. Or else 'proceed' will carry the true/false value from sync
proceed = valid;
this.abstractStepMoveAllowedToPromise(movingBack).then(function () {
var valid = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

if (!movingBack) {
_this3.updateStepValidationFlag(proceed);
}
// validation was a success (promise or sync validation). In it was a Promise's resolve()
// ... then proceed will be undefined, so make it true. Or else 'proceed' will carry the true/false value from sync
proceed = valid;

if (proceed) {
if (!movingBack) {
// looks like we are moving forward, 'reduce' a new array of step>validated values we need to check and
// ... 'some' that to get a decision on if we should allow moving forward
passThroughStepsNotValid = _this3.props.steps.reduce(function (a, c, i) {
if (i >= _this3.state.compState && i < evt.target.value) {
a.push(c.validated);
}
return a;
}, []).some(function (c) {
return c === false;
});
}
}
}).catch(function () {
// Promise based validation was a fail (i.e reject())
if (!movingBack) {
_this3.updateStepValidationFlag(proceed);
}

if (proceed) {
if (!movingBack) {
_this3.updateStepValidationFlag(false);
}
}).then(function () {
// this is like finally(), executes if error no no error
if (proceed && !passThroughStepsNotValid) {
if (evt.target.value === _this3.props.steps.length - 1 && _this3.state.compState === _this3.props.steps.length - 1) {
_this3.setNavState(_this3.props.steps.length);
} else {
_this3.setNavState(evt.target.value);
}
}
}).catch(function (e) {
if (e) {
// see note below called "CatchRethrowing"
// ... plus the finally then() above is what throws the JS Error so we need to catch that here specifically
setTimeout(function () {
throw e;
// looks like we are moving forward, 'reduce' a new array of step>validated values we need to check and
// ... 'some' that to get a decision on if we should allow moving forward
passThroughStepsNotValid = _this3.props.steps.reduce(function (a, c, i) {
if (i >= _this3.state.compState && i < evt.target.value) {
a.push(c.validated);
}
return a;
}, []).some(function (c) {
return c === false;
});
}
});
}();

if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
}).catch(function () {
// Promise based validation was a fail (i.e reject())
if (!movingBack) {
_this3.updateStepValidationFlag(false);
}
}).then(function () {
// this is like finally(), executes if error no no error
if (proceed && !passThroughStepsNotValid) {
if (evt.target.value === _this3.props.steps.length - 1 && lastStep) {
_this3.setNavState(_this3.props.steps.length);
} else {
_this3.setNavState(evt.target.value);
}
}
}).catch(function (e) {
if (e) {
// see note below called "CatchRethrowing"
// ... plus the finally then() above is what throws the JS Error so we need to catch that here specifically
setTimeout(function () {
throw e;
});
}
});
}
}

Expand Down
11 changes: 6 additions & 5 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,11 @@ export default class StepZilla extends Component {
// a child step wants to invoke a jump between steps. in this case 'evt' is the numeric step number and not the JS event
this.setNavState(evt);
} else { // the main navigation step ui is invoking a jump between steps
// if stepsNavigation is turned off or user clicked on existing step again (on step 2 and clicked on 2 again) then ignore
if (!this.props.stepsNavigation || evt.target.value === this.state.compState) {
const movingBack = evt.target.value < this.state.compState; // are we trying to move back or front?
const lastStep = this.state.compState === (this.props.steps.length - 1);
// if stepsNavigation is turned off or user clicked on existing step again (on step 2 and clicked on 2 again) or prevBtnOnLastStep is hidden and we try to move back by top navigation then ignore
if (!this.props.stepsNavigation || evt.target.value === this.state.compState ||
(!this.props.prevBtnOnLastStep && lastStep)) {
evt.preventDefault();
evt.stopPropagation();

Expand All @@ -133,7 +136,6 @@ export default class StepZilla extends Component {
// evt is a react event so we need to persist it as we deal with aync promises which nullifies these events (https://facebook.github.io/react/docs/events.html#event-pooling)
evt.persist();

const movingBack = evt.target.value < this.state.compState; // are we trying to move back or front?
let passThroughStepsNotValid = false; // if we are jumping forward, only allow that if inbetween steps are all validated. This flag informs the logic...
let proceed = false; // flag on if we should move on

Expand Down Expand Up @@ -173,8 +175,7 @@ export default class StepZilla extends Component {
.then(() => {
// this is like finally(), executes if error no no error
if (proceed && !passThroughStepsNotValid) {
if (evt.target.value === (this.props.steps.length - 1) &&
this.state.compState === (this.props.steps.length - 1)) {
if (evt.target.value === (this.props.steps.length - 1) && lastStep) {
this.setNavState(this.props.steps.length);
} else {
this.setNavState(evt.target.value);
Expand Down