@hi-ui/form 4.0.0-beta.9 → 4.0.2

package/lib/cjs/Form.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -60,9 +60,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
       _a$contentPosition = _a.contentPosition,
       contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
+      _a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
+      showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
       _a$showColon = _a.showColon,
       showColon = _a$showColon === void 0 ? true : _a$showColon,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
 
   var formContext = useForm.useForm(rest);
   var getRootProps = formContext.getRootProps; // @ts-ignore
@@ -72,14 +74,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       validate: formContext.submitForm,
       reset: formContext.resetForm,
       validateField: formContext.validateFieldState,
-      // validateFields: formContext.va,
       setFieldValue: formContext.setFieldValue,
       setFieldsValue: formContext.setFieldsValue,
       getFieldValue: formContext.getFieldValue,
       getFieldsValue: formContext.getFieldsValue,
       getFieldError: formContext.getFieldError,
       getFieldsError: formContext.getFieldsError,
-      clearValidates: formContext.resetErrors
+      clearValidates: formContext.resetErrors,
+      clearFieldValidate: formContext.resetFieldError
     };
   });
   var providedValue = React.useMemo(function () {
@@ -87,18 +89,19 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       labelWidth: labelWidth,
       labelPlacement: labelPlacement,
       showColon: showColon,
-      contentPosition: contentPosition
+      contentPosition: contentPosition,
+      showRequiredOnValidateRequired: showRequiredOnValidateRequired
     }, formContext), {
       prefixCls: prefixCls
     });
-  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
+  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
   var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
   return (
     /*#__PURE__*/
     // @ts-ignore
-    React__default['default'].createElement(context.FormProvider, {
+    React__default["default"].createElement(context.FormProvider, {
       value: providedValue
-    }, /*#__PURE__*/React__default['default'].createElement("form", Object.assign({
+    }, /*#__PURE__*/React__default["default"].createElement("form", Object.assign({
       ref: ref,
       role: role,
       className: cls
@@ -116,7 +119,7 @@ var formExtends = function formExtends(model) {
     // @ts-ignore
     FORM_REGISTER_TABLE[model.name] = model;
   } else {
-    env.invariant(true, 'The name should be unique string and not empty.');
+    env.invariant(false, 'The name should be unique string and not empty.');
   }
 };
 
@@ -125,4 +128,3 @@ Object.assign(Form, {
 });
 exports.FORM_REGISTER_TABLE = FORM_REGISTER_TABLE;
 exports.Form = Form;
-//# sourceMappingURL=Form.js.map

package/lib/cjs/FormField.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -34,6 +34,10 @@ var FormField = function FormField(props) {
     return props.render(fieldProps);
   }
 
+  if (typeAssertion.isFunction(props.children)) {
+    return props.children(fieldProps);
+  }
+
   if (! /*#__PURE__*/React.isValidElement(props.children)) {
     console.warn('FormField must pass a valid element as children.');
     return (_a = props.children) !== null && _a !== void 0 ? _a : null;
@@ -47,4 +51,3 @@ if (env.__DEV__) {
 }
 
 exports.FormField = FormField;
-//# sourceMappingURL=FormField.js.map

package/lib/cjs/FormItem.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21,6 +21,8 @@ var React = require('react');
 
 var env = require('@hi-ui/env');
 
+var useFormField = require('./use-form-field.js');
+
 var FormLabel = require('./FormLabel.js');
 
 var FormMessage = require('./FormMessage.js');
@@ -55,15 +57,31 @@ var FormItem = function FormItem(_a) {
       valueConnectTransform = _a.valueConnectTransform,
       validateTrigger = _a.validateTrigger,
       render = _a.render,
-      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]); // @ts-ignore
-
+      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
 
   var _useFormContext = context.useFormContext(),
-      prefixCls = _useFormContext.prefixCls;
+      prefixCls = _useFormContext.prefixCls,
+      showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
 
-  return /*#__PURE__*/React__default['default'].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
+  var fieldRules = useFormField.useFiledRules({
+    field: field,
+    rules: rules,
+    valueType: valueType
+  });
+  var required = rest.required;
+  var showRequired = React.useMemo(function () {
+    if (required === undefined) {
+      return showRequiredOnValidateRequired && fieldRules.some(function (item) {
+        return item.required;
+      });
+    }
+
+    return required;
+  }, [required, showRequiredOnValidateRequired, fieldRules]);
+  return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
+    required: showRequired,
     className: classname.cx(prefixCls + "-item", className)
-  }), /*#__PURE__*/React__default['default'].createElement(FormField.FormField, {
+  }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
     field: field,
     valueType: valueType,
     rules: rules,
@@ -73,7 +91,7 @@ var FormItem = function FormItem(_a) {
     valueConnectTransform: valueConnectTransform,
     validateTrigger: validateTrigger,
     render: render
-  }, children), /*#__PURE__*/React__default['default'].createElement(FormMessage.FormMessage, {
+  }, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
     field: field,
     className: prefixCls + "-item__message"
   }));
@@ -84,4 +102,3 @@ if (env.__DEV__) {
 }
 
 exports.FormItem = FormItem;
-//# sourceMappingURL=FormItem.js.map

package/lib/cjs/FormLabel.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,7 +27,7 @@ var context = require('./context.js');
 
 var typeAssertion = require('@hi-ui/type-assertion');
 
-var localeContext = require('@hi-ui/locale-context');
+var core = require('@hi-ui/core');
 
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -46,11 +46,11 @@ var _prefix = classname.getPrefixCls(_role);
 
 
 var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var i18n = localeContext.useLocaleContext();
+  var i18n = core.useLocaleContext();
 
   var _useFormContext = context.useFormContext(),
       labelWidthContext = _useFormContext.labelWidth,
-      labelPlacement = _useFormContext.labelPlacement,
+      labelPlacementContext = _useFormContext.labelPlacement,
       showColonContext = _useFormContext.showColon,
       contentPositionContext = _useFormContext.contentPosition;
 
@@ -70,7 +70,9 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
       _props$contentPositio = props.contentPosition,
       contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
-      rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition"]);
+      _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"]);
 
   var _useMemo = React.useMemo(function () {
     if (labelPlacement === 'top') return {
@@ -106,22 +108,22 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = Object.assign(Object.assign({}, styleProp), {
     alignItems: contentPositionMemo
   });
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  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", {
+  }, rest), label ? /*#__PURE__*/React__default["default"].createElement("label", {
     className: prefixCls + "__text",
     style: {
       width: labelWidth
     }
-  }, label, colon) : /*#__PURE__*/React__default['default'].createElement("span", {
+  }, label, colon) : /*#__PURE__*/React__default["default"].createElement("span", {
     className: prefixCls + "__indent",
     style: {
       width: labelWidth
     }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "__control",
     style: {
       width: controlWidth
@@ -134,4 +136,3 @@ if (env.__DEV__) {
 }
 
 exports.FormLabel = FormLabel;
-//# sourceMappingURL=FormLabel.js.map

package/lib/cjs/FormList.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -54,10 +54,9 @@ var FormList = function FormList(_ref) {
    * form List 动态字段更新器
    */
 
-  var updateFormList = React__default['default'].useCallback(function (stateFunc, alterTouched, alterErrors) {
+  var updateFormList = React__default["default"].useCallback(function (stateFunc, alterTouched, alterErrors) {
     setFormState(function (prev) {
-      var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name))); // console.log(values, stateFunc(getNested(prev.values, name)))
-
+      var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name)));
       var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
       var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
       var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;
@@ -78,20 +77,20 @@ var FormList = function FormList(_ref) {
       };
     });
   }, [name, setFormState]);
-  var add = React__default['default'].useCallback(function (value) {
+  var add = React__default["default"].useCallback(function (value) {
     // 维护的 动态 field list
     updateFormList(function (prev) {
       return [].concat(asArray(prev), [value]);
     }, false, false);
   }, [updateFormList]);
-  var remove = React__default['default'].useCallback(function (index) {
+  var remove = React__default["default"].useCallback(function (index) {
     updateFormList(function (prev) {
       return asArray(prev).filter(function (_, idx) {
         return idx !== index;
       });
     }, true, true);
   }, [updateFormList]);
-  var insertBefore = React__default['default'].useCallback(function (index, value) {
+  var insertBefore = React__default["default"].useCallback(function (index, value) {
     updateFormList(function (prev) {
       return insert(asArray(prev), index, value);
     }, function (prev) {
@@ -100,7 +99,7 @@ var FormList = function FormList(_ref) {
       return insert(asArray(prev), index, null);
     });
   }, [updateFormList]);
-  var swap = React__default['default'].useCallback(function (aIndex, bIndex) {
+  var swap = React__default["default"].useCallback(function (aIndex, bIndex) {
     updateFormList(function (prev) {
       var copy = [].concat(asArray(prev));
       var temp = copy[aIndex];
@@ -109,7 +108,7 @@ var FormList = function FormList(_ref) {
       return copy;
     }, true, true);
   }, [updateFormList]);
-  var move = React__default['default'].useCallback(function (fromIndex, toIndex) {
+  var move = React__default["default"].useCallback(function (fromIndex, toIndex) {
     updateFormList(function (prev) {
       var copy = [].concat(asArray(prev));
       var temp = copy[fromIndex];
@@ -118,7 +117,7 @@ var FormList = function FormList(_ref) {
       return copy;
     }, true, true);
   }, [updateFormList]);
-  var listFields = React__default['default'].useMemo(function () {
+  var listFields = React__default["default"].useMemo(function () {
     var list = objectUtils.getNested(values, name) || []; // @ts-ignore
 
     return list.map(function (value, index) {
@@ -163,4 +162,3 @@ var asArray = function asArray(arr) {
 };
 
 exports.FormList = FormList;
-//# sourceMappingURL=FormList.js.map

package/lib/cjs/FormMessage.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -57,7 +57,7 @@ var FormMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
   var message = field ? getFieldError(field) : null;
   var cls = classname.cx(prefixCls, className, message && prefixCls + "--show");
-  return /*#__PURE__*/React__default['default'].createElement("span", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("span", Object.assign({
     ref: ref,
     role: role,
     className: cls
@@ -69,4 +69,3 @@ if (env.__DEV__) {
 }
 
 exports.FormMessage = FormMessage;
-//# sourceMappingURL=FormMessage.js.map

package/lib/cjs/FormReset.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -56,7 +56,7 @@ var FormReset = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       resetForm = _useFormContext.resetForm;
 
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default['default'].createElement(Button__default['default'], Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
     ref: ref,
     className: cls,
     type: type
@@ -73,4 +73,3 @@ if (env.__DEV__) {
 }
 
 exports.FormReset = FormReset;
-//# sourceMappingURL=FormReset.js.map

package/lib/cjs/FormSubmit.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -61,7 +61,7 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       submitForm = _useFormContext.submitForm;
 
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default['default'].createElement(Button__default['default'], Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
     ref: ref,
     role: role,
     className: cls,
@@ -71,8 +71,10 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       evt.preventDefault();
       evt.stopPropagation();
       submitForm().then(function (result) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(result, null);
       })["catch"](function (error) {
+        // @ts-ignore
         _onClick === null || _onClick === void 0 ? void 0 : _onClick(null, error);
       });
     }
@@ -84,4 +86,3 @@ if (env.__DEV__) {
 }
 
 exports.FormSubmit = FormSubmit;
-//# sourceMappingURL=FormSubmit.js.map

package/lib/cjs/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -30,4 +30,3 @@ var useFormContext = function useFormContext() {
 
 exports.FormProvider = FormProvider;
 exports.useFormContext = useFormContext;
-//# sourceMappingURL=context.js.map

package/lib/cjs/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -38,4 +38,3 @@ exports.FormList = FormList.FormList;
 exports.FormSubmit = FormSubmit.FormSubmit;
 exports.FormReset = FormReset.FormReset;
 exports["default"] = Form;
-//# sourceMappingURL=index.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,11 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-form {\n  max-width: 100%;\n  position: relative; }\n.hi-v4-form fieldset {\n    margin: 0;\n    padding: 0;\n    border: 0; }\n.hi-v4-form fieldset + fieldset {\n      margin-top: 16px; }\n.hi-v4-form legend {\n    margin: 0 0 16px;\n    color: var(--hi-v4-color-gray-800, #1f2937); }\n.hi-v4-form--placement-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap; }\n.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {\n      min-height: 32px; }\n.hi-v4-form-label {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  margin-right: var(--hi-v4-spacing-4, 8px);\n  margin-bottom: 24px; }\n.hi-v4-form-label__text, .hi-v4-form-label__indent {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    vertical-align: top;\n    color: var(--hi-v4-color-gray-800, #1f2937);\n    overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n    padding-right: var(--hi-v4-spacing-6, 12px);\n    min-height: 32px;\n    line-height: 32px; }\n.hi-v4-form-label--placement-left .hi-v4-form-label__text {\n      text-align: left; }\n.hi-v4-form-label--placement-right .hi-v4-form-label__text {\n      text-align: right; }\n.hi-v4-form-label--placement-top .hi-v4-form-label__text {\n      height: 22px;\n      padding-right: 8px;\n      margin-bottom: 8px; }\n.hi-v4-form-label--required .hi-v4-form-label__text::before {\n      margin-right: var(--hi-v4-spacing-2, 4px);\n      content: '*';\n      color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-form-label--placement-top {\n    text-align: left;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    margin-bottom: var(--hi-v4-spacing-10, 20px);\n    padding-right: 0; }\n.hi-v4-form-label__content {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    vertical-align: top;\n    min-height: 32px;\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-form-message {\n  display: block;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  min-height: 24px;\n  padding: 2px 0;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  line-height: 20px;\n  -webkit-transform: translateY(-10%);\n          transform: translateY(-10%);\n  opacity: 0;\n  color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));\n  -webkit-transition: all 0.3s;\n  transition: all 0.3s; }\n.hi-v4-form-message--show {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n            transform: translateY(0); }\n.hi-v4-form-item {\n  position: relative; }\n.hi-v4-form-item__message {\n    position: absolute; }\n";
+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 __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/use-form-field.js

@@ -2,7 +2,7 @@
  * @hi-ui/form
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,17 +35,14 @@ function _interopDefaultLegacy(e) {
 
 var Validater__default = /*#__PURE__*/_interopDefaultLegacy(Validater);
 
-var useFormField = function useFormField(props) {
+var useFiledRules = function useFiledRules(props) {
   var field = props.field,
       rulesProp = props.rules,
       _props$valueType = props.valueType,
       valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
 
   var _useFormContext = context.useFormContext(),
-      getFieldRules = _useFormContext.getFieldRules,
-      getFieldProps = _useFormContext.getFieldProps,
-      registerField = _useFormContext.registerField,
-      unregisterField = _useFormContext.unregisterField;
+      getFieldRules = _useFormContext.getFieldRules;
   /**
    * 处理校验规则，item 优先级大于 form
    */
@@ -59,7 +56,19 @@ var useFormField = function useFormField(props) {
         type: valueType
       }, rule);
     });
-  }, [rulesProp, field, getFieldRules, valueType]); // 当前 field 的唯一校验器
+  }, [rulesProp, field, getFieldRules, valueType]);
+  return fieldRules;
+};
+
+var useFormField = function useFormField(props) {
+  var field = props.field;
+
+  var _useFormContext2 = context.useFormContext(),
+      getFieldProps = _useFormContext2.getFieldProps,
+      registerField = _useFormContext2.registerField,
+      unregisterField = _useFormContext2.unregisterField;
+
+  var fieldRules = useFiledRules(props); // 当前 field 的唯一校验器
 
   var fieldValidate = React.useCallback(function (value) {
     var _Validater, _validater$validate;
@@ -70,30 +79,24 @@ var useFormField = function useFormField(props) {
 
 
     var fieldMD5 = index.stringify(field);
-    var validater = new Validater__default['default']((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
+    var validater = new Validater__default["default"]((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
     return validater.validate((_validater$validate = {}, _validater$validate[fieldMD5] = value, _validater$validate), {
       firstFields: true
     });
   }, [fieldRules, field]); // 注入当前 field 及其验证规则到 Form
 
   React.useEffect(function () {
-    if (typeAssertion.isNullish(field) || field === '') return;
-    if (typeAssertion.isArray(field) && field.every(function (item) {
-      return typeAssertion.isNullish(item) || item === '';
-    })) return;
+    if (!index.isValidField(field)) return;
     registerField(field, {
       validate: fieldValidate
     });
     return function () {
-      if (typeAssertion.isNullish(field) || field === '') return;
-      if (typeAssertion.isArray(field) && field.every(function (item) {
-        return typeAssertion.isNullish(item) || item === '';
-      })) return;
+      if (!index.isValidField(field)) return;
       unregisterField(field);
     };
   }, [registerField, unregisterField, field, fieldValidate]);
   return getFieldProps(props);
 };
 
+exports.useFiledRules = useFiledRules;
 exports.useFormField = useFormField;
-//# sourceMappingURL=use-form-field.js.map