@hi-ui/form 4.0.0-beta.2 → 4.0.0-beta.20

package/README.md

@@ -162,7 +162,7 @@
 | valueDispatchTransform  | feature                         | -                          | 强化功能                     |
 | valueConnectTransform   | feature                         | -                          | 强化功能                     |
 | validateTrigger         | feature                         | -                          | 强化功能                     |
-| children                | feature                         | 支持函数自定义渲染表单控件 | 强化功能                     |
+| render                  | feature                         | 支持函数自定义渲染表单控件 | 强化功能                     |
 
 ### FormList
 

package/lib/cjs/Form.js

@@ -60,7 +60,8 @@ 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,
-      showColon = _a.showColon,
+      _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"]);
 
   var formContext = useForm.useForm(rest);
@@ -95,9 +96,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   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
@@ -115,7 +116,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.');
   }
 };
 
@@ -124,4 +125,3 @@ Object.assign(Form, {
 });
 exports.FORM_REGISTER_TABLE = FORM_REGISTER_TABLE;
 exports.Form = Form;
-//# sourceMappingURL=Form.js.map

package/lib/cjs/FormField.js

@@ -18,6 +18,8 @@ var React = require('react');
 var env = require('@hi-ui/env');
 
 var useFormField = require('./use-form-field.js');
+
+var typeAssertion = require('@hi-ui/type-assertion');
 /**
  * TODO: What is FormField
  */
@@ -28,6 +30,14 @@ var FormField = function FormField(props) {
 
   var fieldProps = useFormField.useFormField(props);
 
+  if (typeAssertion.isFunction(props.render)) {
+    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;
@@ -41,4 +51,3 @@ if (env.__DEV__) {
 }
 
 exports.FormField = FormField;
-//# sourceMappingURL=FormField.js.map

package/lib/cjs/FormItem.js

@@ -54,15 +54,16 @@ var FormItem = function FormItem(_a) {
       valueDispatchTransform = _a.valueDispatchTransform,
       valueConnectTransform = _a.valueConnectTransform,
       validateTrigger = _a.validateTrigger,
-      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger"]); // @ts-ignore
+      render = _a.render,
+      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]); // @ts-ignore
 
 
   var _useFormContext = context.useFormContext(),
       prefixCls = _useFormContext.prefixCls;
 
-  return /*#__PURE__*/React__default['default'].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
     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,
@@ -70,8 +71,9 @@ var FormItem = function FormItem(_a) {
     valueChangeFuncPropName: valueChangeFuncPropName,
     valueDispatchTransform: valueDispatchTransform,
     valueConnectTransform: valueConnectTransform,
-    validateTrigger: validateTrigger
-  }, children), /*#__PURE__*/React__default['default'].createElement(FormMessage.FormMessage, {
+    validateTrigger: validateTrigger,
+    render: render
+  }, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
     field: field,
     className: prefixCls + "-item__message"
   }));
@@ -82,4 +84,3 @@ if (env.__DEV__) {
 }
 
 exports.FormItem = FormItem;
-//# sourceMappingURL=FormItem.js.map

package/lib/cjs/FormLabel.js

@@ -106,22 +106,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 +134,3 @@ if (env.__DEV__) {
 }
 
 exports.FormLabel = FormLabel;
-//# sourceMappingURL=FormLabel.js.map

package/lib/cjs/FormList.js

@@ -21,7 +21,7 @@ var env = require('@hi-ui/env');
 
 var context = require('./context.js');
 
-var funcUtils = require('@hi-ui/func-utils');
+var objectUtils = require('@hi-ui/object-utils');
 
 var typeAssertion = require('@hi-ui/type-assertion');
 
@@ -54,14 +54,14 @@ 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 = funcUtils.setNested(prev.values, name, stateFunc(funcUtils.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))); // console.log(values, stateFunc(getNested(prev.values, name)))
 
       var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
       var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
-      var fieldError = alterErrors ? updateErrors(funcUtils.getNested(prev.errors, name)) : undefined;
-      var fieldTouched = alterTouched ? updateTouched(funcUtils.getNested(prev.touched, name)) : undefined;
+      var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;
+      var fieldTouched = alterTouched ? updateTouched(objectUtils.getNested(prev.touched, name)) : undefined;
 
       if (!typeAssertion.isArrayNonEmpty(fieldError)) {
         fieldError = undefined;
@@ -73,25 +73,25 @@ var FormList = function FormList(_ref) {
 
       return {
         values: values,
-        errors: alterErrors ? funcUtils.setNested(prev.errors, name, fieldError) : prev.errors,
-        touched: alterTouched ? funcUtils.setNested(prev.touched, name, fieldTouched) : prev.touched
+        errors: alterErrors ? objectUtils.setNested(prev.errors, name, fieldError) : prev.errors,
+        touched: alterTouched ? objectUtils.setNested(prev.touched, name, fieldTouched) : prev.touched
       };
     });
   }, [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 +100,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 +109,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,8 +118,8 @@ var FormList = function FormList(_ref) {
       return copy;
     }, true, true);
   }, [updateFormList]);
-  var listFields = React__default['default'].useMemo(function () {
-    var list = funcUtils.getNested(values, name) || []; // @ts-ignore
+  var listFields = React__default["default"].useMemo(function () {
+    var list = objectUtils.getNested(values, name) || []; // @ts-ignore
 
     return list.map(function (value, index) {
       return {
@@ -163,4 +163,3 @@ var asArray = function asArray(arr) {
 };
 
 exports.FormList = FormList;
-//# sourceMappingURL=FormList.js.map

package/lib/cjs/FormMessage.js

@@ -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

@@ -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

@@ -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,
@@ -84,4 +84,3 @@ if (env.__DEV__) {
 }
 
 exports.FormSubmit = FormSubmit;
-//# sourceMappingURL=FormSubmit.js.map

package/lib/cjs/context.js

@@ -30,4 +30,3 @@ var useFormContext = function useFormContext() {
 
 exports.FormProvider = FormProvider;
 exports.useFormContext = useFormContext;
-//# sourceMappingURL=context.js.map

package/lib/cjs/index.js

@@ -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

@@ -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: #1f2937;\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: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  margin-right: 8px;\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: #1f2937;\n    color: var(--hi-v4-color-gray-800, #1f2937);\n    overflow-wrap: break-word; }\n.hi-v4-form-label__text {\n    padding-right: 12px;\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: 4px;\n      margin-right: var(--hi-v4-spacing-2, 4px);\n      content: '*';\n      color: #ff5959;\n      color: 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: 20px;\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: 0.875rem;\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: #ff5959;\n  color: 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 = "@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: var(--hi-v4-height-8, 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-md, 0.875rem);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  margin-right: 0;\n  margin-bottom: var(--hi-v4-spacing-12, 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: var(--hi-v4-height-8, 32px);\n    line-height: var(--hi-v4-height-8, 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      min-height: 22px;\n      line-height: 22px;\n      padding-right: 0;\n      margin-bottom: var(--hi-v4-spacing-4, 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-12, 24px);\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: var(--hi-v4-height-8, 32px);\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-form-label__control {\n    min-width: 1px; }\n.hi-v4-form-message {\n  display: block;\n  font-size: var(--hi-v4-text-size-md, 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 __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

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

@@ -23,7 +23,7 @@ var typeAssertion = require('@hi-ui/type-assertion');
 
 var Validater = require('async-validator');
 
-var funcUtils = require('@hi-ui/func-utils');
+var arrayUtils = require('@hi-ui/array-utils');
 
 var index = require('./utils/index.js');
 
@@ -53,7 +53,7 @@ var useFormField = function useFormField(props) {
 
   var fieldRules = React.useMemo(function () {
     // @ts-ignore
-    var rules = funcUtils.toArray(rulesProp !== null && rulesProp !== void 0 ? rulesProp : getFieldRules(field));
+    var rules = arrayUtils.normalizeArray(rulesProp !== null && rulesProp !== void 0 ? rulesProp : getFieldRules(field));
     return rules.map(function (rule) {
       return Object.assign({
         type: valueType
@@ -70,25 +70,19 @@ 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]);
@@ -96,4 +90,3 @@ var useFormField = function useFormField(props) {
 };
 
 exports.useFormField = useFormField;
-//# sourceMappingURL=use-form-field.js.map