@arco-design/mobile-react 2.38.4 → 2.39.0

package/esm/toast/index.js

@@ -12,31 +12,31 @@ import { usePreventBodyScroll } from '../_helpers';
 export * from './methods';
 var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      getContainer = props.getContainer,
-      _props$visible = props.visible,
-      visible = _props$visible === void 0 ? false : _props$visible,
-      onClose = props.onClose,
-      close = props.close,
-      _props$type = props.type,
-      type = _props$type === void 0 ? 'info' : _props$type,
-      icon = props.icon,
-      _props$layout = props.layout,
-      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
-      _props$duration = props.duration,
-      duration = _props$duration === void 0 ? 3000 : _props$duration,
-      _props$transitionDura = props.transitionDuration,
-      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
-      content = props.content,
-      _props$loading = props.loading,
-      loading = _props$loading === void 0 ? false : _props$loading,
-      loadingIcon = props.loadingIcon,
-      _props$disableBodyTou = props.disableBodyTouch,
-      disableBodyTouch = _props$disableBodyTou === void 0 ? false : _props$disableBodyTou,
-      loadingInner = props.loadingInner,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'center' : _props$direction,
-      typeIconMap = props.typeIconMap,
-      initialBodyOverflow = props.initialBodyOverflow;
+    getContainer = props.getContainer,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? false : _props$visible,
+    onClose = props.onClose,
+    close = props.close,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'info' : _props$type,
+    icon = props.icon,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 3000 : _props$duration,
+    _props$transitionDura = props.transitionDuration,
+    transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+    content = props.content,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    loadingIcon = props.loadingIcon,
+    _props$disableBodyTou = props.disableBodyTouch,
+    disableBodyTouch = _props$disableBodyTou === void 0 ? false : _props$disableBodyTou,
+    loadingInner = props.loadingInner,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'center' : _props$direction,
+    typeIconMap = props.typeIconMap,
+    initialBodyOverflow = props.initialBodyOverflow;
   var closeTimerRef = useRef(undefined);
   var domRef = useRef(null);
   var wrapDomRef = useRef(null);
@@ -48,13 +48,11 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   usePreventBodyScroll(visible, disableBodyTouch, initialBodyOverflow);
-
   function handleClose() {
     if (close) {
       close();
     }
   }
-
   function startCloseTimer() {
     if (duration) {
       clearTimeout(closeTimerRef.current);
@@ -63,13 +61,11 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
       }, duration);
     }
   }
-
   function handleClickMask(e) {
     if (disableBodyTouch) {
       e.preventDefault();
     }
   }
-
   function getTypeIcons() {
     var map = typeIconMap || {};
     var defaultMap = {
@@ -79,31 +75,25 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
     };
     return map[type] || defaultMap[type] || null;
   }
-
   useEffect(function () {
     var mounted = isInitialMount.current;
-
     if (visible) {
       startCloseTimer();
     } else {
       clearTimeout(closeTimerRef.current);
-
       if (mounted) {
         setTimeout(function () {
           onClose && onClose();
         }, transitionDuration);
       }
     }
-
     isInitialMount.current = true;
   }, [visible]);
   useEffect(function () {
     startCloseTimer();
   }, [duration]);
-
   function renderComponent(prefixClass) {
     var _cls;
-
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixClass + "-wrapper", "from-" + direction, {
         'no-event': !disableBodyTouch
@@ -125,7 +115,6 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
       className: prefixClass + "-content"
     }, content) : null));
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement(Portal, {
@@ -150,7 +139,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     toast: toast(Comp),
-
     /**
      * 展示常规提示框，同 Toast.toast
      * @desc {en} Show regular toast, the same as Toast.toast
@@ -158,7 +146,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     info: toast(Comp, 'info'),
-
     /**
      * 展示成功提示框(含成功icon)
      * @desc {en} Show success prompt toast (including success icon)
@@ -166,7 +153,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     success: toast(Comp, 'success'),
-
     /**
      * 展示错误提示框(含错误icon)
      * @desc {en} Display error prompt toast (including error icon)
@@ -174,7 +160,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     error: toast(Comp, 'error'),
-
     /**
      * 展示加载中提示框(含加载中icon)
      * @desc {en} Display loading prompt toast (including loading icon)
@@ -182,7 +167,6 @@ export function methodsGenerator(Comp) {
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
     loading: toast(Comp, 'loading'),
-
     /**
      * 展示警告提示框(含警告icon)
      * @desc {en} Display warning prompt toast (including warning icon)
@@ -193,6 +177,7 @@ export function methodsGenerator(Comp) {
   };
 }
 var ToastWithGlobalContext = CompWithGlobalContext(Toast);
+
 /**
  * 轻提示组件，支持各个场景下调用方法。
  * @en The toast component, supports calling methods in various scenarios.
@@ -201,5 +186,4 @@ var ToastWithGlobalContext = CompWithGlobalContext(Toast);
  * @name 轻提示
  * @name_en Toast
  */
-
 export default componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));

package/esm/toast/methods.js

@@ -7,29 +7,23 @@ export function toast(Component, type) {
       content: originConfig,
       type: 'info'
     } : originConfig;
-
     if (type !== void 0) {
       config.type = type;
       config.loading = type === 'loading';
     }
-
     var div = document.createElement('div');
     document.body.appendChild(div);
-
     var _ReactDOMRender = new ReactDOMRender(Component, div, context),
-        render = _ReactDOMRender.render,
-        unmount = _ReactDOMRender.unmount;
-
+      render = _ReactDOMRender.render,
+      unmount = _ReactDOMRender.unmount;
     function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
       unmount();
-
       if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
-
     var dynamicProps = _extends({}, config, {
       close: close,
       getContainer: function getContainer() {
@@ -38,20 +32,16 @@ export function toast(Component, type) {
       onClose: destroy,
       visible: false
     });
-
     var leaving = false;
-
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig);
       render(dynamicProps);
     }
-
     function close() {
       leaving = true;
       dynamicProps.visible = false;
       render(dynamicProps);
     }
-
     render(dynamicProps);
     nextTick(function () {
       // 在即将打开时发现已经调用了close则取消打开操作

package/esm/transition/index.js

@@ -5,6 +5,7 @@ import React, { cloneElement, useMemo } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { ContextLayout } from '../context-provider';
 var DEFAULT_TIMEOUT = 300;
+
 /**
  * react-transition-group/CSSTransition 的简单封装。
  * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -13,35 +14,32 @@ var DEFAULT_TIMEOUT = 300;
  * @name 动画过渡
  * @name_en Transition
  */
-
 export default function Transition(props) {
   var _props$children = props.children,
-      children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
-      type = props.type,
-      transIn = props.in,
-      _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? DEFAULT_TIMEOUT : _props$timeout,
-      _props$mountOnEnter = props.mountOnEnter,
-      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
-      _props$unmountOnExit = props.unmountOnExit,
-      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
-      transitionVarType = props.transitionVarType,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var varPrefix = "builtin-transition-" + (transitionVarType || type); // 计算动画时长，支持对象形式的 timeout
-
+    children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
+    type = props.type,
+    transIn = props.in,
+    _props$timeout = props.timeout,
+    timeout = _props$timeout === void 0 ? DEFAULT_TIMEOUT : _props$timeout,
+    _props$mountOnEnter = props.mountOnEnter,
+    mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+    _props$unmountOnExit = props.unmountOnExit,
+    unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+    transitionVarType = props.transitionVarType,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var varPrefix = "builtin-transition-" + (transitionVarType || type);
+
+  // 计算动画时长，支持对象形式的 timeout
   var getDuration = function getDuration(phase) {
     if (typeof timeout === 'number') {
       return timeout;
     }
-
     return timeout[phase] || DEFAULT_TIMEOUT;
-  }; // 生成 CSS 变量样式
-
+  };
 
+  // 生成 CSS 变量样式
   var cssVariables = useMemo(function () {
     var _ref;
-
     var enterDuration = getDuration('enter');
     var exitDuration = getDuration('exit');
     var appearDuration = getDuration('appear');
@@ -49,7 +47,6 @@ export default function Transition(props) {
   }, [timeout, varPrefix]);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
     var _props;
-
     var prefixCls = _ref2.prefixCls;
     return /*#__PURE__*/React.createElement(CSSTransition, _extends({
       in: transIn,

package/esm/uploader/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UploaderRef, UploaderProps } from './type';
+import type { UploaderRef, UploaderProps } from './type';
 export * from './type';
 declare const _default: React.ForwardRefExoticComponent<UploaderProps & React.RefAttributes<UploaderRef>> & {
     displayName?: string | undefined;

package/esm/uploader/index.js

@@ -9,29 +9,29 @@ import { Upload } from './upload';
 export * from './type';
 var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      _props$files = props.files,
-      files = _props$files === void 0 ? [] : _props$files,
-      _props$accept = props.accept,
-      accept = _props$accept === void 0 ? undefined : _props$accept,
-      _props$multiple = props.multiple,
-      multiple = _props$multiple === void 0 ? false : _props$multiple,
-      capture = props.capture,
-      _props$limit = props.limit,
-      limit = _props$limit === void 0 ? 0 : _props$limit,
-      _props$hideStatus = props.hideStatus,
-      hideStatus = _props$hideStatus === void 0 ? false : _props$hideStatus,
-      _props$alwaysShowSele = props.alwaysShowSelect,
-      alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
-      disabled = props.disabled,
-      renderDeleteArea = props.renderDeleteArea,
-      renderLoadedArea = props.renderLoadedArea,
-      renderLoadingArea = props.renderLoadingArea,
-      renderErrorArea = props.renderErrorArea,
-      renderFileIndexArea = props.renderFileIndexArea,
-      renderUploadArea = props.renderUploadArea,
-      renderFileList = props.renderFileList;
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    _props$files = props.files,
+    files = _props$files === void 0 ? [] : _props$files,
+    _props$accept = props.accept,
+    accept = _props$accept === void 0 ? undefined : _props$accept,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    capture = props.capture,
+    _props$limit = props.limit,
+    limit = _props$limit === void 0 ? 0 : _props$limit,
+    _props$hideStatus = props.hideStatus,
+    hideStatus = _props$hideStatus === void 0 ? false : _props$hideStatus,
+    _props$alwaysShowSele = props.alwaysShowSelect,
+    alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
+    disabled = props.disabled,
+    renderDeleteArea = props.renderDeleteArea,
+    renderLoadedArea = props.renderLoadedArea,
+    renderLoadingArea = props.renderLoadingArea,
+    renderErrorArea = props.renderErrorArea,
+    renderFileIndexArea = props.renderFileIndexArea,
+    renderUploadArea = props.renderUploadArea,
+    renderFileList = props.renderFileList;
   var domRef = useRef(null);
   var fileRef = useRef(null);
   var cacheRef = useLatestRef(files);
@@ -41,7 +41,6 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
       dom: domRef.current
     };
   });
-
   var uploaderSelect = function uploaderSelect(prefixCls, locale) {
     var showSelect = files.length < (limit || Infinity);
     return (showSelect || alwaysShowSelect) && /*#__PURE__*/React.createElement("div", {
@@ -63,7 +62,6 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
       disabled: disabled
     }, locale.Uploader.uploadBtn));
   };
-
   var getUploadList = function getUploadList(prefixCls, locale) {
     var generateItemArea = function generateItemArea(fileItem, index, render, part, defaultArea) {
       if (render) {
@@ -72,12 +70,10 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
           className: prefixCls + "-uploader-list-item-" + part
         }, node) : node;
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: prefixCls + "-uploader-list-item-" + part
       }, defaultArea);
     };
-
     return renderFileList && renderFileList({
       retryUpload: uploadFunc.retryUpload,
       deleteFile: uploadFunc.deleteFile
@@ -85,9 +81,9 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
       className: prefixCls + "-uploader-list"
     }, (limit && limit < files.length ? files.slice(0, limit) : files).map(function (fileItem, index) {
       var _cls, _cls2;
-
       var file = fileItem.file,
-          status = fileItem.status;
+        _fileItem$status = fileItem.status,
+        status = _fileItem$status === void 0 ? 'loaded' : _fileItem$status;
       return /*#__PURE__*/React.createElement("div", {
         className: prefixCls + "-uploader-list-item",
         key: index,
@@ -121,13 +117,11 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
       })));
     }));
   };
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var _cls3;
-
     var prefixCls = _ref.prefixCls,
-        _ref$locale = _ref.locale,
-        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-uploader", className, (_cls3 = {}, _cls3[prefixCls + "-uploader-disabled"] = disabled, _cls3)),
       style: style,
@@ -137,6 +131,7 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
     }, uploaderSelect(prefixCls, locale), getUploadList(prefixCls, locale)));
   });
 });
+
 /**
  * 文件上传组件
  * @en Uploader Component
@@ -146,5 +141,4 @@ var Uploader = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en Uploader
  * @displayName Uploader
  */
-
 export default componentWrapper(Uploader, 'Uploader');

package/esm/uploader/upload/upload.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { Promise as ES6Promise } from 'es6-promise';
 export var Upload = /*#__PURE__*/function () {
-  // click && longPress
   function Upload(props, fileRef, cacheRef) {
     var _this = this;
-
     this.props = void 0;
     this.fileRef = void 0;
     this.cacheRef = void 0;
+    // click && longPress
     this.timeOutEvent = void 0;
-
+    // 解析文件生成预览
     this.handleFile = function (newFiles) {
       ES6Promise.all(newFiles.map(function (file) {
         return parseFile(file);
@@ -22,10 +21,8 @@ export var Upload = /*#__PURE__*/function () {
           };
         });
         _this.cacheRef.current = [].concat(_this.cacheRef.current, res);
-
-        _this.props.onChange([].concat(_this.cacheRef.current)); // 执行upload
-
-
+        _this.props.onChange([].concat(_this.cacheRef.current));
+        // 执行upload
         if (typeof _this.props.upload === 'function') {
           newFiles.forEach(function (_file) {
             _this.props.upload(_this.cacheRef.current.find(function (_ref) {
@@ -36,10 +33,9 @@ export var Upload = /*#__PURE__*/function () {
                 var file = _ref2.file;
                 return file === _file;
               });
-
               if (index !== -1) {
                 _this.cacheRef.current[index] = _extends({}, _this.cacheRef.current[index], data, {
-                  status: 'loaded'
+                  status: undefined
                 });
               }
             }).catch(function () {
@@ -47,7 +43,6 @@ export var Upload = /*#__PURE__*/function () {
                 var file = _ref3.file;
                 return file === _file;
               });
-
               if (index !== -1) {
                 _this.cacheRef.current[index].status = 'error';
               }
@@ -58,7 +53,6 @@ export var Upload = /*#__PURE__*/function () {
         }
       });
     };
-
     this.handleChange = function (event, fromAdapter) {
       var newFiles = Array.prototype.filter.call(event.target.files || [], function (file) {
         // 过滤maxSize
@@ -66,41 +60,32 @@ export var Upload = /*#__PURE__*/function () {
           _this.props.onMaxSizeExceed && _this.props.onMaxSizeExceed(file);
           return false;
         }
-
         return true;
       }) || [];
-
       if (!fromAdapter) {
         event.target.value = '';
-      } // 截断limit
-
-
+      }
+      // 截断limit
       if (_this.props.limit !== 0 && newFiles.length + _this.props.files.length > _this.props.limit) {
         _this.props.onLimitExceed && _this.props.onLimitExceed(newFiles);
         newFiles.length = _this.props.limit - _this.props.files.length;
       }
-
       _this.handleFile(newFiles);
     };
-
     this.deleteFile = function (index) {
       _this.props.onDeleteClick && _this.props.onDeleteClick(index);
-
       _this.props.onChange(_this.props.files.filter(function (_i, j) {
         return j !== index;
       }));
     };
-
+    // 重新上传
     this.retryUpload = function (index) {
       _this.deleteFile(index);
-
       _this.handleFile([_this.props.files[index].file]);
     };
-
     this.handleSelect = function (e) {
       if (e.target !== _this.fileRef.current) {
         var _this$fileRef$current;
-
         _this.props.onUploadClick && _this.props.onUploadClick();
         _this.props.selectAdapter ? _this.props.selectAdapter().then(function (value) {
           return _this.handleChange({
@@ -111,39 +96,31 @@ export var Upload = /*#__PURE__*/function () {
         }) : (_this$fileRef$current = _this.fileRef.current) == null ? void 0 : _this$fileRef$current.click();
       }
     };
-
     this.handleClick = function (e, file, index) {
       clearTimeout(_this.timeOutEvent);
-
       if (_this.timeOutEvent !== 0) {
         _this.props.onClick == null ? void 0 : _this.props.onClick(e, file, index);
       }
     };
-
     this.handleTouchStart = function (e, image, index) {
       _this.timeOutEvent = setTimeout(function () {
         _this.timeOutEvent = 0;
         _this.props.onLongPress == null ? void 0 : _this.props.onLongPress(e, image, index);
       }, 750);
     };
-
     this.props = _extends({}, props);
     this.fileRef = fileRef;
     this.cacheRef = cacheRef;
     this.init();
   }
-
   var _proto = Upload.prototype;
-
   _proto.init = function init() {
     !this.props.files && (this.props.files = []);
     !this.props.limit && (this.props.limit = 0);
     !this.props.onChange && (this.props.onChange = function () {
       return null;
     });
-  } // 解析文件生成预览
-  ;
-
+  };
   return Upload;
 }();
 export var parseFile = function parseFile(file) {
@@ -152,23 +129,17 @@ export var parseFile = function parseFile(file) {
       resolve(file.url);
     } else {
       var reader = new FileReader();
-
       reader.onload = function (e) {
         var _e$target;
-
         var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
-
         if (!dataURL) {
           reject(new Error('file parse error'));
         }
-
         resolve(dataURL);
       };
-
       reader.onerror = function () {
         reject(new Error('file parse error'));
       };
-
       reader.readAsDataURL(file);
     }
   });

package/esnext/form/form-item.js

@@ -50,7 +50,7 @@ class FormItemInner extends PureComponent {
         this.validateField = (validateTrigger) => {
             const { validateMessages } = this.context;
             const { getFieldValue } = this.context.form;
-            const { field, rules, onValidateStatusChange } = this.props;
+            const { field, rules, onValidateStatusChange, labelName } = this.props;
             const value = getFieldValue(field);
             // rules: if validateTrigger is not defined, all rules will be validated
             // if validateTrigger is defined, only rules  with validateTrigger  or  without rule.validateTrigger  will be validated
@@ -62,10 +62,11 @@ class FormItemInner extends PureComponent {
                 : rules;
             if (curRules?.length && field) {
                 const fieldDom = this.props.getFormItemRef();
-                const fieldValidator = new Validator({ [field]: curRules }, { validateMessages });
+                const validateFieldName = labelName || field;
+                const fieldValidator = new Validator({ [validateFieldName]: curRules }, { validateMessages });
                 return new ES6Promise(resolve => {
-                    fieldValidator.validate({ [field]: value }, (errorsMap) => {
-                        const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[field] || []);
+                    fieldValidator.validate({ [validateFieldName]: value }, (errorsMap) => {
+                        const { errors, warnings, errorTypes } = getErrorAndWarnings(errorsMap?.[validateFieldName] || []);
                         this._errors = errors;
                         onValidateStatusChange({
                             errors: this._errors,
@@ -193,13 +194,17 @@ class FormItemInner extends PureComponent {
 FormItemInner.contextType = FormItemContext;
 export { FormItemInner };
 export default forwardRef((props, ref) => {
-    const { label, field, disabled = false, layout: itemLayout, style, extra, requiredIcon, rules, className = '', ...rest } = props;
+    const { label, field, disabled = false, layout: itemLayout, style, extra, requiredIcon, rules, className = '', labelName, ...rest } = props;
     const { prefixCls } = useContext(GlobalContext);
     const { layout, disabled: propsDisabled } = useContext(FormItemContext);
     const [errors, setErrors] = useState(null);
     const [errorTypes, setErrorTypes] = useState(null);
     const [warnings, setWarnings] = useState([]);
     const formItemRef = useRef(null);
+    // Prioritize user provided label (if exists and valid string).
+    // Only use labelName as substitute when label is invalid (not a string) or not provided.
+    const labelStr = labelName || (typeof label === 'string' ? label : undefined);
+    const renderedLabel = label !== undefined ? label : labelName;
     const onValidateStatusChange = (validateResult) => {
         const { errors: _errors, warnings: _warnings, errorTypes: _errorTypes } = validateResult;
         setErrors(_errors.length ? _errors[0] : null);
@@ -227,10 +232,10 @@ export default forwardRef((props, ref) => {
             isRequired
                 ? requiredIcon || (React.createElement("span", { className: cls(`${prefixCls}-form-label-item-required-asterisk`) }, "*"))
                 : null,
-            label),
+            renderedLabel),
         React.createElement("div", { className: cls(`${prefixCls}-form-item-control-wrapper`) },
             React.createElement("div", { className: cls(`${prefixCls}-form-item-control`) },
-                React.createElement(FormItemInner, Object.assign({}, rest, { rules: fieldRules, disabled: fieldDisabled, field: field, onValidateStatusChange: onValidateStatusChange, getFormItemRef: getFormItemRef }))),
+                React.createElement(FormItemInner, Object.assign({}, rest, { rules: fieldRules, disabled: fieldDisabled, field: field, labelName: labelStr, onValidateStatusChange: onValidateStatusChange, getFormItemRef: getFormItemRef }))),
             errors && (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-error-message`) }, errors)),
             (warnings || []).map((node, key) => typeof node === 'string' ? (React.createElement("div", { className: cls(`${prefixCls}-form-item-message ${prefixCls}-form-item-warning-message`), key: key }, node)) : (node))),
         extra));

package/esnext/form/type.d.ts

@@ -245,7 +245,12 @@ export interface FormItemProps {
      * 表单项名
      * @en The form item name
      */
-    label: ReactNode;
+    label?: ReactNode;
+    /**
+     * 校验提示中的字段名（当 label 为复杂节点时推荐设置）
+     * @en The field name in the validation message (recommended when label is a complex node)
+     */
+    labelName?: string;
     /**
      * 表单项Stylesheet
      * @en The form item stylesheet
@@ -332,6 +337,11 @@ export interface IFormItemInnerProps {
      * @en Form item field
      */
     field: string;
+    /**
+     * 校验提示中的字段名
+     * @en The field name in the validation message
+     */
+    labelName?: string;
     /**
      * 表单项子节点
      * @en Form item children