@douyinfe/semi-ui 2.11.2 → 2.12.0-alpha.0

package/tag/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable no-unused-vars */
 /* eslint-disable max-len */
 import React, { Component } from 'react';
@@ -7,7 +8,9 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
 import Avatar from '../avatar/index';
 import { IconClose } from '@douyinfe/semi-icons';
 import { TagProps, TagSize, TagColor, TagType } from './interface';
+import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
 import '@douyinfe/semi-foundation/tag/tag.scss';
+import { isString } from 'lodash';
 
 export * from './interface';
 
@@ -50,6 +53,7 @@ export default class Tag extends Component<TagProps, TagState> {
         className: PropTypes.string,
         avatarSrc: PropTypes.string,
         avatarShape: PropTypes.oneOf(avatarShapeSet),
+        'aria-label': PropTypes.string,
     };
 
     constructor(props: TagProps) {
@@ -58,6 +62,7 @@ export default class Tag extends Component<TagProps, TagState> {
             visible: true,
         };
         this.close = this.close.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
 
     // any other way to achieve this?
@@ -88,6 +93,26 @@ export default class Tag extends Component<TagProps, TagState> {
         this.setVisible(false);
     }
 
+    handleKeyDown(event: any) {
+        const { closable, onClick } = this.props;
+        switch (event.key) {
+            case "Backspace":
+            case "Delete":
+                closable && this.close(event, this.props.children);
+                handlePrevent(event);
+                break;
+            case "Enter":
+                onClick(event);
+                handlePrevent(event);
+                break;
+            case 'Escape':
+                event.target.blur();
+                break;
+            default:
+                break;
+        }
+    }
+
     renderAvatar() {
         const { avatarShape, avatarSrc } = this.props;
         const avatar = <Avatar src={avatarSrc} shape={avatarShape} />;
@@ -95,10 +120,13 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     render() {
-        const { children, size, color, closable, visible, onClose, className, type, avatarSrc, avatarShape, ...attr } = this.props;
+        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, ...attr } = this.props;
         const { visible: isVisible } = this.state;
+        const clickable = onClick !== Tag.defaultProps.onClick || closable;
+        const a11yProps = { role: 'button', tabIndex: 0, onKeyDown: this.handleKeyDown };
         const baseProps = {
             ...attr,
+            onClick,
             className: classNames(
                 prefixCls,
                 {
@@ -114,13 +142,15 @@ export default class Tag extends Component<TagProps, TagState> {
                 className
             ),
         };
+        const wrapProps = clickable ? ({ ...baseProps, ...a11yProps }) : baseProps;
         const closeIcon = closable ? (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div className={`${prefixCls}-close`} onClick={e => this.close(e, children)}>
                 <IconClose size="small" />
             </div>
         ) : null;
         return (
-            <div {...baseProps}>
+            <div aria-label={this.props['aria-label'] || isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : '' } {...wrapProps}>
                 <div className={`${prefixCls}-content`}>
                     {avatarSrc ? this.renderAvatar() : null}
                     {children}

package/tag/interface.ts

@@ -33,6 +33,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 export interface TagGroupProps {

package/tagInput/index.tsx

@@ -273,7 +273,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             // eslint-disable-next-line max-len
             [`${prefixCls}-prefix-icon`]: React.isValidElement(prefix) && !(prefix && isString(prefix)),
         });
-        return <div className={prefixWrapperCls}>{prefix}</div>;
+        return <div className={prefixWrapperCls} x-semi-prop="prefix">{prefix}</div>;
     }
 
     renderSuffix() {
@@ -286,7 +286,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             // eslint-disable-next-line max-len
             [`${prefixCls}-suffix-icon`]: React.isValidElement(suffix) && !(suffix && isString(suffix)),
         });
-        return <div className={suffixWrapperCls}>{suffix}</div>;
+        return <div className={suffixWrapperCls} x-semi-prop="suffix">{suffix}</div>;
     }
 
     renderTags() {
@@ -328,6 +328,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                         closable={!disabled}
                         key={`${index}${value}`}
                         visible
+                        aria-label={`${!disabled ? 'Closable ' : ''}Tag: ${value}`}
                     >
                         <Paragraph
                             className={typoCls}

package/timePicker/Combobox.tsx

@@ -317,7 +317,12 @@ class Combobox extends BaseComponent<ComboboxProps, ComboboxState> {
         return (
             <LocaleConsumer componentName="TimePicker">
                 {(locale: Locale['TimePicker'], localeCode: Locale['code']) => (
-                    <ScrollList header={panelHeader} footer={panelFooter}>
+                    <ScrollList
+                        header={panelHeader}
+                        footer={panelFooter} 
+                        x-semi-header-alias="panelHeader"
+                        x-semi-footer-alias="panelFooter"
+                    >
                         {this.renderAMPMSelect(locale, localeCode)}
                         {this.renderHourSelect(value.getHours(), locale)}
                         {this.renderMinuteSelect(value.getMinutes(), locale)}

package/toast/toast.tsx

@@ -120,7 +120,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         const btnSize = 'small';
         return (
             <div
-                role='alert'
+                role="alert"
                 aria-label={`${type ? type : 'default'} type`}
                 className={toastCls}
                 style={style}
@@ -129,7 +129,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
             >
                 <div className={`${prefixCls}-content`}>
                     {this.renderIcon()}
-                    <span className={`${prefixCls}-content-text`} style={textStyle}>
+                    <span className={`${prefixCls}-content-text`} style={textStyle} x-semi-prop="content">
                         {content}
                     </span>
                     {showClose && (
@@ -137,7 +137,7 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
                             <Button
                                 onClick={e => this.close(e)}
                                 type="tertiary"
-                                icon={<IconClose />}
+                                icon={<IconClose x-semi-prop="icon" />}
                                 theme={btnTheme}
                                 size={btnSize}
                             />

package/transfer/index.tsx

@@ -353,6 +353,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 checked={checked}
                 role="listitem"
                 onChange={() => this.onSelectOrRemove(item)}
+                x-semi-children-alias={`dataSource[${index}].label`}
             >
                 {item.label}
             </Checkbox>

package/tree/treeNode.tsx

@@ -269,7 +269,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         });
         return (
             <ul className={wrapperCls}>
-                <li className={`${prefixcls}-label ${prefixcls}-label-empty`}>
+                <li className={`${prefixcls}-label ${prefixcls}-label-empty`} x-semi-prop="emptyContent">
                     {emptyContent}
                 </li>
             </ul>

package/treeSelect/index.tsx

@@ -646,7 +646,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-suffix-text`]: suffix && isString(suffix),
             [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix),
         });
-        return <div className={suffixWrapperCls}>{suffix}</div>;
+        return (
+            <div className={suffixWrapperCls} x-semi-prop="suffix">
+                {suffix}
+            </div>
+        );
     };
 
     renderPrefix = () => {
@@ -660,7 +664,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
+        return (
+            <div className={prefixWrapperCls} id={insetLabelId} x-semi-prop="prefix,insetLabel">
+                {labelNode}
+            </div>
+        );
     };
 
     renderContent = () => {
@@ -731,7 +739,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         let renderKeys = [];
         if (checkRelation === 'related') {
             renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
-        } else if (checkRelation === 'unRelated') {
+        } else if (checkRelation === 'unRelated' && Object.keys(keyEntities).length > 0) {
             renderKeys = [...realCheckedKeys];
         }
         const tagList: Array<React.ReactNode> = [];
@@ -867,7 +875,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (showClearBtn) {
             return null;
         }
-        return arrowIcon ? <div className={cls(`${prefixcls}-arrow`)}>{arrowIcon}</div> : null;
+        return arrowIcon ? (
+            <div className={cls(`${prefixcls}-arrow`)} x-semi-prop="arrowIcon">
+                {arrowIcon}
+            </div>
+        ) : null;
     };
 
     renderClearBtn = () => {

package/typography/base.tsx

@@ -526,7 +526,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         }
         const iconSize: Size = size === 'small' ? 'small' : 'default';
         return (
-            <span className={`${prefixCls}-icon`}>
+            <span className={`${prefixCls}-icon`} x-semi-prop="icon">
                 {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: iconSize }) : icon}
             </span>
         );

package/upload/index.tsx

@@ -3,25 +3,54 @@ import React, { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } fr
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { noop, pick } from 'lodash';
-import UploadFoundation, { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/upload/foundation';
+import UploadFoundation, {
+    CustomFile,
+    UploadAdapter,
+    BeforeUploadObjectResult,
+    AfterUploadResult,
+} from '@douyinfe/semi-foundation/upload/foundation';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/upload/constants';
 import FileCard from './fileCard';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconUpload } from '@douyinfe/semi-icons';
-import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
+import {
+    FileItem,
+    RenderFileItemProps,
+    UploadListType,
+    PromptPositionType,
+    BeforeUploadProps,
+    AfterUploadProps,
+    OnChangeProps,
+    customRequestArgs,
+    CustomError,
+} from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/upload/upload.scss';
 
 const prefixCls = cssClasses.PREFIX;
 
-export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult };
+export {
+    FileItem,
+    RenderFileItemProps,
+    UploadListType,
+    PromptPositionType,
+    BeforeUploadProps,
+    AfterUploadProps,
+    OnChangeProps,
+    customRequestArgs,
+    CustomError,
+    BeforeUploadObjectResult,
+    AfterUploadResult,
+};
 
 export interface UploadProps {
     accept?: string;
     action: string;
     afterUpload?: (object: AfterUploadProps) => AfterUploadResult;
-    beforeUpload?: (object: BeforeUploadProps) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
+    beforeUpload?: (
+        object: BeforeUploadProps
+    ) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
     beforeClear?: (fileList: Array<FileItem>) => boolean | Promise<boolean>;
     beforeRemove?: (file: FileItem, fileList: Array<FileItem>) => boolean | Promise<boolean>;
     capture?: boolean | 'user' | 'environment' | undefined;
@@ -114,7 +143,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         fileList: PropTypes.array, // files had been uploaded
         fileName: PropTypes.string, // same as name, to avoid props conflict in Form.Upload
         headers: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-        hotSpotLocation: PropTypes.oneOf(['start','end']),
+        hotSpotLocation: PropTypes.oneOf(['start', 'end']),
         itemStyle: PropTypes.object,
         limit: PropTypes.number, // 最大允许上传文件个数
         listType: PropTypes.oneOf<UploadProps['listType']>(strings.LIST_TYPE),
@@ -218,7 +247,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         const { fileList } = props;
         if ('fileList' in props) {
             return {
-                fileList: fileList || []
+                fileList: fileList || [],
             };
         }
         return null;
@@ -228,7 +257,8 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         return {
             ...super.adapter,
             notifyFileSelect: (files): void => this.props.onFileChange(files),
-            notifyError: (error, fileInstance, fileList, xhr): void => this.props.onError(error, fileInstance, fileList, xhr),
+            notifyError: (error, fileInstance, fileList, xhr): void =>
+                this.props.onError(error, fileInstance, fileList, xhr),
             notifySuccess: (responseBody, file, fileList): void => this.props.onSuccess(responseBody, file, fileList),
             notifyProgress: (percent, file, fileList): void => this.props.onProgress(percent, file, fileList),
             notifyRemove: (file, fileList, fileItem): void => this.props.onRemove(file, fileList, fileItem),
@@ -241,19 +271,25 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                     this.setState({ fileList });
                 }
             },
-            notifyBeforeUpload: ({ file, fileList }): boolean | BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> => this.props.beforeUpload({ file, fileList }),
-            notifyAfterUpload: ({ response, file, fileList }): AfterUploadResult => this.props.afterUpload({ response, file, fileList }),
+            notifyBeforeUpload: ({
+                file,
+                fileList,
+            }): boolean | BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> =>
+                this.props.beforeUpload({ file, fileList }),
+            notifyAfterUpload: ({ response, file, fileList }): AfterUploadResult =>
+                this.props.afterUpload({ response, file, fileList }),
             resetInput: (): void => {
                 this.setState(prevState => ({
-                    inputKey: Math.random()
+                    inputKey: Math.random(),
                 }));
             },
             resetReplaceInput: (): void => {
                 this.setState(prevState => ({
-                    replaceInputKey: Math.random()
+                    replaceInputKey: Math.random(),
                 }));
             },
-            updateDragAreaStatus: (dragAreaStatus: string): void => this.setState({ dragAreaStatus } as { dragAreaStatus: 'default' | 'legal' | 'illegal' }),
+            updateDragAreaStatus: (dragAreaStatus: string): void =>
+                this.setState({ dragAreaStatus } as { dragAreaStatus: 'default' | 'legal' | 'illegal' }),
             notifyChange: ({ currentFile, fileList }): void => this.props.onChange({ currentFile, fileList }),
             updateLocalUrls: (urls): void => this.setState({ localUrls: urls }),
             notifyClear: (): void => this.props.onClear(),
@@ -295,7 +331,6 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         this.setState({ replaceIdx: index }, () => {
             this.replaceInputRef.current.click();
         });
-
     };
 
     onReplaceChange = (e: ChangeEvent<HTMLInputElement>): void => {
@@ -316,11 +351,11 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
      * insert files at index
      * @param files Array<CustomFile>
      * @param index number
-     * @returns 
+     * @returns
      */
     insert = (files: Array<CustomFile>, index: number): void => {
         return this.foundation.insertFileToList(files, index);
-    }
+    };
 
     /**
      * ref method
@@ -333,7 +368,19 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
 
     renderFile = (file: FileItem, index: number, locale: Locale['Upload']): ReactNode => {
         const { name, status, validateMessage, _sizeInvalid, uid } = file;
-        const { previewFile, listType, itemStyle, showPicInfo, renderPicInfo, renderPicPreviewIcon, renderFileOperation, renderFileItem, renderThumbnail, disabled, onPreviewClick } = this.props;
+        const {
+            previewFile,
+            listType,
+            itemStyle,
+            showPicInfo,
+            renderPicInfo,
+            renderPicPreviewIcon,
+            renderFileOperation,
+            renderFileItem,
+            renderThumbnail,
+            disabled,
+            onPreviewClick,
+        } = this.props;
         const onRemove = (): void => this.remove(file);
         const onRetry = (): void => {
             this.foundation.retry(file);
@@ -358,7 +405,10 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             renderFileOperation,
             renderThumbnail,
             onReplace,
-            onPreviewClick: typeof onPreviewClick !== 'undefined' ? (): void => this.foundation.handlePreviewClick(file) : undefined,
+            onPreviewClick:
+                typeof onPreviewClick !== 'undefined'
+                    ? (): void => this.foundation.handlePreviewClick(file)
+                    : undefined,
         };
 
         if (status === strings.FILE_STATUS_UPLOAD_FAIL && !validateMessage) {
@@ -404,7 +454,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         });
         const dragAreaCls = cls({
             [`${dragAreaBaseCls}-legal`]: dragAreaStatus === strings.DRAG_AREA_LEGAL,
-            [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === strings.DRAG_AREA_ILLEGAL
+            [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === strings.DRAG_AREA_ILLEGAL,
         });
         const mainCls = `${prefixCls}-file-list-main`;
         const addContentProps = {
@@ -413,7 +463,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             onClick: this.onClick,
         };
         const containerProps = {
-            className: fileListCls
+            className: fileListCls,
         };
         const draggableProps = {
             onDrop: this.onDrop,
@@ -425,7 +475,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             Object.assign(addContentProps, draggableProps, { className: cls(uploadAddCls, dragAreaCls) });
         }
         const addContent = (
-            <div {...addContentProps}>
+            <div {...addContentProps} x-semi-prop="children">
                 {children}
             </div>
         );
@@ -450,7 +500,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                 )}
             </LocaleConsumer>
         );
-    }
+    };
 
     renderFileListDefault = () => {
         const { showUploadList, limit, disabled } = this.props;
@@ -462,7 +512,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         const showTitle = limit !== 1 && fileList.length;
         const showClear = this.props.showClear && !disabled;
         const containerProps = {
-            className: fileListCls
+            className: fileListCls,
         };
 
         if (!showUploadList || !fileList.length) {
@@ -477,7 +527,12 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                             <div className={titleCls}>
                                 <span className={`${titleCls}-choosen`}>{locale.selectedFiles}</span>
                                 {showClear ? (
-                                    <span role="button" tabIndex={0} onClick={this.clear} className={`${titleCls}-clear`}>
+                                    <span
+                                        role="button"
+                                        tabIndex={0}
+                                        onClick={this.clear}
+                                        className={`${titleCls}-clear`}
+                                    >
                                         {locale.clear}
                                     </span>
                                 ) : null}
@@ -491,7 +546,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                 )}
             </LocaleConsumer>
         );
-    }
+    };
 
     onDrop = (e: DragEvent<HTMLDivElement>): void => {
         this.foundation.handleDrop(e);
@@ -524,7 +579,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                 {children}
             </div>
         );
-    }
+    };
 
     renderDragArea = (): ReactNode => {
         const { dragAreaStatus } = this.state;
@@ -554,14 +609,16 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                             children
                         ) : (
                             <>
-                                <div className={`${dragAreaBaseCls}-icon`}>
+                                <div className={`${dragAreaBaseCls}-icon`} x-semi-prop="dragIcon">
                                     {dragIcon || <IconUpload size="extra-large" />}
                                 </div>
                                 <div className={`${dragAreaBaseCls}-text`}>
-                                    <div className={`${dragAreaBaseCls}-main-text`}>
+                                    <div className={`${dragAreaBaseCls}-main-text`} x-semi-prop="dragMainText">
                                         {dragMainText || locale.mainText}
                                     </div>
-                                    <div className={`${dragAreaBaseCls}-sub-text`}>{dragSubText}</div>
+                                    <div className={`${dragAreaBaseCls}-sub-text`} x-semi-prop="dragSubText">
+                                        {dragSubText}
+                                    </div>
                                     <div className={`${dragAreaBaseCls}-tips`}>
                                         {dragAreaStatus === strings.DRAG_AREA_LEGAL && (
                                             <span className={`${dragAreaBaseCls}-tips-legal`}>{locale.legalTips}</span>
@@ -598,14 +655,18 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             validateStatus,
             directory,
         } = this.props;
-        const uploadCls = cls(prefixCls, {
-            [`${prefixCls}-picture`]: listType === strings.FILE_LIST_PIC,
-            [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-default`]: validateStatus === 'default',
-            [`${prefixCls}-error`]: validateStatus === 'error',
-            [`${prefixCls}-warning`]: validateStatus === 'warning',
-            [`${prefixCls}-success`]: validateStatus === 'success',
-        }, className);
+        const uploadCls = cls(
+            prefixCls,
+            {
+                [`${prefixCls}-picture`]: listType === strings.FILE_LIST_PIC,
+                [`${prefixCls}-disabled`]: disabled,
+                [`${prefixCls}-default`]: validateStatus === 'default',
+                [`${prefixCls}-error`]: validateStatus === 'error',
+                [`${prefixCls}-warning`]: validateStatus === 'warning',
+                [`${prefixCls}-success`]: validateStatus === 'success',
+            },
+            className
+        );
         const inputCls = cls(`${prefixCls}-hidden-input`);
         const inputReplaceCls = cls(`${prefixCls}-hidden-input-replace`);
         const promptCls = cls(`${prefixCls}-prompt`);
@@ -640,9 +701,17 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                     ref={this.replaceInputRef}
                 />
                 {this.renderAddContent()}
-                {prompt ? <div className={promptCls}>{prompt}</div> : null}
+                {prompt ? (
+                    <div className={promptCls} x-semi-prop="prompt">
+                        {prompt}
+                    </div>
+                ) : null}
 
-                {validateMessage ? <div className={validateMsgCls}>{validateMessage}</div> : null}
+                {validateMessage ? (
+                    <div className={validateMsgCls} x-semi-prop="validateMessage">
+                        {validateMessage}
+                    </div>
+                ) : null}
                 {this.renderFileList()}
             </div>
         );