iglooform 2.5.6 → 2.5.9

package/es/form/hsteps/index.js

@@ -0,0 +1,407 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/divider/style";
+import _Divider from "antd/es/divider";
+import "antd/es/grid/style";
+import _Grid from "antd/es/grid";
+
+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; }
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useContext, useEffect, useReducer, useRef } from 'react';
+import HStep from '../hstep';
+import { calcNamePath } from '../../utils/form-utils';
+import FormContext from '../../form-context';
+import StepContext from '../../form-step-context';
+import './style/index.less';
+import invariant from 'invariant';
+import Confirmation from '../../confirmation';
+import { LocaleContext } from '../../locale';
+import Typography from '../../typography';
+import Button from '../../button';
+import Radio from '../../radio';
+import { SuccessFilled } from 'iglooicon';
+import classNames from 'classnames';
+var useBreakpoint = _Grid.useBreakpoint;
+
+var HSteps = function HSteps(_ref) {
+  var _renderElements$curre2, _renderElements$curre3;
+
+  var 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,
+      confirmations = _ref$config.confirmations,
+      _ref$config$withRevie = _ref$config.withReview,
+      withReview = _ref$config$withRevie === void 0 ? true : _ref$config$withRevie,
+      name = _ref$config.name;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      last = _useState4[0],
+      setLast = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      shouldScroll = _useState6[0],
+      setShouldScroll = _useState6[1];
+
+  var _useReducer = useReducer(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useBreakpoint = useBreakpoint(),
+      md = _useBreakpoint.md;
+
+  var sections = useRef(new Map());
+
+  var _useContext = useContext(FormContext),
+      form = _useContext.form,
+      registerDependencies = _useContext.registerDependencies,
+      submitText = _useContext.submitText,
+      submitting = _useContext.submitting,
+      showSubmitButton = _useContext.showSubmitButton;
+
+  var _useContext2 = useContext(LocaleContext),
+      formatMessage = _useContext2.formatMessage;
+
+  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);
+    }
+  }, []);
+  useEffect(function () {
+    if (currentStep === undefined || currentStep === current) return;
+    setCurrent(currentStep);
+  }, [currentStep]);
+  var renderElements = elements.filter(function (step) {
+    invariant(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 = 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 _jsxs("div", {
+    className: 'igloo-hsteps-container',
+    children: [md && _jsxs("div", {
+      className: 'igloo-hsteps-bar',
+      children: [renderElements.map(function (step, index) {
+        return _jsxs("div", {
+          className: classNames({
+            'igloo-hsteps-bar-item': true,
+            'igloo-hsteps-bar-item-current': index === current
+          }),
+          children: [index < current && _jsx(SuccessFilled, {
+            className: 'igloo-hsteps-bar-item-icon'
+          }), _jsx(Typography, {
+            level: "h3a",
+            className: 'igloo-hsteps-bar-item-text',
+            children: step.label
+          })]
+        });
+      }), withReview && _jsxs("div", {
+        className: classNames({
+          'igloo-hsteps-bar-item': true,
+          'igloo-hsteps-bar-item-current': current === renderElements.length
+        }),
+        children: [current === renderElements.length && _jsx(Radio, {
+          checked: true
+        }), _jsx(Typography, {
+          level: "h3a",
+          className: 'igloo-hsteps-bar-item-text',
+          children: formatMessage({
+            id: 'Review and Submit'
+          })
+        })]
+      })]
+    }), _jsxs("div", {
+      className: "igloo-hsteps-content",
+      children: [current < renderElements.length && _jsx(StepContext.Provider, {
+        value: {
+          registerSection: registerSection
+        },
+        children: _jsx(HStep, {
+          config: renderElements[current],
+          parentName: 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 && _jsxs("div", {
+        className: "igloo-hsteps-confirmation-container",
+        children: [withReview && !md && _jsxs(Typography, {
+          className: "igloo-hstep-label",
+          level: "h3a",
+          children: [_jsx("span", {
+            className: "igloo-hstep-label-text",
+            children: formatMessage({
+              id: 'Review and Submit'
+            })
+          }), _jsxs(Typography, {
+            level: "body3",
+            children: [renderElements.length + 1, "/", renderElements.length + 1]
+          })]
+        }), renderElements.map(function (step, index) {
+          return _jsx(HStep, {
+            config: step,
+            parentName: 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));
+        }), _jsxs("div", {
+          className: "igloo-hsteps-confirmation",
+          children: [md && _jsx(Typography, {
+            level: "h3a",
+            wrapElement: "div",
+            children: formatMessage({
+              id: 'Review and Submit'
+            })
+          }), _jsx(Typography, {
+            level: md ? 'h3b' : 'body1',
+            style: {
+              marginTop: 24
+            },
+            wrapElement: "div",
+            children: formatMessage({
+              id: 'Please take a moment to review what you’ve told us above.'
+            })
+          }), _jsx(Typography, {
+            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.'
+            })
+          }), _jsx(_Divider, {}), !confirmations && _jsx(_Form.Item, {
+            name: 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: _jsx(Confirmation, {})
+          }), confirmations && Object.entries(confirmations).map(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+                key = _ref7[0],
+                _ref7$ = _ref7[1],
+                required = _ref7$.required,
+                _ref7$$confirmation = _ref7$.confirmation,
+                confirmation = _ref7$$confirmation === void 0 ? {} : _ref7$$confirmation;
+
+            return _jsx(_Form.Item, {
+              name: calcNamePath(parentName, key),
+              rules: [{
+                validator: function validator(_, value) {
+                  if (required && !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: _jsx(Confirmation, _objectSpread({}, confirmation))
+            });
+          }), showSubmitButton && md && _jsx(_Form.Item, {
+            style: {
+              marginBottom: 0
+            },
+            className: "igloo-hsteps-button-container",
+            children: _jsx(Button, {
+              type: "primary",
+              htmlType: "submit",
+              className: 'igloo-hsteps-button',
+              loading: submitting,
+              children: submitText || formatMessage({
+                id: 'Submit'
+              })
+            })
+          })]
+        })]
+      })]
+    }), showSubmitButton && current === renderElements.length && !md && _jsx(_Form.Item, {
+      style: {
+        marginBottom: 0
+      },
+      className: "igloo-hsteps-button-container",
+      children: _jsx(Button, {
+        type: "primary",
+        htmlType: "submit",
+        className: 'igloo-hsteps-button',
+        loading: submitting,
+        children: submitText || formatMessage({
+          id: 'Submit'
+        })
+      })
+    })]
+  });
+};
+
+export default HSteps;

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

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

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

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

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

@@ -0,0 +1,78 @@
+.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-confirmation-container {
+      background: #f9f9f9;
+      padding: 0;
+      margin: 0;
+    }
+
+    .igloo-hsteps-button {
+      margin-top: 24px;
+      min-width: 221px;
+    }
+
+    .igloo-hsteps-confirmation {
+      width: 100%;
+      padding: 32px;
+      background: #ffffff;
+      margin-top: 32px;
+      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/es/form/index.js

@@ -29,10 +29,11 @@ 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, useImperativeHandle, forwardRef } from 'react';
+import { useState, useImperativeHandle, forwardRef, useRef } from 'react';
 import Pages from './pages';
 import Page from './page';
 import Steps from './steps';
+import HSteps from './hsteps';
 import Login from './login';
 import FormContext from '../form-context';
 import messages from './messages';
@@ -61,7 +62,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.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -72,21 +75,18 @@ var IglooForm = function IglooForm(props, ref) {
       submitting = _useState2[0],
       setSubmitting = _useState2[1];
 
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      dependents = _useState4[0],
-      setDependents = _useState4[1];
+  var dependents = useRef({});
 
-  var _useState5 = useState(formProp || innerForm),
-      _useState6 = _slicedToArray(_useState5, 1),
-      form = _useState6[0];
+  var _useState3 = useState(formProp || innerForm),
+      _useState4 = _slicedToArray(_useState3, 1),
+      form = _useState4[0];
 
   var type = config.type;
 
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      firstModifiedCalled = _useState8[0],
-      callFirstModified = _useState8[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      firstModifiedCalled = _useState6[0],
+      callFirstModified = _useState6[1];
 
   invariant(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
 
@@ -172,35 +172,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) {
@@ -213,14 +202,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();
       });
     }
@@ -256,7 +245,9 @@ var IglooForm = function IglooForm(props, ref) {
           config: config
         }), type === 'Page' && _jsx(Page, {
           config: config
-        }), type === 'Steps' && _jsx(Steps, {
+        }), type === 'Steps' && stepDirection === 'vertical' && _jsx(Steps, {
+          config: config
+        }), type === 'Steps' && stepDirection === 'horizontal' && _jsx(HSteps, {
           config: config
         }), type === 'Login' && _jsx(Login, {
           config: config

package/es/form/pages/index.js

@@ -32,9 +32,9 @@ import Typography from '../../typography';
 var useBreakpoint = _Grid.useBreakpoint;
 
 var Pages = function Pages(_ref) {
-  var name = _ref.name,
-      parentName = _ref.parentName,
+  var parentName = _ref.parentName,
       _ref$config = _ref.config,
+      name = _ref$config.name,
       _ref$config$elements = _ref$config.elements,
       elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
       subscribedFields = _ref$config.subscribedFields;

package/es/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>;