@hi-ui/form 4.0.9 → 4.1.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @hi-ui/form
+
+## 4.1.1
+
+### Patch Changes
+
+- [#2347](https://github.com/XiaoMi/hiui/pull/2347) [`1dd3fa9ce`](https://github.com/XiaoMi/hiui/commit/1dd3fa9cee0c408ead0849b9fab3e451bcf3e1f7) Thanks [@zyprepare](https://github.com/zyprepare)! - 修复体验问题: 错误提示过长时样式错乱
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2336](https://github.com/XiaoMi/hiui/pull/2336) [`bb2de106e`](https://github.com/XiaoMi/hiui/commit/bb2de106ee471f47a6f7223b6297e707f42d0278) Thanks [@zyprepare](https://github.com/zyprepare)! - FormList 对外暴露内部 add remove 等方法

package/lib/cjs/FormItem.js

@@ -80,6 +80,11 @@ var FormItem = function FormItem(_a) {
   }, [required, showRequiredOnValidateRequired, fieldRules]);
   return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
     required: showRequired,
+    // @ts-ignore
+    formMessage: /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
+      field: field,
+      className: prefixCls + "-item__message"
+    }),
     className: classname.cx(prefixCls + "-item", className)
   }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
     field: field,
@@ -91,10 +96,7 @@ var FormItem = function FormItem(_a) {
     valueConnectTransform: valueConnectTransform,
     validateTrigger: validateTrigger,
     render: render
-  }, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
-    field: field,
-    className: prefixCls + "-item__message"
-  }));
+  }, children));
 };
 
 if (env.__DEV__) {

package/lib/cjs/FormLabel.js

@@ -72,7 +72,8 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
-      rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
+      formMessage = props.formMessage,
+      rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
 
   var _useMemo = React.useMemo(function () {
     if (labelPlacement === 'top') return {
@@ -105,30 +106,37 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var cls = classname.cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement // error && `${prefixCls}--error`,
   // validating && `${prefixCls}--validating`
   );
-  var style = Object.assign(Object.assign({}, styleProp), {
-    alignItems: contentPositionMemo
-  });
+  var style = Object.assign({}, styleProp);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls,
     style: style
-  }, rest), label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: prefixCls + "__text",
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__content",
+    style: {
+      alignItems: contentPositionMemo
+    }
+  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+    className: prefixCls + "__content__text",
     style: {
       width: labelWidth
     }
   }, label, colon) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "__indent",
+    className: prefixCls + "__content__indent",
     style: {
       width: labelWidth
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: prefixCls + "__control",
+    className: prefixCls + "__content__control",
     style: {
       width: controlWidth
     }
-  }, children));
+  }, children)), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      paddingLeft: labelWidth
+    }
+  }, formMessage));
 });
 
 if (env.__DEV__) {

package/lib/cjs/FormList.js

@@ -38,9 +38,10 @@ var fieldListSymbol = Symbol('field-list');
  * TODO: What is FormList
  */
 
-var FormList = function FormList(_ref) {
+var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      nameProp = _ref.name;
+      nameProp = _ref.name,
+      innerRef = _ref.innerRef;
 
   var _useFormContext = context.useFormContext(),
       values = _useFormContext.values,
@@ -128,7 +129,17 @@ var FormList = function FormList(_ref) {
         value: value
       };
     });
-  }, [values, name]);
+  }, [values, name]); // @ts-ignore
+
+  React.useImperativeHandle(innerRef, function () {
+    return {
+      add: add,
+      remove: remove,
+      insertBefore: insertBefore,
+      swap: swap,
+      move: move
+    };
+  });
 
   if (typeof children !== 'function') {
     if (env.__DEV__) {
@@ -145,7 +156,7 @@ var FormList = function FormList(_ref) {
     insertBefore: insertBefore,
     move: move
   });
-};
+});
 
 if (env.__DEV__) {
   FormList.displayName = 'FormList';

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
+var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0; }.hi-v4-form-label__content {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-form-label--placement-top > .hi-v4-form-label__content {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding-right: 0; }.hi-v4-form-label__content__text, .hi-v4-form-label__content__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__content__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__content > .hi-v4-form-label__content__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__content > .hi-v4-form-label__content__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__content > .hi-v4-form-label__content__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__content > .hi-v4-form-label__content__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label__content__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }";
 
 var __styleInject__ = require('inject-head-style')["default"];
 

package/lib/esm/FormItem.js

@@ -55,6 +55,11 @@ var FormItem = function FormItem(_a) {
   }, [required, showRequiredOnValidateRequired, fieldRules]);
   return /*#__PURE__*/React.createElement(FormLabel, Object.assign({}, rest, {
     required: showRequired,
+    // @ts-ignore
+    formMessage: /*#__PURE__*/React.createElement(FormMessage, {
+      field: field,
+      className: prefixCls + "-item__message"
+    }),
     className: cx(prefixCls + "-item", className)
   }), /*#__PURE__*/React.createElement(FormField, {
     field: field,
@@ -66,10 +71,7 @@ var FormItem = function FormItem(_a) {
     valueConnectTransform: valueConnectTransform,
     validateTrigger: validateTrigger,
     render: render
-  }, children), /*#__PURE__*/React.createElement(FormMessage, {
-    field: field,
-    className: prefixCls + "-item__message"
-  }));
+  }, children));
 };
 
 if (__DEV__) {

package/lib/esm/FormLabel.js

@@ -49,7 +49,8 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
       contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
-      rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
+      formMessage = props.formMessage,
+      rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
 
   var _useMemo = useMemo(function () {
     if (labelPlacement === 'top') return {
@@ -82,30 +83,37 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
   var cls = cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement // error && `${prefixCls}--error`,
   // validating && `${prefixCls}--validating`
   );
-  var style = Object.assign(Object.assign({}, styleProp), {
-    alignItems: contentPositionMemo
-  });
+  var style = Object.assign({}, styleProp);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls,
     style: style
-  }, rest), label ? /*#__PURE__*/React.createElement("label", {
-    className: prefixCls + "__text",
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__content",
+    style: {
+      alignItems: contentPositionMemo
+    }
+  }, label ? /*#__PURE__*/React.createElement("label", {
+    className: prefixCls + "__content__text",
     style: {
       width: labelWidth
     }
   }, label, colon) : /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__indent",
+    className: prefixCls + "__content__indent",
     style: {
       width: labelWidth
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__control",
+    className: prefixCls + "__content__control",
     style: {
       width: controlWidth
     }
-  }, children));
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingLeft: labelWidth
+    }
+  }, formMessage));
 });
 
 if (__DEV__) {

package/lib/esm/FormList.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { __DEV__ } from '@hi-ui/env';
 import { useFormContext } from './context.js';
 import { setNested, getNested } from '@hi-ui/object-utils';
@@ -17,9 +17,10 @@ var fieldListSymbol = Symbol('field-list');
  * TODO: What is FormList
  */
 
-var FormList = function FormList(_ref) {
+var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      nameProp = _ref.name;
+      nameProp = _ref.name,
+      innerRef = _ref.innerRef;
 
   var _useFormContext = useFormContext(),
       values = _useFormContext.values,
@@ -107,7 +108,17 @@ var FormList = function FormList(_ref) {
         value: value
       };
     });
-  }, [values, name]);
+  }, [values, name]); // @ts-ignore
+
+  useImperativeHandle(innerRef, function () {
+    return {
+      add: add,
+      remove: remove,
+      insertBefore: insertBefore,
+      swap: swap,
+      move: move
+    };
+  });
 
   if (typeof children !== 'function') {
     if (__DEV__) {
@@ -124,7 +135,7 @@ var FormList = function FormList(_ref) {
     insertBefore: insertBefore,
     move: move
   });
-};
+});
 
 if (__DEV__) {
   FormList.displayName = 'FormList';

package/lib/esm/styles/index.scss.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'inject-head-style';
-var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
+var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0; }.hi-v4-form-label__content {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-form-label--placement-top > .hi-v4-form-label__content {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding-right: 0; }.hi-v4-form-label__content__text, .hi-v4-form-label__content__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__content__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__content > .hi-v4-form-label__content__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__content > .hi-v4-form-label__content__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__content > .hi-v4-form-label__content__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__content > .hi-v4-form-label__content__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label__content__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }";
 
 __styleInject__(css_248z);
 

package/lib/types/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
 /**
  * TODO: What is FormLabel
@@ -29,4 +29,8 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
      * 在 vertical 放置时，label 相对表单控件垂直对齐的方式，优先级低于 Form
      */
     contentPosition?: 'top' | 'center' | 'bottom';
+    /**
+     * 提示信息
+     */
+    formMessage?: ReactNode;
 }

package/lib/types/FormList.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FormFieldPath, FormListChildrenAction } from './types';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { FormFieldPath, FormListChildrenAction, FormListHelper } from './types';
 /**
  * TODO: What is FormList
  */
-export declare const FormList: React.FC<FormListProps>;
-export interface FormListProps {
+export declare const FormList: React.ForwardRefExoticComponent<FormListProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface FormListProps extends HiBaseHTMLProps<'div'> {
     /**
      * 表单控件渲染函数
      */
@@ -13,4 +14,8 @@ export interface FormListProps {
      * 列表名称
      */
     name: FormFieldPath;
+    /**
+     * 提供辅助方法的内部引用
+     */
+    innerRef?: React.Ref<FormListHelper>;
 }

package/lib/types/index.d.ts

@@ -2,7 +2,7 @@
 import './styles/index.scss';
 declare const Form: import("react").ForwardRefExoticComponent<import("./Form").FormProps<Record<string, any>> & import("react").RefAttributes<HTMLFormElement | null>> & {
     Item: import("react").FC<import("./FormItem").FormItemProps>;
-    List: import("react").FC<import("./FormList").FormListProps>;
+    List: import("react").ForwardRefExoticComponent<import("./FormList").FormListProps & import("react").RefAttributes<HTMLDivElement | null>>;
     Submit: import("react").ForwardRefExoticComponent<import("./FormSubmit").FormSubmitProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement | null>>;
     Reset: import("react").ForwardRefExoticComponent<import("./FormReset").FormResetProps & import("react").RefAttributes<HTMLButtonElement | null>>;
 };

package/lib/types/types.d.ts

@@ -125,6 +125,28 @@ export interface FormHelpers<T = any> {
      */
     clearFieldValidate: (fields: FormFieldPath) => void;
 }
+export interface FormListHelper {
+    /**
+     * 动态添加表单
+     */
+    add: (value: any) => void;
+    /**
+     * 动态删除表单
+     */
+    remove: (index: number) => void;
+    /**
+     * 在 index 之前插入
+     */
+    insertBefore: (index: number, value: any) => void;
+    /**
+     * 置换表单值
+     */
+    swap: (aIndex: number, bIndex: number) => void;
+    /**
+     * 移动表单值
+     */
+    move: (fromIndex: number, toIndex: number) => void;
+}
 export declare type FormFieldPath = (string | number)[] | string | number;
 export declare type FormErrorMessage = string;
 export declare type FormRules = Record<string, FormRuleModel[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/form",
-  "version": "4.0.9",
+  "version": "4.1.1",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -65,6 +65,5 @@
     "@hi-ui/hi-build": "^4.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  },
-  "gitHead": "619fb2b1774e927c016d9e58117fd4bf0d0364f3"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Xiaomi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.