iglooform 2.3.3 → 2.3.7

package/es/filter/style/index.less

@@ -223,7 +223,7 @@
       }
 
       .igloo-form-filter-drop-down-container-content {
-        .igloo-form-filter-drop-dwon-container-content-group {
+        .igloo-form-filter-drop-down-container-content-group {
           .igloo-form-filter-drop-down-container-content-group-title {
             display: flex;
             justify-content: space-between;

package/es/form/context.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormInstance } from 'antd/es/form';
+import { FormItemName } from '@/types';
 declare const _default: React.Context<{
     form?: FormInstance<any> | undefined;
     onCancel?(): void;
@@ -13,5 +14,6 @@ declare const _default: React.Context<{
     requiredMark?: boolean | undefined;
     showSubmitButton?: boolean | undefined;
     getScrollContainer: () => HTMLElement | Window | null;
+    registerDependencies: (name: FormItemName | FormItemName[], updater: Function) => void;
 }>;
 export default _default;

package/es/form/context.js

@@ -2,5 +2,6 @@ import React from 'react';
 export default /*#__PURE__*/React.createContext({
   getScrollContainer: function getScrollContainer() {
     return window;
-  }
+  },
+  registerDependencies: function registerDependencies() {}
 });

package/es/form/element/index.js

@@ -19,8 +19,20 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef, useReducer } from 'react';
 import { CloseCircleFilled } from '@ant-design/icons';
 import { calcFormItemProps } from '../utils';
 import Section from '../section';
@@ -44,8 +56,48 @@ var Element = function Element(_ref) {
 
   var _useContext = useContext(FormContext),
       form = _useContext.form,
-      requiredMark = _useContext.requiredMark;
+      requiredMark = _useContext.requiredMark,
+      registerDependencies = _useContext.registerDependencies;
+
+  var _useReducer = useReducer(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  useEffect(function () {
+    var dependencies = config.dependencies,
+        asserts = config.asserts,
+        copyValue = config.copyValue,
+        selectValue = config.selectValue,
+        shouldRender = config.shouldRender;
+    var dependentField = dependencies || [];
+
+    if (asserts && asserts.length) {
+      asserts.forEach(function (_ref2) {
+        var field = _ref2.field;
+        return dependentField.push(field);
+      });
+    }
+
+    if (copyValue) {
+      dependentField.push(copyValue.assert.field);
+    }
+
+    if (selectValue && selectValue.length) {
+      selectValue.forEach(function (_ref3) {
+        var assert = _ref3.assert;
+        return dependentField.push(assert.field);
+      });
+    }
+
+    if (shouldRender) {
+      dependentField.push('SUBSCRIBE_ALL');
+    }
 
+    registerDependencies(dependentField, dispatch);
+  }, []);
   invariant(type !== 'Pages' && type !== 'Page', "".concat(type, " should not be inner form item"));
 
   var _useComponent = useComponent(config),

package/es/form/index.js

@@ -29,7 +29,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useReducer, useImperativeHandle, forwardRef } from 'react';
+import { useState, useImperativeHandle, forwardRef } from 'react';
 import Pages from './pages';
 import Page from './page';
 import Steps from './steps';
@@ -59,13 +59,6 @@ var IglooForm = function IglooForm(props, ref) {
     return window;
   } : _props$getScrollConta;
 
-  var _useReducer = useReducer(function (r) {
-    return r + 1;
-  }, 0),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      _ = _useReducer2[0],
-      dispatch = _useReducer2[1];
-
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
       innerForm = _Form$useForm2[0];
@@ -75,9 +68,14 @@ var IglooForm = function IglooForm(props, ref) {
       submitting = _useState2[0],
       setSubmitting = _useState2[1];
 
-  var _useState3 = useState(formProp || innerForm),
-      _useState4 = _slicedToArray(_useState3, 1),
-      form = _useState4[0];
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      dependents = _useState4[0],
+      setDependents = _useState4[1];
+
+  var _useState5 = useState(formProp || innerForm),
+      _useState6 = _slicedToArray(_useState5, 1),
+      form = _useState6[0];
 
   var type = config.type;
   invariant(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
@@ -158,6 +156,57 @@ var IglooForm = function IglooForm(props, ref) {
       }()
     };
   });
+
+  var registerDependencies = function registerDependencies(field, updater) {
+    if (Array.isArray(field)) {
+      setDependents(function (deps) {
+        var newDeps = _objectSpread({}, deps);
+
+        field.forEach(function (name) {
+          var key = Array.isArray(name) ? name.join() : name;
+
+          if (!newDeps[key]) {
+            newDeps[key] = [];
+          }
+
+          newDeps[key].push(updater);
+        });
+        return newDeps;
+      });
+      return;
+    }
+
+    setDependents(function (deps) {
+      var newDeps = _objectSpread({}, deps);
+
+      var key = Array.isArray(field) ? field.join() : field;
+
+      if (!newDeps[key]) {
+        newDeps[key] = [];
+      }
+
+      newDeps[key].push(updater);
+      return newDeps;
+    });
+  };
+
+  var handleValuesChange = function handleValuesChange(changedFields) {
+    var changedField = changedFields[0].name;
+    var changedKey = Array.isArray(changedField) ? changedField.join() : changedField;
+
+    if (dependents[changedKey]) {
+      dependents[changedKey].forEach(function (updater) {
+        return updater();
+      });
+    }
+
+    if (dependents['SUBSCRIBE_ALL']) {
+      dependents['SUBSCRIBE_ALL'].forEach(function (updater) {
+        return updater();
+      });
+    }
+  };
+
   return _jsx("div", Object.assign({
     className: classNames(className, {
       'igloo-form-without-button': !showSubmitButton
@@ -171,13 +220,14 @@ var IglooForm = function IglooForm(props, ref) {
         submitting: submitting,
         requiredMark: requiredMark,
         showSubmitButton: showSubmitButton,
-        getScrollContainer: getScrollContainer
+        getScrollContainer: getScrollContainer,
+        registerDependencies: registerDependencies
       }, locales)
     }, {
       children: _jsxs(_Form, Object.assign({
         form: form,
         onFinish: handleSubmit,
-        onValuesChange: dispatch,
+        onFieldsChange: handleValuesChange,
         colon: false,
         validateMessages: validateMessages || messages,
         initialValues: initialValues,

package/es/form/page/index.js

@@ -4,8 +4,21 @@ import "antd/es/col/style";
 import _Col from "antd/es/col";
 import "antd/es/row/style";
 import _Row from "antd/es/row";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useContext, useEffect, useReducer } from 'react';
 import Button from '../../button';
 import Element from '../element';
 import { calcNamePath } from '../utils';
@@ -20,6 +33,7 @@ var Page = function Page(_ref) {
       elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
       name = _ref$config.name,
       getButtonDisabledState = _ref$config.getButtonDisabledState,
+      shouldRender = _ref$config.shouldRender,
       _ref$showFooter = _ref.showFooter,
       showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter;
 
@@ -29,12 +43,27 @@ var Page = function Page(_ref) {
       submitText = _useContext.submitText,
       submitting = _useContext.submitting,
       showSubmitButton = _useContext.showSubmitButton,
-      form = _useContext.form;
+      form = _useContext.form,
+      registerDependencies = _useContext.registerDependencies;
+
+  var _useReducer = useReducer(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
 
   var _useContext2 = useContext(LocaleContext),
       formatMessage = _useContext2.formatMessage;
 
   var buttonDisabled = getButtonDisabledState && form && getButtonDisabledState(form);
+  useEffect(function () {
+    var subscribe = Boolean(shouldRender) || Boolean(getButtonDisabledState);
+
+    if (subscribe) {
+      registerDependencies('SUBSCRIBE_ALL', dispatch);
+    }
+  }, []);
   return _jsxs("div", Object.assign({
     className: 'igloo-page-container'
   }, {

package/es/form/pages/index.js

@@ -20,7 +20,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext } from 'react';
+import { useState, useContext, useReducer, useEffect } from 'react';
 import Button from '../../button';
 import Page from '../page';
 import { calcNamePath } from '../utils';
@@ -42,6 +42,13 @@ var Pages = function Pages(_ref) {
       current = _useState2[0],
       setCurrent = _useState2[1];
 
+  var _useReducer = useReducer(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
   var _useContext = useContext(LocaleContext),
       formatMessage = _useContext.formatMessage;
 
@@ -51,7 +58,21 @@ var Pages = function Pages(_ref) {
       previewText = _useContext2.previewText,
       nextText = _useContext2.nextText,
       submitting = _useContext2.submitting,
-      showSubmitButton = _useContext2.showSubmitButton;
+      showSubmitButton = _useContext2.showSubmitButton,
+      registerDependencies = _useContext2.registerDependencies;
+
+  useEffect(function () {
+    var subscribe = elements.some(function (_ref2) {
+      var shouldRender = _ref2.shouldRender,
+          getButtonDisabledState = _ref2.getButtonDisabledState,
+          getPreviousDisabledState = _ref2.getPreviousDisabledState;
+      return Boolean(shouldRender) || Boolean(getButtonDisabledState) || Boolean(getPreviousDisabledState);
+    });
+
+    if (subscribe) {
+      registerDependencies('SUBSCRIBE_ALL', dispatch);
+    }
+  }, []);
 
   var _useBreakpoint = useBreakpoint(),
       md = _useBreakpoint.md;
@@ -62,10 +83,10 @@ var Pages = function Pages(_ref) {
   });
 
   var handleNext = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _allFields$filter;
 
-      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, errorFields, errors;
+      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, errors;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -74,11 +95,11 @@ var Pages = function Pages(_ref) {
               allFields = (form === null || form === void 0 ? void 0 : form.getFieldsError()) || [];
               _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext;
               namePath = calcNamePath(name, currentName);
-              fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref3) {
-                var name = _ref3.name;
-                return name.join().startsWith(namePath === null || namePath === void 0 ? void 0 : namePath.join());
-              })) === null || _allFields$filter === void 0 ? void 0 : _allFields$filter.map(function (_ref4) {
+              fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
+                return name.join().startsWith(namePath === null || namePath === void 0 ? void 0 : namePath.join());
+              })) === null || _allFields$filter === void 0 ? void 0 : _allFields$filter.map(function (_ref5) {
+                var name = _ref5.name;
                 return name;
               });
               _context.prev = 4;
@@ -86,58 +107,57 @@ var Pages = function Pages(_ref) {
               return form === null || form === void 0 ? void 0 : form.validateFields(fields);
 
             case 7:
-              _context.next = 14;
+              _context.next = 13;
               break;
 
             case 9:
               _context.prev = 9;
               _context.t0 = _context["catch"](4);
-              errorFields = _context.t0.errorFields;
-              form === null || form === void 0 ? void 0 : form.scrollToField(errorFields[0].name);
+              form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
               return _context.abrupt("return");
 
-            case 14:
+            case 13:
               if (!(typeof handleNext === 'function')) {
-                _context.next = 26;
+                _context.next = 25;
                 break;
               }
 
-              _context.prev = 15;
-              _context.next = 18;
+              _context.prev = 14;
+              _context.next = 17;
               return handleNext(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
 
-            case 18:
+            case 17:
               errors = _context.sent;
 
               if (!Array.isArray(errors)) {
-                _context.next = 21;
+                _context.next = 20;
                 break;
               }
 
               return _context.abrupt("return", form === null || form === void 0 ? void 0 : form.setFields(errors));
 
-            case 21:
-              _context.next = 26;
+            case 20:
+              _context.next = 25;
               break;
 
-            case 23:
-              _context.prev = 23;
-              _context.t1 = _context["catch"](15);
+            case 22:
+              _context.prev = 22;
+              _context.t1 = _context["catch"](14);
               return _context.abrupt("return");
 
-            case 26:
+            case 25:
               setCurrent(current + 1);
 
-            case 27:
+            case 26:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 9], [15, 23]]);
+      }, _callee, null, [[4, 9], [14, 22]]);
     }));
 
     return function handleNext() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 

package/es/form/render/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
+import { useContext, useCallback } from 'react';
 import FormContext from '../context';
 
 var RenderElement = function RenderElement(_ref) {
@@ -16,7 +16,8 @@ var RenderElement = function RenderElement(_ref) {
   var _useContext = useContext(FormContext),
       form = _useContext.form;
 
-  return render(preview, form, value, onChange, setShowStepButton);
+  var memoedRender = useCallback(render, [render]);
+  return memoedRender(preview, form, value, onChange, setShowStepButton);
 };
 
 RenderElement.formItemPropsHandler = function (_ref2) {

package/es/form/steps/index.js

@@ -15,7 +15,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useContext, useEffect } from 'react';
+import { useState, useContext, useEffect, useReducer } from 'react';
 import Step from '../step';
 import { calcNamePath } from '../utils';
 import FormContext from '../context';
@@ -46,20 +46,38 @@ var Steps = function Steps(_ref) {
       shouldScroll = _useState6[0],
       setShouldScroll = _useState6[1];
 
-  var _useContext = useContext(FormContext),
-      form = _useContext.form;
+  var _useReducer = useReducer(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
 
-  useEffect(function () {}, [current]);
+  var _useContext = useContext(FormContext),
+      form = _useContext.form,
+      registerDependencies = _useContext.registerDependencies;
+
+  useEffect(function () {
+    var subscribe = elements.some(function (_ref2) {
+      var shouldRender = _ref2.shouldRender,
+          getButtonDisabledState = _ref2.getButtonDisabledState;
+      return Boolean(shouldRender) || Boolean(getButtonDisabledState);
+    });
+
+    if (subscribe) {
+      registerDependencies('SUBSCRIBE_ALL', dispatch);
+    }
+  }, []);
   var renderElements = elements.filter(function (step) {
     step.key = step.name || step.key || Math.random();
     return typeof step.shouldRender !== 'function' || step.shouldRender(form);
   });
 
   var handleNext = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var _allFields$filter;
 
-      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, errorFields, errors;
+      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, errors;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -68,11 +86,11 @@ var Steps = function Steps(_ref) {
               allFields = (form === null || form === void 0 ? void 0 : form.getFieldsError()) || [];
               _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext;
               namePath = calcNamePath(name, currentName);
-              fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref3) {
-                var name = _ref3.name;
-                return name.join().startsWith(namePath === null || namePath === void 0 ? void 0 : namePath.join());
-              })) === null || _allFields$filter === void 0 ? void 0 : _allFields$filter.map(function (_ref4) {
+              fields = allFields === null || allFields === void 0 ? void 0 : (_allFields$filter = allFields.filter(function (_ref4) {
                 var name = _ref4.name;
+                return name.join().startsWith(namePath === null || namePath === void 0 ? void 0 : namePath.join());
+              })) === null || _allFields$filter === void 0 ? void 0 : _allFields$filter.map(function (_ref5) {
+                var name = _ref5.name;
                 return name;
               });
               _context.prev = 4;
@@ -80,60 +98,59 @@ var Steps = function Steps(_ref) {
               return form === null || form === void 0 ? void 0 : form.validateFields(fields);
 
             case 7:
-              _context.next = 14;
+              _context.next = 13;
               break;
 
             case 9:
               _context.prev = 9;
               _context.t0 = _context["catch"](4);
-              errorFields = _context.t0.errorFields;
-              form === null || form === void 0 ? void 0 : form.scrollToField(errorFields[0].name);
+              form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
               return _context.abrupt("return");
 
-            case 14:
+            case 13:
               if (!(typeof handleNext === 'function')) {
-                _context.next = 26;
+                _context.next = 25;
                 break;
               }
 
-              _context.prev = 15;
-              _context.next = 18;
+              _context.prev = 14;
+              _context.next = 17;
               return handleNext(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
 
-            case 18:
+            case 17:
               errors = _context.sent;
 
               if (!Array.isArray(errors)) {
-                _context.next = 21;
+                _context.next = 20;
                 break;
               }
 
               return _context.abrupt("return", form === null || form === void 0 ? void 0 : form.setFields(errors));
 
-            case 21:
-              _context.next = 26;
+            case 20:
+              _context.next = 25;
               break;
 
-            case 23:
-              _context.prev = 23;
-              _context.t1 = _context["catch"](15);
+            case 22:
+              _context.prev = 22;
+              _context.t1 = _context["catch"](14);
               return _context.abrupt("return");
 
-            case 26:
+            case 25:
               setCurrent(last || current + 1);
               setLast(0);
               setShouldScroll(true);
 
-            case 29:
+            case 28:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 9], [15, 23]]);
+      }, _callee, null, [[4, 9], [14, 22]]);
     }));
 
     return function handleNext() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
@@ -154,7 +171,7 @@ var Steps = function Steps(_ref) {
         return _jsx(Step, {
           config: child,
           parentName: calcNamePath(parentName, name),
-          index: child.key,
+          index: index,
           total: renderElements.length,
           preview: current > index,
           edit: current === index,
@@ -162,7 +179,7 @@ var Steps = function Steps(_ref) {
           handleEdit: handleEdit,
           showLastIndex: showLastIndex,
           shouldScroll: shouldScroll
-        }, index);
+        }, child.key);
       })
     }), void 0)
   }), void 0);