@valar1/formik-wizard-form - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/formik-wizard-form.cjs.development.js

@@ -7,5 +7,5 @@ 'use strict';
 
+var formik = require('formik');
 var React = require('react');
 var React__default = _interopDefault(React);
-var formik = require('formik');
 
@@ -861,8 +861,22 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   }, [setCurrentStep, currentStep, total]);
+  var goToStep = React.useCallback(function (index) {
+    return setCurrentStep(index);
+  }, [setCurrentStep]);
+  var goToStepName = React.useCallback(function (name) {
+    var stepIndex = steps.findIndex(function (step) {
+      return step.name === name;
+    });
+
+    if (stepIndex !== -1) {
+      setCurrentStep(stepIndex);
+    }
+  }, [setCurrentStep, steps]);
   var stepObj = steps[currentStep];
   var beforePrev = stepObj.beforePrev,
-      beforeNext = stepObj.beforeNext;
+      beforeNext = stepObj.beforeNext,
+      canSkipStep = stepObj.canSkipStep;
   var handlePrev = React.useCallback(function (formikBag) {
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var isValid;
+      var isValid, _yield$canSkipStep, name, index;
+
       return runtime_1.wrap(function _callee$(_context) {
@@ -893,2 +907,33 @@ while (1) {
             case 10:
+              if (!isFunction(canSkipStep)) {
+                _context.next = 24;
+                break;
+              }
+
+              _context.prev = 11;
+              _context.next = 14;
+              return canSkipStep(formikBag.values, formikBag, currentStep);
+
+            case 14:
+              _yield$canSkipStep = _context.sent;
+              name = _yield$canSkipStep.name;
+              index = _yield$canSkipStep.index;
+
+              if (name) {
+                goToStepName(name);
+              }
+
+              if (index) {
+                goToStep(index);
+              }
+
+              _context.next = 24;
+              break;
+
+            case 21:
+              _context.prev = 21;
+              _context.t1 = _context["catch"](11);
+              isValid = false;
+
+            case 24:
               if (isValid) {
@@ -898,3 +943,3 @@ goToPrev();
 
-            case 11:
+            case 25:
             case "end":
@@ -904,8 +949,9 @@ return _context.stop();
         }
-      }, _callee, null, [[2, 7]]);
+      }, _callee, null, [[2, 7], [11, 21]]);
     }));
-  }, [goToPrev, currentStep, beforePrev]);
+  }, [goToPrev, currentStep, beforePrev, canSkipStep, goToStepName, goToStep]);
   var handleNext = React.useCallback(function (formikBag) {
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-      var isValid, errors;
+      var isValid, errors, _yield$canSkipStep2, name, index;
+
       return runtime_1.wrap(function _callee2$(_context2) {
@@ -950,2 +996,33 @@ while (1) {
             case 16:
+              if (!((validateOnNext && isValid || !validateOnNext) && isFunction(canSkipStep))) {
+                _context2.next = 30;
+                break;
+              }
+
+              _context2.prev = 17;
+              _context2.next = 20;
+              return canSkipStep(formikBag.values, formikBag, currentStep);
+
+            case 20:
+              _yield$canSkipStep2 = _context2.sent;
+              name = _yield$canSkipStep2.name;
+              index = _yield$canSkipStep2.index;
+
+              if (name) {
+                goToStepName(name);
+              }
+
+              if (index) {
+                goToStep(index);
+              }
+
+              _context2.next = 30;
+              break;
+
+            case 27:
+              _context2.prev = 27;
+              _context2.t1 = _context2["catch"](17);
+              isValid = false;
+
+            case 30:
               if (isValid) {
@@ -955,3 +1032,3 @@ isLastStep ? formikBag.submitForm() : goToNext();
 
-            case 17:
+            case 31:
             case "end":
@@ -961,5 +1038,5 @@ return _context2.stop();
         }
-      }, _callee2, null, [[7, 13]]);
+      }, _callee2, null, [[7, 13], [17, 27]]);
     }));
-  }, [goToNext, currentStep, beforeNext, isLastStep, validateOnNext]);
+  }, [goToNext, currentStep, beforeNext, isLastStep, validateOnNext, canSkipStep, goToStep, goToStepName]);
   return {
@@ -973,3 +1050,5 @@ currentStepIndex: currentStep,
     handlePrev: handlePrev,
-    handleNext: handleNext
+    handleNext: handleNext,
+    goToStep: goToStep,
+    goToStepName: goToStepName
   };
@@ -996,2 +1075,4 @@ };
       handleNext = _useWizard.handleNext,
+      goToStep = _useWizard.goToStep,
+      goToStepName = _useWizard.goToStepName,
       goToNext = _useWizard.goToNext;
@@ -1036,2 +1117,4 @@
       currentStepIndex: currentStepIndex,
+      goToStepName: goToStepName,
+      goToStep: goToStep,
       isPrevDisabled: isPrevDisabled,
@@ -1042,3 +1125,4 @@ isNextDisabled: validateOnNext && !formikBag.isValid || false,
           currentStepIndex: currentStepIndex,
-          goToNext: goToNext
+          goToNext: goToNext,
+          handleNext: handleNext(formikBag)
         }));
@@ -1067,3 +1151,3 @@ }
       _handlePrev = _useWizard.handlePrev,
-      handleNext = _useWizard.handleNext,
+      _handleNext = _useWizard.handleNext,
       goToNext = _useWizard.goToNext;
@@ -1105,3 +1189,3 @@
     }(),
-    handleNext: handleNext(formik$1),
+    handleNext: _handleNext(formik$1),
     isFirstStep: isFirstStep,
@@ -1115,3 +1199,30 @@ isLastStep: isLastStep,
         goToNext: goToNext,
-        currentStepIndex: currentStepIndex
+        currentStepIndex: currentStepIndex,
+        handleNext: function () {
+          var _handleNext2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+            return runtime_1.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.next = 2;
+                    return _handleNext(formik$1)();
+
+                  case 2:
+                    _context2.next = 4;
+                    return formik$1.validateForm();
+
+                  case 4:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+
+          function handleNext() {
+            return _handleNext2.apply(this, arguments);
+          }
+
+          return handleNext;
+        }()
       }));
@@ -1118,0 +1229,0 @@ }

dist/formik-wizard-form.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),r=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,n=require("formik");function o(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function i(t){return function(){var e=this,r=arguments;return new Promise((function(n,i){var a=t.apply(e,r);function c(t){o(a,n,i,c,u,"next",t)}function u(t){o(a,n,i,c,u,"throw",t)}c(void 0)}))}}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function c(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}var u,s=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new S(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=w(a,r);if(c){if(c===l)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=s(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var v={};c(v,o,(function(){return this}));var d=Object.getPrototypeOf,y=d&&d(d(k([])));y&&y!==e&&r.call(y,o)&&(v=y);var m=p.prototype=f.prototype=Object.create(v);function x(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function g(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function w(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function L(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function k(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:O}}function O(){return{value:void 0,done:!0}}return h.prototype=p,c(m,"constructor",p),c(p,"constructor",h),h.displayName=c(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,a,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},x(g.prototype),c(g.prototype,i,(function(){return this})),t.AsyncIterator=g,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new g(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},x(m),c(m,a,"Generator"),c(m,o,(function(){return this})),c(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=k,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(L),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),L(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;L(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:k(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(u={exports:{}}),u.exports),l=function(t){return"function"==typeof t},f=function(t,r,n){var o=r.length,a=e.useState(t),c=a[0],u=a[1],f=0===c,h=0===c,p=c>=o-1,v=e.useCallback((function(){return u(Math.max(0,c-1))}),[u,c]),d=e.useCallback((function(){return u(Math.min(c+1,o-1))}),[u,c,o]),y=r[c],m=y.beforePrev,x=y.beforeNext,g=e.useCallback((function(t){return i(s.mark((function e(){var r;return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=!0,!l(m)){e.next=10;break}return e.prev=2,e.next=5,m(t.values,t,c);case 5:e.next=10;break;case 7:e.prev=7,e.t0=e.catch(2),r=!1;case 10:r&&v();case 11:case"end":return e.stop()}}),e,null,[[2,7]])})))}),[v,c,m]),w=e.useCallback((function(t){return i(s.mark((function e(){var r;return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=!1,!n){e.next=6;break}return e.next=4,t.validateForm();case 4:r=0===Object.keys(e.sent).length;case 6:if(!(n&&r||!n)||!l(x)){e.next=16;break}return e.prev=7,e.next=10,x(t.values,t,c);case 10:r=!0,e.next=16;break;case 13:e.prev=13,e.t0=e.catch(7),r=!1;case 16:r&&(p?t.submitForm():d());case 17:case"end":return e.stop()}}),e,null,[[7,13]])})))}),[d,c,x,p,n]);return{currentStepIndex:c,isPrevDisabled:f,isFirstStep:h,isLastStep:p,goToPrev:v,goToNext:d,handlePrev:g,handleNext:w}},h=["activeStepIndex","validateOnNext","steps","children"],p=["activeStepIndex","validateOnNext","steps","children"];exports.FormikWizard=function(t){var e=t.activeStepIndex,o=void 0===e?0:e,u=t.validateOnNext,l=void 0===u||u,p=t.steps,v=t.children,d=c(t,h),y=f(o,p,l),m=y.currentStepIndex,x=y.isPrevDisabled,g=y.isFirstStep,w=y.isLastStep,b=y.handlePrev,L=y.handleNext,S=y.goToNext,k=p[m],O=k.component;return r.createElement(n.Formik,Object.assign({},d,{validationSchema:k.validationSchema}),"function"==typeof v?function(t){var e,n={handlePrev:(e=i(s.mark((function e(){return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,b(t)();case 2:return e.next=4,t.validateForm();case 4:case"end":return e.stop()}}),e)}))),function(){return e.apply(this,arguments)}),handleNext:L(t),isFirstStep:g,isLastStep:w,currentStepIndex:m,isPrevDisabled:x,isNextDisabled:l&&!t.isValid||!1,renderComponent:function(){return r.createElement(O,Object.assign({},t,{currentStepIndex:m,goToNext:S}))}};return v(a({},t,n))}:v)},exports.useFormikWizard=function(t){var e,o=t.activeStepIndex,u=void 0===o?0:o,l=t.validateOnNext,h=void 0===l||l,v=t.steps,d=c(t,p),y=f(u,v,h),m=y.currentStepIndex,x=y.isPrevDisabled,g=y.isFirstStep,w=y.isLastStep,b=y.handlePrev,L=y.handleNext,S=y.goToNext,k=v[m],O=k.component,E=n.useFormik(a({},d,{validationSchema:k.validationSchema}));return a({},E,{handlePrev:(e=i(s.mark((function t(){return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,b(E)();case 2:return t.next=4,E.validateForm();case 4:case"end":return t.stop()}}),t)}))),function(){return e.apply(this,arguments)}),handleNext:L(E),isFirstStep:g,isLastStep:w,currentStepIndex:m,isPrevDisabled:x,isNextDisabled:h&&!E.isValid||!1,renderComponent:function(){return r.createElement(O,Object.assign({},E,{goToNext:S,currentStepIndex:m}))}})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("formik"),r=require("react"),n=(t=r)&&"object"==typeof t&&"default"in t?t.default:t;function o(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function i(t){return function(){var e=this,r=arguments;return new Promise((function(n,i){var a=t.apply(e,r);function c(t){o(a,n,i,c,u,"next",t)}function u(t){o(a,n,i,c,u,"throw",t)}c(void 0)}))}}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function c(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)e.indexOf(r=i[n])>=0||(o[r]=t[r]);return o}var u,s=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new k(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=b(a,r);if(c){if(c===l)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=s(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var v={};c(v,o,(function(){return this}));var d=Object.getPrototypeOf,y=d&&d(d(L([])));y&&y!==e&&r.call(y,o)&&(v=y);var x=p.prototype=f.prototype=Object.create(v);function m(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function g(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function b(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function S(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function L(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:N}}function N(){return{value:void 0,done:!0}}return h.prototype=p,c(x,"constructor",p),c(p,"constructor",h),h.displayName=c(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,a,"GeneratorFunction")),t.prototype=Object.create(x),t},t.awrap=function(t){return{__await:t}},m(g.prototype),c(g.prototype,i,(function(){return this})),t.AsyncIterator=g,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new g(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},m(x),c(x,a,"Generator"),c(x,o,(function(){return this})),c(x,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=L,k.prototype={constructor:k,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(S),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),S(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;S(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:L(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(u={exports:{}}),u.exports),l=function(t){return"function"==typeof t},f=function(t,e,n){var o=e.length,a=r.useState(t),c=a[0],u=a[1],f=0===c,h=0===c,p=c>=o-1,v=r.useCallback((function(){return u(Math.max(0,c-1))}),[u,c]),d=r.useCallback((function(){return u(Math.min(c+1,o-1))}),[u,c,o]),y=r.useCallback((function(t){return u(t)}),[u]),x=r.useCallback((function(t){var r=e.findIndex((function(e){return e.name===t}));-1!==r&&u(r)}),[u,e]),m=e[c],g=m.beforePrev,b=m.beforeNext,w=m.canSkipStep,S=r.useCallback((function(t){return i(s.mark((function e(){var r,n,o,i;return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=!0,!l(g)){e.next=10;break}return e.prev=2,e.next=5,g(t.values,t,c);case 5:e.next=10;break;case 7:e.prev=7,e.t0=e.catch(2),r=!1;case 10:if(!l(w)){e.next=24;break}return e.prev=11,e.next=14,w(t.values,t,c);case 14:i=(n=e.sent).index,(o=n.name)&&x(o),i&&y(i),e.next=24;break;case 21:e.prev=21,e.t1=e.catch(11),r=!1;case 24:r&&v();case 25:case"end":return e.stop()}}),e,null,[[2,7],[11,21]])})))}),[v,c,g,w,x,y]),k=r.useCallback((function(t){return i(s.mark((function e(){var r,o,i,a;return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=!1,!n){e.next=6;break}return e.next=4,t.validateForm();case 4:r=0===Object.keys(e.sent).length;case 6:if(!(n&&r||!n)||!l(b)){e.next=16;break}return e.prev=7,e.next=10,b(t.values,t,c);case 10:r=!0,e.next=16;break;case 13:e.prev=13,e.t0=e.catch(7),r=!1;case 16:if(!(n&&r||!n)||!l(w)){e.next=30;break}return e.prev=17,e.next=20,w(t.values,t,c);case 20:a=(o=e.sent).index,(i=o.name)&&x(i),a&&y(a),e.next=30;break;case 27:e.prev=27,e.t1=e.catch(17),r=!1;case 30:r&&(p?t.submitForm():d());case 31:case"end":return e.stop()}}),e,null,[[7,13],[17,27]])})))}),[d,c,b,p,n,w,y,x]);return{currentStepIndex:c,isPrevDisabled:f,isFirstStep:h,isLastStep:p,goToPrev:v,goToNext:d,handlePrev:S,handleNext:k,goToStep:y,goToStepName:x}},h=["activeStepIndex","validateOnNext","steps","children"],p=["activeStepIndex","validateOnNext","steps","children"];exports.FormikWizard=function(t){var r=t.activeStepIndex,o=void 0===r?0:r,u=t.validateOnNext,l=void 0===u||u,p=t.steps,v=t.children,d=c(t,h),y=f(o,p,l),x=y.currentStepIndex,m=y.isPrevDisabled,g=y.isFirstStep,b=y.isLastStep,w=y.handlePrev,S=y.handleNext,k=y.goToStep,L=y.goToStepName,N=y.goToNext,O=p[x],E=O.component;return n.createElement(e.Formik,Object.assign({},d,{validationSchema:O.validationSchema}),"function"==typeof v?function(t){var e,r={handlePrev:(e=i(s.mark((function e(){return s.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,w(t)();case 2:return e.next=4,t.validateForm();case 4:case"end":return e.stop()}}),e)}))),function(){return e.apply(this,arguments)}),handleNext:S(t),isFirstStep:g,isLastStep:b,currentStepIndex:x,goToStepName:L,goToStep:k,isPrevDisabled:m,isNextDisabled:l&&!t.isValid||!1,renderComponent:function(){return n.createElement(E,Object.assign({},t,{currentStepIndex:x,goToNext:N,handleNext:S(t)}))}};return v(a({},t,r))}:v)},exports.useFormikWizard=function(t){var r,o=t.activeStepIndex,u=void 0===o?0:o,l=t.validateOnNext,h=void 0===l||l,v=t.steps,d=c(t,p),y=f(u,v,h),x=y.currentStepIndex,m=y.isPrevDisabled,g=y.isFirstStep,b=y.isLastStep,w=y.handlePrev,S=y.handleNext,k=y.goToNext,L=v[x],N=L.component,O=e.useFormik(a({},d,{validationSchema:L.validationSchema}));return a({},O,{handlePrev:(r=i(s.mark((function t(){return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,w(O)();case 2:return t.next=4,O.validateForm();case 4:case"end":return t.stop()}}),t)}))),function(){return r.apply(this,arguments)}),handleNext:S(O),isFirstStep:g,isLastStep:b,currentStepIndex:x,isPrevDisabled:m,isNextDisabled:h&&!O.isValid||!1,renderComponent:function(){return n.createElement(N,Object.assign({},O,{goToNext:k,currentStepIndex:x,handleNext:(t=i(s.mark((function t(){return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,S(O)();case 2:return t.next=4,O.validateForm();case 4:case"end":return t.stop()}}),t)}))),function(){return t.apply(this,arguments)})}));var t}})};
 //# sourceMappingURL=formik-wizard-form.cjs.production.min.js.map

dist/formik-wizard-form.esm.js

@@ -0,3 +1,3 @@
+import { Formik, useFormik } from 'formik';
 import React, { useState, useCallback } from 'react';
-import { Formik, useFormik } from 'formik';
 
@@ -853,8 +853,22 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   }, [setCurrentStep, currentStep, total]);
+  var goToStep = useCallback(function (index) {
+    return setCurrentStep(index);
+  }, [setCurrentStep]);
+  var goToStepName = useCallback(function (name) {
+    var stepIndex = steps.findIndex(function (step) {
+      return step.name === name;
+    });
+
+    if (stepIndex !== -1) {
+      setCurrentStep(stepIndex);
+    }
+  }, [setCurrentStep, steps]);
   var stepObj = steps[currentStep];
   var beforePrev = stepObj.beforePrev,
-      beforeNext = stepObj.beforeNext;
+      beforeNext = stepObj.beforeNext,
+      canSkipStep = stepObj.canSkipStep;
   var handlePrev = useCallback(function (formikBag) {
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var isValid;
+      var isValid, _yield$canSkipStep, name, index;
+
       return runtime_1.wrap(function _callee$(_context) {
@@ -885,2 +899,33 @@ while (1) {
             case 10:
+              if (!isFunction(canSkipStep)) {
+                _context.next = 24;
+                break;
+              }
+
+              _context.prev = 11;
+              _context.next = 14;
+              return canSkipStep(formikBag.values, formikBag, currentStep);
+
+            case 14:
+              _yield$canSkipStep = _context.sent;
+              name = _yield$canSkipStep.name;
+              index = _yield$canSkipStep.index;
+
+              if (name) {
+                goToStepName(name);
+              }
+
+              if (index) {
+                goToStep(index);
+              }
+
+              _context.next = 24;
+              break;
+
+            case 21:
+              _context.prev = 21;
+              _context.t1 = _context["catch"](11);
+              isValid = false;
+
+            case 24:
               if (isValid) {
@@ -890,3 +935,3 @@ goToPrev();
 
-            case 11:
+            case 25:
             case "end":
@@ -896,8 +941,9 @@ return _context.stop();
         }
-      }, _callee, null, [[2, 7]]);
+      }, _callee, null, [[2, 7], [11, 21]]);
     }));
-  }, [goToPrev, currentStep, beforePrev]);
+  }, [goToPrev, currentStep, beforePrev, canSkipStep, goToStepName, goToStep]);
   var handleNext = useCallback(function (formikBag) {
     return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-      var isValid, errors;
+      var isValid, errors, _yield$canSkipStep2, name, index;
+
       return runtime_1.wrap(function _callee2$(_context2) {
@@ -942,2 +988,33 @@ while (1) {
             case 16:
+              if (!((validateOnNext && isValid || !validateOnNext) && isFunction(canSkipStep))) {
+                _context2.next = 30;
+                break;
+              }
+
+              _context2.prev = 17;
+              _context2.next = 20;
+              return canSkipStep(formikBag.values, formikBag, currentStep);
+
+            case 20:
+              _yield$canSkipStep2 = _context2.sent;
+              name = _yield$canSkipStep2.name;
+              index = _yield$canSkipStep2.index;
+
+              if (name) {
+                goToStepName(name);
+              }
+
+              if (index) {
+                goToStep(index);
+              }
+
+              _context2.next = 30;
+              break;
+
+            case 27:
+              _context2.prev = 27;
+              _context2.t1 = _context2["catch"](17);
+              isValid = false;
+
+            case 30:
               if (isValid) {
@@ -947,3 +1024,3 @@ isLastStep ? formikBag.submitForm() : goToNext();
 
-            case 17:
+            case 31:
             case "end":
@@ -953,5 +1030,5 @@ return _context2.stop();
         }
-      }, _callee2, null, [[7, 13]]);
+      }, _callee2, null, [[7, 13], [17, 27]]);
     }));
-  }, [goToNext, currentStep, beforeNext, isLastStep, validateOnNext]);
+  }, [goToNext, currentStep, beforeNext, isLastStep, validateOnNext, canSkipStep, goToStep, goToStepName]);
   return {
@@ -965,3 +1042,5 @@ currentStepIndex: currentStep,
     handlePrev: handlePrev,
-    handleNext: handleNext
+    handleNext: handleNext,
+    goToStep: goToStep,
+    goToStepName: goToStepName
   };
@@ -988,2 +1067,4 @@ };
       handleNext = _useWizard.handleNext,
+      goToStep = _useWizard.goToStep,
+      goToStepName = _useWizard.goToStepName,
       goToNext = _useWizard.goToNext;
@@ -1028,2 +1109,4 @@
       currentStepIndex: currentStepIndex,
+      goToStepName: goToStepName,
+      goToStep: goToStep,
       isPrevDisabled: isPrevDisabled,
@@ -1034,3 +1117,4 @@ isNextDisabled: validateOnNext && !formikBag.isValid || false,
           currentStepIndex: currentStepIndex,
-          goToNext: goToNext
+          goToNext: goToNext,
+          handleNext: handleNext(formikBag)
         }));
@@ -1059,3 +1143,3 @@ }
       _handlePrev = _useWizard.handlePrev,
-      handleNext = _useWizard.handleNext,
+      _handleNext = _useWizard.handleNext,
       goToNext = _useWizard.goToNext;
@@ -1097,3 +1181,3 @@
     }(),
-    handleNext: handleNext(formik),
+    handleNext: _handleNext(formik),
     isFirstStep: isFirstStep,
@@ -1107,3 +1191,30 @@ isLastStep: isLastStep,
         goToNext: goToNext,
-        currentStepIndex: currentStepIndex
+        currentStepIndex: currentStepIndex,
+        handleNext: function () {
+          var _handleNext2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+            return runtime_1.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.next = 2;
+                    return _handleNext(formik)();
+
+                  case 2:
+                    _context2.next = 4;
+                    return formik.validateForm();
+
+                  case 4:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+
+          function handleNext() {
+            return _handleNext2.apply(this, arguments);
+          }
+
+          return handleNext;
+        }()
       }));
@@ -1110,0 +1221,0 @@ }

dist/types.d.ts

 /// <reference types="react" />
 import { FormikConfig, FormikProps, FormikValues } from 'formik';
 export declare type Step = {
+    /** Identifier for step */
+    name?: string;
     /** Validation schema object for the current step */
     validationSchema?: any | (() => any);
+    /** Handler to be called before loading the step, the form will jump to either name or index step */
+    canSkipStep?: (values: FormikValues, formikBag: FormikProps<FormikValues>, currentStepIndex: number) => Promise<{
+        name?: string;
+        index?: number;
+    }>;
     /** Handler to be called before moving to previous step */
@@ -14,2 +21,3 @@ beforePrev?: (values: FormikValues, formikBag: FormikProps<FormikValues>, currentStepIndex: number) => Promise<any>;
         goToNext: () => void;
+        handleNext: (formikBag: any) => Promise<void>;
     }>;
@@ -16,0 +24,0 @@ };

dist/useWizard.d.ts

@@ -11,3 +11,5 @@ import { Step } from './types';
     handleNext: (formikBag: any) => () => Promise<void>;
+    goToStep: (index: number) => void;
+    goToStepName: (name: string) => void;
 };
 export { useWizard };

package.json

 {
   "name": "@valar1/formik-wizard-form",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Valari Fork - Create stepper forms over formik with ease",
@@ -115,3 +115,6 @@ "main": "dist/index.js",
     "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "browserlist": "latest"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

269048

increased by7.07%

Lines of code

2241

increased by9.42%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedbrowserlist@latest

• + Addedansi-styles@3.2.1(transitive)

• + Addedbrowserlist@1.0.1(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedsupports-color@5.5.0(transitive)