@kne/form-info 0.1.0-alpha.2 → 0.1.1

package/dist/index.modern.js

@@ -2,13 +2,14 @@ import '@kne/info-page/dist/index.css';
 import '@kne/react-form-antd/dist/index.css';
 import { FormAntd, CancelButton, SubmitButton } from '@kne/react-form-antd';
 export * from '@kne/react-form-antd';
-import React, { forwardRef, isValidElement, useRef, createContext, useContext as useContext$1 } from 'react';
+import { forwardRef, isValidElement, useRef, createElement, createContext, useContext } from 'react';
 import InfoPage from '@kne/info-page';
 import { useFlexBox } from '@kne/flex-box';
 import { FormInfo as FormInfo$1, SubList, MultiField as MultiField$1, TableList as TableList$1 } from '@kne/react-form-plus';
 import { Col, Row, Empty, Button, Divider, Modal, Flex, Steps } from 'antd';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
-import { useContext } from '@kne/global-context';
+import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import useControlValue from '@kne/use-control-value';
 
 function _extends() {
@@ -24,7 +25,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -112,7 +113,7 @@ var classnames = createCommonjsModule(function (module) {
 }());
 });
 
-var style = {"form-outer":"_ZQNNL","form-info":"_GW4Xx","extra-btn":"_eY4qR","list-part":"_SL3dC","list-item":"_PNnMa","is-important":"_Xkp38","list-item-part":"_HiB5Q","table-list-inner":"_Uw-3T","multi-field-item":"_uogqr","react-form__field-label":"_UGjS9","multi-field-add-btn":"_rjVPh","table-list":"_r8-bn","table-list-field":"_Qkutm","table-list-header":"_9WdfD","is-req":"_CsPaL","table-options":"_8smwK","steps":"_IOdkE","steps-form-inner":"_uc1HZ","steps-modal":"_vWPQO"};
+var style = {"form-outer":"_ZQNNL","form-info":"_GW4Xx","extra-btn":"_eY4qR","list-part":"_SL3dC","list-item":"_PNnMa","is-important":"_Xkp38","list-item-part":"_HiB5Q","table-list-inner":"_Uw-3T","multi-field-item":"_uogqr","react-form__field-label":"_UGjS9","multi-field-add-btn":"_rjVPh","table-list":"_r8-bn","table-list-field":"_Qkutm","table-list-header":"_9WdfD","is-req":"_CsPaL","table-options":"_8smwK","steps":"_IOdkE","steps-form-inner":"_uc1HZ","steps-modal":"_vWPQO","table-list-empty":"_DXskv"};
 
 const _excluded$7 = ["className", "column", "list", "gap"];
 const FormInfo = props => {
@@ -133,7 +134,7 @@ const FormInfo = props => {
     column: flexBoxColumn
   } = useFlexBox(isFlexBox ? column : {});
   const renderInner = (column, notLayout) => {
-    return /*#__PURE__*/React.createElement(FormInfo$1, {
+    return /*#__PURE__*/jsx(FormInfo$1, {
       list: list,
       column: column,
       className: classnames({
@@ -141,20 +142,24 @@ const FormInfo = props => {
       }),
       itemRender: (children, props) => {
         if (props.hidden) {
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/jsx("div", {
             style: {
               display: 'none'
-            }
-          }, children);
+            },
+            children: children
+          });
         }
-        return /*#__PURE__*/React.createElement(Col, {
-          span: props.span
-        }, children);
+        return /*#__PURE__*/jsx(Col, {
+          span: props.span,
+          children: children
+        });
+      },
+      children: children => {
+        return /*#__PURE__*/jsx(Row, {
+          gutter: [gap || 24, 0],
+          children: children
+        });
       }
-    }, children => {
-      return /*#__PURE__*/React.createElement(Row, {
-        gutter: [gap || 24, 0]
-      }, children);
     });
   };
   const renderColumn = () => {
@@ -166,34 +171,60 @@ const FormInfo = props => {
     }
     return renderInner(2, true);
   };
-  return /*#__PURE__*/React.createElement(InfoPage.Part, _extends({}, others, {
-    className: classnames(className, style['form-info'])
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: flexBoxRef
-  }), renderColumn());
+  return /*#__PURE__*/jsxs(InfoPage.Part, _extends({}, others, {
+    className: classnames(className, style['form-info']),
+    children: [/*#__PURE__*/jsx("div", {
+      ref: flexBoxRef
+    }), renderColumn()]
+  }));
+};
+
+const locale$1 = {
+  submit: '提交',
+  cancel: '取消',
+  complete: '完成',
+  next: '下一步',
+  addText: '添加',
+  deleteText: '删除'
 };
 
+const locale = {
+  submit: 'Submit',
+  cancel: 'Cancel',
+  complete: 'Complete',
+  next: 'Next',
+  addText: 'Add',
+  deleteText: 'Delete'
+};
+
+const withLocale = createWithIntlProvider({
+  defaultLocale: 'zh-CN',
+  messages: {
+    'zh-CN': locale$1,
+    'en-US': locale
+  },
+  namespace: 'form-info'
+});
+
 const _excluded$6 = ["className", "itemClassName", "removeIcon", "removeText", "addText", "addIcon", "important", "title"],
   _excluded2$2 = ["id", "allowRemove", "onRemove", "index", "groupArgs"];
-const List = p => {
+const List = withLocale(p => {
   const {
-    locale: contextLocale
-  } = useContext();
-  const locale = Object.assign({}, {
-    添加: '添加',
-    删除: '删除'
-  }, contextLocale, p.locale);
+    formatMessage
+  } = useIntl();
   const _Object$assign = Object.assign({}, {
-      addText: locale['添加'],
-      addIcon: /*#__PURE__*/React.createElement(PlusOutlined, null),
-      removeText: locale['删除'],
-      removeIcon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
-      empty: /*#__PURE__*/React.createElement(Empty, {
+      addText: formatMessage({
+        id: 'addText'
+      }),
+      addIcon: /*#__PURE__*/jsx(PlusOutlined, {}),
+      removeText: formatMessage({
+        id: 'deleteText'
+      }),
+      removeIcon: /*#__PURE__*/jsx(DeleteOutlined, {}),
+      empty: /*#__PURE__*/jsx(Empty, {
         description: false
       })
-    }, p, {
-      locale
-    }),
+    }, p),
     {
       className,
       itemClassName,
@@ -205,7 +236,7 @@ const List = p => {
       title
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$6);
-  return /*#__PURE__*/React.createElement(SubList, _extends({}, others, {
+  return /*#__PURE__*/jsx(SubList, _extends({}, others, {
     className: classnames(className, style['list-part']),
     listRender: _ref => {
       let {
@@ -214,58 +245,59 @@ const List = p => {
           onRemove
         } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded2$2);
-      return /*#__PURE__*/React.createElement("div", {
-        key: id,
+      return /*#__PURE__*/jsxs("div", {
         className: classnames(style['list-item'], {
           [style['is-important']]: important
-        })
-      }, /*#__PURE__*/React.createElement(FormInfo, _extends({}, props, {
-        className: style['list-item-part'],
-        gap: 16,
-        extra: allowRemove && /*#__PURE__*/React.createElement(Button, {
-          type: "link",
-          danger: true,
-          className: "btn-no-padding",
-          icon: removeIcon,
-          onClick: onRemove
-        }, removeText)
-      })), /*#__PURE__*/React.createElement(Divider, null));
+        }),
+        children: [/*#__PURE__*/jsx(FormInfo, _extends({}, props, {
+          className: style['list-item-part'],
+          gap: 16,
+          extra: allowRemove && /*#__PURE__*/jsx(Button, {
+            type: "link",
+            danger: true,
+            className: "btn-no-padding",
+            icon: removeIcon,
+            onClick: onRemove,
+            children: removeText
+          })
+        })), /*#__PURE__*/jsx(Divider, {})]
+      }, id);
+    },
+    children: (children, {
+      allowAdd,
+      onAdd
+    }) => {
+      return /*#__PURE__*/jsx(InfoPage.Part, {
+        className: itemClassName,
+        title: title,
+        extra: allowAdd && /*#__PURE__*/jsx(Button, {
+          className: style['extra-btn'],
+          icon: addIcon,
+          onClick: onAdd,
+          children: addText
+        }),
+        children: children
+      });
     }
-  }), (children, {
-    allowAdd,
-    onAdd
-  }) => {
-    return /*#__PURE__*/React.createElement(InfoPage.Part, {
-      className: itemClassName,
-      title: title,
-      extra: allowAdd && /*#__PURE__*/React.createElement(Button, {
-        className: style['extra-btn'],
-        icon: addIcon,
-        onClick: onAdd
-      }, addText)
-    }, children);
-  });
-};
+  }));
+});
 
 const _excluded$5 = ["className", "addText", "addIcon", "removeIcon", "removeText"];
-const MultiField = p => {
+const MultiField = withLocale(p => {
   const {
-    locale: contextLocale
-  } = useContext();
-  const locale = Object.assign({}, {
-    添加: '添加'
-  }, contextLocale, p.locale);
+    formatMessage
+  } = useIntl();
   const _Object$assign = Object.assign({}, {
-      addText: locale['添加'],
-      addIcon: /*#__PURE__*/React.createElement(PlusOutlined, null),
-      removeIcon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
+      addText: formatMessage({
+        id: 'addText'
+      }),
+      addIcon: /*#__PURE__*/jsx(PlusOutlined, {}),
+      removeIcon: /*#__PURE__*/jsx(DeleteOutlined, {}),
       removeText: null,
-      empty: /*#__PURE__*/React.createElement(Empty, {
+      empty: /*#__PURE__*/jsx(Empty, {
         description: false
       })
-    }, p, {
-      locale
-    }),
+    }, p),
     {
       className,
       addText,
@@ -274,56 +306,61 @@ const MultiField = p => {
       removeText
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$5);
-  return /*#__PURE__*/React.createElement(MultiField$1, _extends({}, others, {
+  return /*#__PURE__*/jsx(MultiField$1, _extends({}, others, {
     itemRender: (children, {
       id,
       allowRemove,
       onRemove
     }) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: id,
-        className: classnames('multi-field-item', style['multi-field-item'])
-      }, children, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: classnames(style['react-form__field-label'], 'react-form__field-label', 'multi-field-delete-label')
-      }), /*#__PURE__*/React.createElement(Button, {
-        icon: removeIcon,
-        onClick: onRemove,
-        disabled: !allowRemove
-      }, typeof removeText === 'function' ? removeText(others.label) : removeText)));
-    }
-  }), (children, {
-    allowAdd,
-    onAdd
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: classnames(className, 'multi-field', style['multi-field'])
-  }, children, allowAdd && /*#__PURE__*/React.createElement(Button, {
-    className: classnames('multi-field-add-btn', style['multi-field-add-btn']),
-    type: "dashed",
-    onClick: onAdd,
-    icon: addIcon
-  }, typeof addText === 'function' ? addText(others.label) : `${addText}${others.label}`)));
-};
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames('multi-field-item', style['multi-field-item']),
+        children: [children, /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(style['react-form__field-label'], 'react-form__field-label', 'multi-field-delete-label')
+          }), /*#__PURE__*/jsx(Button, {
+            icon: removeIcon,
+            onClick: onRemove,
+            disabled: !allowRemove,
+            children: typeof removeText === 'function' ? removeText(others.label) : removeText
+          })]
+        })]
+      }, id);
+    },
+    children: (children, {
+      allowAdd,
+      onAdd
+    }) => /*#__PURE__*/jsxs("div", {
+      className: classnames(className, 'multi-field', style['multi-field']),
+      children: [children, allowAdd && /*#__PURE__*/jsx(Button, {
+        className: classnames('multi-field-add-btn', style['multi-field-add-btn']),
+        type: "dashed",
+        onClick: onAdd,
+        icon: addIcon,
+        children: typeof addText === 'function' ? addText(others.label) : `${addText}${others.label}`
+      })]
+    })
+  }));
+});
 
 const _excluded$4 = ["className", "addIcon", "addText", "removeIcon", "removeText", "title"];
-const TableList = p => {
+const TableList = withLocale(p => {
   const {
-    locale: contextLocale
-  } = useContext();
-  const locale = Object.assign({}, {
-    添加: '添加',
-    删除: '删除'
-  }, contextLocale, p.locale);
+    formatMessage
+  } = useIntl();
   const _Object$assign = Object.assign({}, {
-      empty: /*#__PURE__*/React.createElement(Empty, {
-        description: false
+      empty: /*#__PURE__*/jsx(Empty, {
+        description: false,
+        className: style['table-list-empty']
       }),
-      addIcon: /*#__PURE__*/React.createElement(PlusOutlined, null),
-      addText: locale['添加'],
-      removeIcon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
-      removeText: locale['删除']
-    }, p, {
-      locale
-    }),
+      addIcon: /*#__PURE__*/jsx(PlusOutlined, {}),
+      addText: formatMessage({
+        id: 'addText'
+      }),
+      removeIcon: /*#__PURE__*/jsx(DeleteOutlined, {}),
+      removeText: formatMessage({
+        id: 'deleteText'
+      })
+    }, p),
     {
       className,
       addIcon,
@@ -333,36 +370,38 @@ const TableList = p => {
       title
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$4);
-  return /*#__PURE__*/React.createElement(TableList$1, _extends({}, others, {
+  return /*#__PURE__*/jsx(TableList$1, _extends({}, others, {
     headerRender: (children, {
       width
     }) => {
-      return /*#__PURE__*/React.createElement(Row, {
+      return /*#__PURE__*/jsxs(Row, {
         className: style['table-list-header'],
         wrap: false,
         style: {
           '--col-width': width
-        }
-      }, children, /*#__PURE__*/React.createElement(Col, {
-        className: style['table-options']
-      }));
+        },
+        children: [children, /*#__PURE__*/jsx(Col, {
+          className: style['table-options']
+        })]
+      });
     },
     headerItemRender: (children, {
       id,
       isReq
     }) => {
-      return /*#__PURE__*/React.createElement(Col, {
+      return /*#__PURE__*/jsx(Col, {
         className: classnames({
           [style['is-req']]: isReq
         }),
-        key: id
-      }, children);
+        children: children
+      }, id);
     },
     itemRender: children => {
-      return /*#__PURE__*/React.createElement(Col, {
+      return /*#__PURE__*/jsx(Col, {
         className: style['table-list-field'],
-        flex: 1
-      }, children);
+        flex: 1,
+        children: children
+      });
     },
     listRender: (children, {
       id,
@@ -370,43 +409,49 @@ const TableList = p => {
       onRemove,
       allowRemove
     }) => {
-      return /*#__PURE__*/React.createElement(Row, {
-        key: id,
+      return /*#__PURE__*/jsxs(Row, {
         wrap: false,
         align: "top",
         style: {
           '--col-width': width
-        }
-      }, children, /*#__PURE__*/React.createElement(Col, {
-        className: style['table-options']
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        onClick: onRemove,
-        danger: true,
-        disabled: !allowRemove,
-        icon: removeIcon
-      }, removeText)));
+        },
+        children: [children, /*#__PURE__*/jsx(Col, {
+          className: style['table-options'],
+          children: /*#__PURE__*/jsx(Button, {
+            type: "link",
+            onClick: onRemove,
+            danger: true,
+            disabled: !allowRemove,
+            icon: removeIcon,
+            children: removeText
+          })
+        })]
+      }, id);
+    },
+    children: (children, {
+      onAdd,
+      allowAdd
+    }) => {
+      return /*#__PURE__*/jsx(InfoPage.Part, {
+        title: title,
+        className: classnames(className, style['table-list']),
+        extra: allowAdd && /*#__PURE__*/jsx(Button, {
+          className: style['extra-btn'],
+          icon: addIcon,
+          onClick: onAdd,
+          children: addText
+        }),
+        children: /*#__PURE__*/jsx("div", {
+          className: style['table-list-inner'],
+          children: children
+        })
+      });
     }
-  }), (children, {
-    onAdd,
-    allowAdd
-  }) => {
-    return /*#__PURE__*/React.createElement(InfoPage.Part, {
-      title: title,
-      className: classnames(className, style['table-list']),
-      extra: allowAdd && /*#__PURE__*/React.createElement(Button, {
-        className: style['extra-btn'],
-        icon: addIcon,
-        onClick: onAdd
-      }, addText)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style['table-list-inner']
-    }, children));
-  });
-};
+  }));
+});
 
 const _excluded$3 = ["className", "children"];
-const Form = forwardRef((props, ref) => {
+const Form = /*#__PURE__*/forwardRef((props, ref) => {
   const _Object$assign = Object.assign({}, {
       type: 'inner'
     }, props),
@@ -415,10 +460,13 @@ const Form = forwardRef((props, ref) => {
       children
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$3);
-  return /*#__PURE__*/React.createElement(FormAntd, _extends({}, others, {
+  return /*#__PURE__*/jsx(FormAntd, _extends({}, others, {
     ref: ref,
-    className: classnames(className, style['form-outer'])
-  }), /*#__PURE__*/React.createElement(InfoPage, null, children));
+    className: classnames(className, style['form-outer']),
+    children: /*#__PURE__*/jsx(InfoPage, {
+      children: children
+    })
+  }));
 });
 
 /**
@@ -3676,24 +3724,30 @@ const ModalFooter = props => {
       okText
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded$2);
-  const defaultFooter = /*#__PURE__*/React.createElement(Flex, {
+  const defaultFooter = /*#__PURE__*/jsxs(Flex, {
     justify: "space-between",
-    gap: 8
-  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement(Flex, {
-    gap: 8
-  }, /*#__PURE__*/React.createElement(CancelButton, Object.assign({}, cancelButtonProps, {
-    onClick: others.onCancel
-  }), cancelText), /*#__PURE__*/React.createElement(SubmitButton, Object.assign({}, okButtonProps, {
-    type: okType,
-    onClick: onOk
-  }), okText)));
+    gap: 8,
+    children: [/*#__PURE__*/jsx("div", {}), /*#__PURE__*/jsxs(Flex, {
+      gap: 8,
+      children: [/*#__PURE__*/jsx(CancelButton, _extends({}, Object.assign({}, cancelButtonProps, {
+        onClick: others.onCancel
+      }), {
+        children: cancelText
+      })), /*#__PURE__*/jsx(SubmitButton, _extends({}, Object.assign({}, okButtonProps, {
+        type: okType,
+        onClick: onOk
+      }), {
+        children: okText
+      }))]
+    })]
+  });
   if (typeof children === 'function') {
     return children({
       defaultFooter,
       props: omit_1(props, ['children'])
     });
   }
-  if (isValidElement(children) || children === null) {
+  if (/*#__PURE__*/isValidElement(children) || children === null) {
     return children;
   }
   return defaultFooter;
@@ -3706,7 +3760,7 @@ const ModalForm = props => {
       modalRender
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded2$1);
-  const formChildren = /*#__PURE__*/React.createElement(Form, Object.assign({}, formProps, {
+  const formChildren = /*#__PURE__*/jsx(Form, _extends({}, Object.assign({}, formProps, {
     onSubmit: async (data, ...args) => {
       const res = await (formProps.onSubmit == null ? void 0 : formProps.onSubmit(data, {
         close: others.onCancel
@@ -3716,31 +3770,31 @@ const ModalForm = props => {
       }
       autoClose && others.onCancel && others.onCancel();
     }
-  }), children);
+  }), {
+    children: children
+  }));
   return typeof modalRender === 'function' ? modalRender({
     formChildren,
     defaultChildren: children,
     props: omit_1(props, ['children'])
   }) : formChildren;
 };
-const FormModal = p => {
+const FormModal = withLocale(p => {
   const {
-    locale: contextLocale
-  } = useContext();
-  const locale = Object.assign({}, {
-    提交: '提交',
-    取消: '取消'
-  }, contextLocale, p.locale);
+    formatMessage
+  } = useIntl();
   const _Object$assign = Object.assign({}, {
       formProps: {},
       autoClose: true,
       okType: 'primary',
-      okText: locale['提交'],
-      cancelText: locale['取消'],
-      renderModal: props => /*#__PURE__*/React.createElement(Modal, props)
-    }, p, {
-      locale
-    }),
+      okText: formatMessage({
+        id: 'submit'
+      }),
+      cancelText: formatMessage({
+        id: 'cancel'
+      }),
+      renderModal: props => /*#__PURE__*/jsx(Modal, _extends({}, props))
+    }, p),
     {
       formProps,
       okType,
@@ -3756,14 +3810,14 @@ const FormModal = p => {
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded3$1);
   return renderModal(Object.assign({}, others, {
-    modalRender: children => /*#__PURE__*/React.createElement(ModalForm, Object.assign({}, others, {
+    modalRender: children => /*#__PURE__*/jsx(ModalForm, _extends({}, Object.assign({}, others, {
       formProps,
       autoClose,
       children,
       modalRender
-    })),
+    }))),
     footer: () => {
-      return /*#__PURE__*/React.createElement(ModalFooter, Object.assign({}, others, {
+      return /*#__PURE__*/jsx(ModalFooter, _extends({}, Object.assign({}, others, {
         children: footer,
         cancelText,
         cancelButtonProps,
@@ -3771,14 +3825,14 @@ const FormModal = p => {
         okType,
         onOk,
         okText
-      }));
+      })));
     }
   }));
-};
+});
 
 const _excluded$1 = ["className", "stepsClassName", "autoStep", "onComplete", "children"];
 const FormSteps = p => {
-  var _stepProps$items$curr, _stepProps$items$curr2;
+  var _stepProps$items$curr, _stepProps$items$curr2, _stepCacheRef$current, _stepProps$items$curr3;
   const _Object$assign = Object.assign({}, {
       autoStep: true,
       defaultCurrent: 0,
@@ -3799,19 +3853,23 @@ const FormSteps = p => {
   });
   const stepCacheRef = useRef([]);
   const isLastStep = currentStep === stepProps.items.length - 1;
-  const currentFormProps = Object.assign({}, (_stepProps$items$curr = stepProps.items[currentStep]) == null ? void 0 : _stepProps$items$curr.formProps);
-  const inner = /*#__PURE__*/React.createElement(Flex, {
+  const currentFormProps = Object.assign({}, (_stepProps$items$curr = stepProps.items[currentStep]) == null ? void 0 : _stepProps$items$curr.formProps, {
+    data: Object.assign({}, (_stepProps$items$curr2 = stepProps.items[currentStep]) == null || (_stepProps$items$curr2 = _stepProps$items$curr2.formProps) == null ? void 0 : _stepProps$items$curr2.data, (_stepCacheRef$current = stepCacheRef.current[currentStep]) == null ? void 0 : _stepCacheRef$current.formData)
+  });
+  const inner = /*#__PURE__*/jsxs(Flex, {
     className: className,
-    vertical: stepProps.direction !== 'vertical',
-    gap: 24
-  }, /*#__PURE__*/React.createElement(Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange']), {
-    className: classnames(stepsClassName, style['steps']),
-    items: stepProps.items.map(item => omit_1(item, ['formProps'])),
-    current: currentStep
-  })), /*#__PURE__*/React.createElement("div", {
-    className: style['steps-form-inner']
-  }, (_stepProps$items$curr2 = stepProps.items[currentStep]) == null ? void 0 : _stepProps$items$curr2.children));
-  return /*#__PURE__*/React.createElement(Form, Object.assign({}, currentFormProps, {
+    vertical: stepProps.direction !== 'vertical' || stepProps.orientation !== 'vertical',
+    gap: 24,
+    children: [/*#__PURE__*/jsx(Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange']), {
+      className: classnames(stepsClassName, style['steps']),
+      items: stepProps.items.map(item => omit_1(item, ['formProps'])),
+      current: currentStep
+    })), /*#__PURE__*/jsx("div", {
+      className: style['steps-form-inner'],
+      children: (_stepProps$items$curr3 = stepProps.items[currentStep]) == null ? void 0 : _stepProps$items$curr3.children
+    })]
+  });
+  return /*#__PURE__*/createElement(Form, _extends({}, Object.assign({}, currentFormProps, {
     onSubmit: async (data, ...args) => {
       if (!stepCacheRef.current[currentStep]) {
         stepCacheRef.current[currentStep] = {};
@@ -3834,6 +3892,8 @@ const FormSteps = p => {
       }
       return res;
     }
+  }), {
+    key: currentStep
   }), typeof children === 'function' ? children({
     children: inner,
     isLastStep,
@@ -4216,12 +4276,12 @@ var merge_1 = merge;
 const _excluded = ["completeText", "nextText"],
   _excluded2 = ["modalProps", "completeText", "nextText", "className"],
   _excluded3 = ["children"];
-const childrenContext = createContext({});
+const childrenContext = /*#__PURE__*/createContext({});
 const {
   Provider
 } = childrenContext;
 const useChildrenContext = () => {
-  return useContext$1(childrenContext);
+  return useContext(childrenContext);
 };
 const StepChildren = () => {
   const {
@@ -4239,25 +4299,26 @@ const StepFormFooter = p => {
   const {
     isLastStep
   } = useChildrenContext();
-  return /*#__PURE__*/React.createElement(ModalFooter, _extends({}, props, {
+  return /*#__PURE__*/jsx(ModalFooter, _extends({}, props, {
     okText: isLastStep ? completeText : nextText
   }));
 };
-const FormStepsModal = p => {
-  const locale = Object.assign({}, {
-    完成: '完成',
-    下一步: '下一步'
-  }, p.locale);
+const FormStepsModal = withLocale(p => {
+  const {
+    formatMessage
+  } = useIntl();
   const _merge = merge_1({}, {
       autoStep: true,
       modalProps: {
         autoClose: true
       },
-      completeText: locale['完成'],
-      nextText: locale['下一步']
-    }, p, {
-      locale
-    }),
+      completeText: formatMessage({
+        id: 'complete'
+      }),
+      nextText: formatMessage({
+        id: 'next'
+      })
+    }, p),
     {
       modalProps,
       completeText,
@@ -4265,11 +4326,11 @@ const FormStepsModal = p => {
       className
     } = _merge,
     others = _objectWithoutPropertiesLoose(_merge, _excluded2);
-  return /*#__PURE__*/React.createElement(FormModal, _extends({}, modalProps, {
+  return /*#__PURE__*/jsx(FormModal, _extends({}, modalProps, {
     modalRender: ({
       defaultChildren
     }) => {
-      return /*#__PURE__*/React.createElement(FormSteps, _extends({}, Object.assign({}, others, {
+      return /*#__PURE__*/jsx(FormSteps, _extends({}, Object.assign({}, others, {
         items: others.items.map(item => {
           return Object.assign({}, item, {
             formProps: Object.assign({}, item.formProps, {
@@ -4287,29 +4348,32 @@ const FormStepsModal = p => {
         onComplete: async data => {
           const res = await (others.onComplete == null ? void 0 : others.onComplete(data));
           modalProps.autoClose && res !== false && (modalProps.onCancel == null ? void 0 : modalProps.onCancel());
+        },
+        children: _ref => {
+          let {
+              children: stepChildren
+            } = _ref,
+            props = _objectWithoutPropertiesLoose(_ref, _excluded3);
+          return /*#__PURE__*/jsx(Provider, {
+            value: _extends({
+              stepChildren
+            }, props),
+            children: defaultChildren
+          });
         }
-      }), _ref => {
-        let {
-            children: stepChildren
-          } = _ref,
-          props = _objectWithoutPropertiesLoose(_ref, _excluded3);
-        return /*#__PURE__*/React.createElement(Provider, {
-          value: _extends({
-            stepChildren
-          }, props)
-        }, defaultChildren);
-      });
+      }));
     },
     footer: ({
       props
     }) => {
-      return /*#__PURE__*/React.createElement(StepFormFooter, _extends({}, props, {
+      return /*#__PURE__*/jsx(StepFormFooter, _extends({}, props, {
         completeText: completeText,
         nextText: nextText
       }));
-    }
-  }), /*#__PURE__*/React.createElement(StepChildren, null));
-};
+    },
+    children: /*#__PURE__*/jsx(StepChildren, {})
+  }));
+});
 
 export { Form, FormModal, FormSteps, FormStepsModal, List, MultiField, List as SubList, TableList, FormInfo as default };
 //# sourceMappingURL=index.modern.js.map