iglooform 2.5.7 → 2.5.8

package/lib/form/hsteps/index.js

@@ -0,0 +1,414 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/form/style");
+
+var _form = _interopRequireDefault(require("antd/es/form"));
+
+require("antd/es/divider/style");
+
+var _divider = _interopRequireDefault(require("antd/es/divider"));
+
+require("antd/es/grid/style");
+
+var _grid = _interopRequireDefault(require("antd/es/grid"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _hstep = _interopRequireDefault(require("../hstep"));
+
+var _formUtils = require("../../utils/form-utils");
+
+var _formContext = _interopRequireDefault(require("../../form-context"));
+
+var _formStepContext = _interopRequireDefault(require("../../form-step-context"));
+
+require("./style/index.less");
+
+var _invariant = _interopRequireDefault(require("invariant"));
+
+var _confirmation = _interopRequireDefault(require("../../confirmation"));
+
+var _locale = require("../../locale");
+
+var _typography = _interopRequireDefault(require("../../typography"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _radio = _interopRequireDefault(require("../../radio"));
+
+var _iglooicon = require("iglooicon");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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 _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; }
+
+var useBreakpoint = _grid.default.useBreakpoint;
+
+var HSteps = function HSteps(_ref) {
+  var _renderElements$curre2, _renderElements$curre3;
+
+  var name = _ref.name,
+      parentName = _ref.parentName,
+      _ref$config = _ref.config,
+      _ref$config$elements = _ref$config.elements,
+      elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
+      _ref$config$currentSt = _ref$config.currentStep,
+      currentStep = _ref$config$currentSt === void 0 ? 0 : _ref$config$currentSt,
+      subscribedFields = _ref$config.subscribedFields,
+      onEdit = _ref$config.onEdit,
+      _ref$withReview = _ref.withReview,
+      withReview = _ref$withReview === void 0 ? true : _ref$withReview,
+      _ref$confirmation = _ref.confirmation,
+      confirmation = _ref$confirmation === void 0 ? {} : _ref$confirmation;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      last = _useState4[0],
+      setLast = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      shouldScroll = _useState6[0],
+      setShouldScroll = _useState6[1];
+
+  var _useReducer = (0, _react.useReducer)(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useBreakpoint = useBreakpoint(),
+      md = _useBreakpoint.md;
+
+  var sections = (0, _react.useRef)(new Map());
+
+  var _useContext = (0, _react.useContext)(_formContext.default),
+      form = _useContext.form,
+      registerDependencies = _useContext.registerDependencies,
+      submitText = _useContext.submitText,
+      submitting = _useContext.submitting,
+      showSubmitButton = _useContext.showSubmitButton;
+
+  var _useContext2 = (0, _react.useContext)(_locale.LocaleContext),
+      formatMessage = _useContext2.formatMessage;
+
+  (0, _react.useEffect)(function () {
+    var subscribe = elements.some(function (_ref2) {
+      var shouldRender = _ref2.shouldRender,
+          getButtonDisabledState = _ref2.getButtonDisabledState;
+      return Boolean(shouldRender) || Boolean(getButtonDisabledState);
+    });
+
+    if (subscribe) {
+      Array.isArray(subscribedFields) ? registerDependencies(subscribedFields, dispatch) : registerDependencies('SUBSCRIBE_ALL', dispatch);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (currentStep === undefined || currentStep === current) return;
+    setCurrent(currentStep);
+  }, [currentStep]);
+  var renderElements = elements.filter(function (step) {
+    (0, _invariant.default)(step.type === 'Step', 'Child of steps should be Step');
+    return typeof step.shouldRender !== 'function' || step.shouldRender(form);
+  });
+
+  var handleNext = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _allFields$filter;
+
+      var allFields, _renderElements$curre, currentName, handleNext, namePath, fields, _iterator, _step, collapseSection, errors;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              allFields = (form === null || form === void 0 ? void 0 : form.getFieldsError()) || [];
+              _renderElements$curre = renderElements[current], currentName = _renderElements$curre.name, handleNext = _renderElements$curre.handleNext;
+              namePath = (0, _formUtils.calcNamePath)(name, currentName);
+              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;
+              _context.next = 7;
+              return form === null || form === void 0 ? void 0 : form.validateFields(fields);
+
+            case 7:
+              _context.next = 15;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](4);
+              form === null || form === void 0 ? void 0 : form.scrollToField(_context.t0.errorFields[0].name);
+              _iterator = _createForOfIteratorHelper(sections.current.values());
+
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  collapseSection = _step.value;
+                  collapseSection(false);
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+
+              return _context.abrupt("return");
+
+            case 15:
+              if (!(typeof handleNext === 'function')) {
+                _context.next = 27;
+                break;
+              }
+
+              _context.prev = 16;
+              _context.next = 19;
+              return handleNext(form === null || form === void 0 ? void 0 : form.getFieldsValue(fields));
+
+            case 19:
+              errors = _context.sent;
+
+              if (!Array.isArray(errors)) {
+                _context.next = 22;
+                break;
+              }
+
+              return _context.abrupt("return", form === null || form === void 0 ? void 0 : form.setFields(errors));
+
+            case 22:
+              _context.next = 27;
+              break;
+
+            case 24:
+              _context.prev = 24;
+              _context.t1 = _context["catch"](16);
+              return _context.abrupt("return");
+
+            case 27:
+              setCurrent(last || current + 1);
+              setLast(0);
+              setShouldScroll(true);
+
+            case 30:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 9], [16, 24]]);
+    }));
+
+    return function handleNext() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var handleEdit = function handleEdit(index) {
+    setLast(current);
+    setCurrent(index);
+    setShouldScroll(false);
+    typeof onEdit === 'function' && onEdit(index);
+  };
+
+  var registerSection = function registerSection(name, toggle) {
+    sections.current.set(name, toggle);
+  };
+
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: 'igloo-hsteps-container',
+    children: [md && (0, _jsxRuntime.jsxs)("div", {
+      className: 'igloo-hsteps-bar',
+      children: [renderElements.map(function (step, index) {
+        return (0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)({
+            'igloo-hsteps-bar-item': true,
+            'igloo-hsteps-bar-item-current': index === current
+          }),
+          children: [index < current && (0, _jsxRuntime.jsx)(_iglooicon.SuccessFilled, {
+            className: 'igloo-hsteps-bar-item-icon'
+          }), (0, _jsxRuntime.jsx)(_typography.default, {
+            level: "h3a",
+            className: 'igloo-hsteps-bar-item-text',
+            children: step.label
+          })]
+        });
+      }), withReview && (0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)({
+          'igloo-hsteps-bar-item': true,
+          'igloo-hsteps-bar-item-current': current === renderElements.length
+        }),
+        children: [current === renderElements.length && (0, _jsxRuntime.jsx)(_radio.default, {
+          checked: true
+        }), (0, _jsxRuntime.jsx)(_typography.default, {
+          level: "h3a",
+          className: 'igloo-hsteps-bar-item-text',
+          children: formatMessage({
+            id: 'Review and Submit'
+          })
+        })]
+      })]
+    }), (0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)({
+        'igloo-hsteps-content': !md
+      }),
+      children: [current < renderElements.length && (0, _jsxRuntime.jsx)(_formStepContext.default.Provider, {
+        value: {
+          registerSection: registerSection
+        },
+        children: (0, _jsxRuntime.jsx)(_hstep.default, {
+          config: renderElements[current],
+          parentName: (0, _formUtils.calcNamePath)(parentName, name),
+          index: current,
+          total: withReview ? renderElements.length + 1 : renderElements.length,
+          preview: false,
+          edit: true,
+          handleNext: handleNext,
+          handleEdit: handleEdit,
+          shouldScroll: shouldScroll
+        }, ((_renderElements$curre2 = renderElements[current]) === null || _renderElements$curre2 === void 0 ? void 0 : _renderElements$curre2.key) || ((_renderElements$curre3 = renderElements[current]) === null || _renderElements$curre3 === void 0 ? void 0 : _renderElements$curre3.name))
+      }), current === renderElements.length && (0, _jsxRuntime.jsxs)("div", {
+        className: "igloo-hstep-container",
+        children: [withReview && !md && (0, _jsxRuntime.jsxs)(_typography.default, {
+          className: "igloo-hstep-label",
+          level: "h3a",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "igloo-hstep-label-text",
+            children: formatMessage({
+              id: 'Review and Submit'
+            })
+          }), (0, _jsxRuntime.jsxs)(_typography.default, {
+            level: "body3",
+            children: [renderElements.length + 1, "/", renderElements.length + 1]
+          })]
+        }), renderElements.map(function (step, index) {
+          return (0, _jsxRuntime.jsx)(_hstep.default, {
+            config: step,
+            parentName: (0, _formUtils.calcNamePath)(parentName, name),
+            index: index,
+            total: withReview ? renderElements.length + 1 : renderElements.length,
+            preview: true,
+            edit: false,
+            handleNext: handleNext,
+            handleEdit: handleEdit,
+            shouldScroll: shouldScroll
+          }, (step === null || step === void 0 ? void 0 : step.key) || (step === null || step === void 0 ? void 0 : step.name));
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "igloo-hsteps-confirmation",
+          children: [md && (0, _jsxRuntime.jsx)(_typography.default, {
+            level: "h3a",
+            wrapElement: "div",
+            children: formatMessage({
+              id: 'Review and Submit'
+            })
+          }), (0, _jsxRuntime.jsx)(_typography.default, {
+            level: md ? 'h3b' : 'body1',
+            style: {
+              marginTop: 24
+            },
+            wrapElement: "div",
+            children: formatMessage({
+              id: 'Please take a moment to review what you’ve told us above.'
+            })
+          }), (0, _jsxRuntime.jsx)(_typography.default, {
+            level: md ? 'h3b' : 'body2',
+            style: {
+              marginTop: 24
+            },
+            wrapElement: "div",
+            children: formatMessage({
+              id: 'Once you’re happy with the above, and you’ve checked the box below, please go ahead and submit your activation.'
+            })
+          }), (0, _jsxRuntime.jsx)(_divider.default, {}), (0, _jsxRuntime.jsx)(_form.default.Item, {
+            name: (0, _formUtils.calcNamePath)(parentName, 'confirmation'),
+            rules: [{
+              validator: function validator(_, value) {
+                if (!value) {
+                  return Promise.reject(formatMessage({
+                    id: 'Please read and agree to Igloo Terms of Use and Privacy Policy'
+                  }));
+                }
+
+                return Promise.resolve();
+              }
+            }],
+            style: {
+              margin: 0
+            },
+            children: (0, _jsxRuntime.jsx)(_confirmation.default, _objectSpread({}, confirmation))
+          }), showSubmitButton && md && (0, _jsxRuntime.jsx)(_form.default.Item, {
+            style: {
+              marginBottom: 0
+            },
+            className: "igloo-hsteps-button-container",
+            children: (0, _jsxRuntime.jsx)(_button.default, {
+              type: "primary",
+              htmlType: "submit",
+              className: 'igloo-hsteps-button',
+              loading: submitting,
+              children: submitText || formatMessage({
+                id: 'Submit'
+              })
+            })
+          })]
+        })]
+      })]
+    }), showSubmitButton && current === renderElements.length && !md && (0, _jsxRuntime.jsx)(_form.default.Item, {
+      style: {
+        marginBottom: 0
+      },
+      className: "igloo-hsteps-button-container",
+      children: (0, _jsxRuntime.jsx)(_button.default, {
+        type: "primary",
+        htmlType: "submit",
+        className: 'igloo-hsteps-button',
+        loading: submitting,
+        children: submitText || formatMessage({
+          id: 'Submit'
+        })
+      })
+    })]
+  });
+};
+
+var _default = HSteps;
+exports.default = _default;

package/lib/form/hsteps/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/form/hsteps/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/form/hsteps/style/index.less

@@ -0,0 +1,72 @@
+.igloo-hsteps-container {
+  width: 100%;
+
+  .igloo-hsteps-bar {
+    display: flex;
+
+    .igloo-hsteps-bar-item {
+      text-align: center;
+      flex: auto;
+      border-bottom: 3px solid #eeeeee;
+      padding-bottom: 16px;
+
+      .igloo-hsteps-bar-item-icon {
+        color: @primary-color;
+        margin-right: 8px;
+        font-size: 24px;
+      }
+    }
+
+    .igloo-hsteps-bar-item-current {
+      border-bottom-color: @primary-color;
+    }
+  }
+
+  .igloo-hsteps-content {
+    width: 100%;
+
+    .igloo-hsteps-step {
+      width: 100%;
+    }
+
+    .igloo-hsteps-button {
+      margin-top: 24px;
+      min-width: 221px;
+    }
+
+    .igloo-hsteps-confirmation {
+      width: 100%;
+      padding: 32px;
+      background: #ffffff;
+      margin-top: 16px;
+      border-radius: 3px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .igloo-hsteps-container {
+    .igloo-hsteps-content {
+      width: 100%;
+
+      .igloo-hsteps-confirmation {
+        padding: 16px;
+      }
+    }
+
+    .igloo-hsteps-button-container {
+      width: 100%;
+      position: sticky;
+      bottom: 0;
+      box-shadow: 0px 0px 1px rgba(20, 20, 20, 0.04),
+        0px 1px 8px 2px rgba(20, 20, 20, 0.08);
+
+      padding: 24px 16px;
+      background: #ffffff;
+
+      .igloo-hsteps-button {
+        width: 100%;
+      }
+    }
+  }
+}

package/lib/form/index.js

@@ -19,6 +19,8 @@ var _page = _interopRequireDefault(require("./page"));
 
 var _steps = _interopRequireDefault(require("./steps"));
 
+var _hsteps = _interopRequireDefault(require("./hsteps"));
+
 var _login = _interopRequireDefault(require("./login"));
 
 var _formContext = _interopRequireDefault(require("../form-context"));
@@ -82,7 +84,9 @@ var IglooForm = function IglooForm(props, ref) {
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
       uploadApi = props.uploadApi,
-      selectDatasourceApi = props.selectDatasourceApi;
+      selectDatasourceApi = props.selectDatasourceApi,
+      _props$stepDirection = props.stepDirection,
+      stepDirection = _props$stepDirection === void 0 ? 'vertical' : _props$stepDirection;
 
   var _Form$useForm = _form.default.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -93,21 +97,18 @@ var IglooForm = function IglooForm(props, ref) {
       submitting = _useState2[0],
       setSubmitting = _useState2[1];
 
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      dependents = _useState4[0],
-      setDependents = _useState4[1];
+  var dependents = (0, _react.useRef)({});
 
-  var _useState5 = (0, _react.useState)(formProp || innerForm),
-      _useState6 = _slicedToArray(_useState5, 1),
-      form = _useState6[0];
+  var _useState3 = (0, _react.useState)(formProp || innerForm),
+      _useState4 = _slicedToArray(_useState3, 1),
+      form = _useState4[0];
 
   var type = config.type;
 
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      firstModifiedCalled = _useState8[0],
-      callFirstModified = _useState8[1];
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      firstModifiedCalled = _useState6[0],
+      callFirstModified = _useState6[1];
 
   (0, _invariant.default)(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
 
@@ -193,35 +194,24 @@ 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;
+      field.forEach(function (name) {
+        var key = Array.isArray(name) ? name.join() : name;
 
-          if (!newDeps[key]) {
-            newDeps[key] = [];
-          }
+        if (!dependents.current[key]) {
+          dependents.current[key] = [];
+        }
 
-          newDeps[key].push(updater);
-        });
-        return newDeps;
+        dependents.current[key].push(updater);
       });
-      return;
     }
 
-    setDependents(function (deps) {
-      var newDeps = _objectSpread({}, deps);
+    var key = Array.isArray(field) ? field.join() : field;
 
-      var key = Array.isArray(field) ? field.join() : field;
-
-      if (!newDeps[key]) {
-        newDeps[key] = [];
-      }
+    if (!dependents.current[key]) {
+      dependents.current[key] = [];
+    }
 
-      newDeps[key].push(updater);
-      return newDeps;
-    });
+    dependents.current[key].push(updater);
   };
 
   var handleValuesChange = function handleValuesChange(changedFields) {
@@ -234,14 +224,14 @@ var IglooForm = function IglooForm(props, ref) {
     var changedField = changedFields[0].name;
     var changedKey = Array.isArray(changedField) ? changedField.join() : changedField;
 
-    if (dependents[changedKey]) {
-      dependents[changedKey].forEach(function (updater) {
+    if (dependents.current[changedKey]) {
+      dependents.current[changedKey].forEach(function (updater) {
         return updater();
       });
     }
 
-    if (dependents['SUBSCRIBE_ALL']) {
-      dependents['SUBSCRIBE_ALL'].forEach(function (updater) {
+    if (dependents.current['SUBSCRIBE_ALL']) {
+      dependents.current['SUBSCRIBE_ALL'].forEach(function (updater) {
         return updater();
       });
     }
@@ -277,7 +267,9 @@ var IglooForm = function IglooForm(props, ref) {
           config: config
         }), type === 'Page' && (0, _jsxRuntime.jsx)(_page.default, {
           config: config
-        }), type === 'Steps' && (0, _jsxRuntime.jsx)(_steps.default, {
+        }), type === 'Steps' && stepDirection === 'vertical' && (0, _jsxRuntime.jsx)(_steps.default, {
+          config: config
+        }), type === 'Steps' && stepDirection === 'horizontal' && (0, _jsxRuntime.jsx)(_hsteps.default, {
           config: config
         }), type === 'Login' && (0, _jsxRuntime.jsx)(_login.default, {
           config: config

package/lib/form/section/index.d.ts

@@ -8,6 +8,8 @@ export interface SectionProps {
     config: FormItemConfig;
     preview?: boolean;
     disabled?: boolean;
+    collapsable?: boolean;
+    defaultCollapsed?: boolean;
     setShowStepButton?: (showButton: boolean) => void;
 }
 declare const Section: FC<SectionProps>;