@douyinfe/semi-ui 2.30.0-alpha.0 → 2.30.0

package/lib/es/treeSelect/index.js

@@ -47,9 +47,9 @@ class TreeSelect extends BaseComponent {
         suffix
       } = this.props;
       const suffixWrapperCls = cls({
-        ["".concat(prefixcls, "-suffix")]: true,
-        ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
-        ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
+        [`${prefixcls}-suffix`]: true,
+        [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
+        [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: suffixWrapperCls,
@@ -65,11 +65,11 @@ class TreeSelect extends BaseComponent {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = cls({
-        ["".concat(prefixcls, "-prefix")]: true,
+        [`${prefixcls}-prefix`]: true,
         // to be doublechecked
-        ["".concat(prefixcls, "-inset-label")]: insetLabel,
-        ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
-        ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
+        [`${prefixcls}-inset-label`]: insetLabel,
+        [`${prefixcls}-prefix-text`]: labelNode && _isString(labelNode),
+        [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -89,7 +89,7 @@ class TreeSelect extends BaseComponent {
       const style = Object.assign({
         minWidth: dropdownMinWidth
       }, dropdownStyle);
-      const popoverCls = cls(dropdownClassName, "".concat(prefixcls, "-popover"));
+      const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
       return /*#__PURE__*/React.createElement("div", {
         className: popoverCls,
         style: style
@@ -214,7 +214,7 @@ class TreeSelect extends BaseComponent {
           color: 'white',
           visible: true,
           onClose,
-          key: "tag-".concat(key, "-").concat(index),
+          key: `tag-${key}-${index}`,
           size: size === 'small' ? 'small' : 'large'
         };
 
@@ -241,9 +241,9 @@ class TreeSelect extends BaseComponent {
         inputTriggerFocus
       } = this.state;
       const renderText = this.foundation.getRenderTextInSingle();
-      const spanCls = cls("".concat(prefixcls, "-selection-TriggerSearchItem"), {
-        ["".concat(prefixcls, "-selection-TriggerSearchItem-placeholder")]: (inputTriggerFocus || !renderText) && !disabled,
-        ["".concat(prefixcls, "-selection-TriggerSearchItem-disabled")]: disabled
+      const spanCls = cls(`${prefixcls}-selection-TriggerSearchItem`, {
+        [`${prefixcls}-selection-TriggerSearchItem-placeholder`]: (inputTriggerFocus || !renderText) && !disabled,
+        [`${prefixcls}-selection-TriggerSearchItem-disabled`]: disabled
       });
       return /*#__PURE__*/React.createElement("span", {
         className: spanCls
@@ -281,7 +281,7 @@ class TreeSelect extends BaseComponent {
       if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = cls({
-          ["".concat(prefixcls, "-selection-placeholder")]: !renderText
+          [`${prefixcls}-selection-placeholder`]: !renderText
         });
         return /*#__PURE__*/React.createElement("span", {
           className: spanCls
@@ -348,7 +348,7 @@ class TreeSelect extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls("".concat(prefixcls, "-arrow")),
+        className: cls(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -358,7 +358,7 @@ class TreeSelect extends BaseComponent {
       const {
         clearIcon
       } = this.props;
-      const clearCls = cls("".concat(prefixcls, "-clearbtn"));
+      const clearCls = cls(`${prefixcls}-clearbtn`);
 
       if (showClearBtn) {
         return /*#__PURE__*/React.createElement("div", {
@@ -393,12 +393,11 @@ class TreeSelect extends BaseComponent {
         triggerRender
       } = this.props;
       const {
-        isOpen,
-        isInput,
         inputValue,
         selectedKeys,
         checkedKeys,
-        keyEntities
+        keyEntities,
+        isFocus
       } = this.state;
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
@@ -412,20 +411,20 @@ class TreeSelect extends BaseComponent {
 
       const isValueTriggerSearch = isTriggerPositionSearch && !_isEmpty(checkedKeys);
       const classNames = useCustomTrigger ? cls(className) : cls(prefixcls, {
-        ["".concat(prefixcls, "-focus")]: isOpen && !isInput,
-        ["".concat(prefixcls, "-disabled")]: disabled,
-        ["".concat(prefixcls, "-single")]: !multiple,
-        ["".concat(prefixcls, "-multiple")]: multiple,
-        ["".concat(prefixcls, "-multiple-tagInput-empty")]: multiple && isEmptyTriggerSearch,
-        ["".concat(prefixcls, "-multiple-tagInput-notEmpty")]: multiple && isValueTriggerSearch,
-        ["".concat(prefixcls, "-filterable")]: filterable,
-        ["".concat(prefixcls, "-error")]: validateStatus === 'error',
-        ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
-        ["".concat(prefixcls, "-small")]: size === 'small',
-        ["".concat(prefixcls, "-large")]: size === 'large',
-        ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
-        ["".concat(prefixcls, "-with-suffix")]: suffix,
-        ["".concat(prefixcls, "-with-suffix")]: suffix
+        [`${prefixcls}-focus`]: isFocus,
+        [`${prefixcls}-disabled`]: disabled,
+        [`${prefixcls}-single`]: !multiple,
+        [`${prefixcls}-multiple`]: multiple,
+        [`${prefixcls}-multiple-tagInput-empty`]: multiple && isEmptyTriggerSearch,
+        [`${prefixcls}-multiple-tagInput-notEmpty`]: multiple && isValueTriggerSearch,
+        [`${prefixcls}-filterable`]: filterable,
+        [`${prefixcls}-error`]: validateStatus === 'error',
+        [`${prefixcls}-warning`]: validateStatus === 'warning',
+        [`${prefixcls}-small`]: size === 'small',
+        [`${prefixcls}-large`]: size === 'large',
+        [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+        [`${prefixcls}-with-suffix`]: suffix,
+        [`${prefixcls}-with-suffix`]: suffix
       }, className);
       const triggerRenderKeys = multiple ? normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
       const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
@@ -443,7 +442,7 @@ class TreeSelect extends BaseComponent {
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
         key: 'selection'
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-selection")
+        className: `${prefixcls}-selection`
       }, this.renderSelectContent())), /*#__PURE__*/React.createElement(Fragment, {
         key: 'suffix'
       }, suffix ? this.renderSuffix() : null), /*#__PURE__*/React.createElement(Fragment, {
@@ -494,8 +493,8 @@ class TreeSelect extends BaseComponent {
       const keyList = normalizeKeyList([key], keyEntities, leafOnly, true);
       const nodes = keyList.map(i => keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
       const value = getValueOrKey(nodes);
-      const tagCls = cls("".concat(prefixcls, "-selection-tag"), {
-        ["".concat(prefixcls, "-selection-tag-disabled")]: disabled
+      const tagCls = cls(`${prefixcls}-selection-tag`, {
+        [`${prefixcls}-selection-tag-disabled`]: disabled
       });
       const nodeHaveData = !_isEmpty(nodes) && !_isEmpty(nodes[0]);
       const isDisableStrictlyNode = disableStrictly && nodeHaveData && disabledKeys.has(nodes[0].key);
@@ -509,7 +508,7 @@ class TreeSelect extends BaseComponent {
 
       const tagProps = {
         size: size === 'small' ? 'small' : 'large',
-        key: "tag-".concat(value, "-").concat(idx),
+        key: `tag-${value}-${idx}`,
         color: 'white',
         className: tagCls,
         closable,
@@ -552,7 +551,8 @@ class TreeSelect extends BaseComponent {
         showRestTagsPopover,
         restTagsPopoverProps,
         searchPosition,
-        filterTreeNode
+        filterTreeNode,
+        preventScroll
       } = this.props;
       const {
         keyEntities,
@@ -591,7 +591,8 @@ class TreeSelect extends BaseComponent {
         autoFocus: autoFocus,
         renderTagItem: (itemKey, index) => this.renderTagItem(itemKey, index),
         onRemove: itemKey => this.removeTag(itemKey),
-        expandRestTagsOnClick: false
+        expandRestTagsOnClick: false,
+        preventScroll: preventScroll
       });
     }; // render Tree
 
@@ -608,8 +609,8 @@ class TreeSelect extends BaseComponent {
       } = this.props;
       const isDropdownPositionSearch = searchPosition === strings.SEARCH_POSITION_DROPDOWN;
       const inputcls = cls({
-        ["".concat(prefixTree, "-input")]: isDropdownPositionSearch,
-        ["".concat(prefixcls, "-inputTrigger")]: !isDropdownPositionSearch
+        [`${prefixTree}-input`]: isDropdownPositionSearch,
+        [`${prefixcls}-inputTrigger`]: !isDropdownPositionSearch
       });
       const {
         inputValue
@@ -631,8 +632,8 @@ class TreeSelect extends BaseComponent {
       };
       const realInputProps = isDropdownPositionSearch ? inputDropdownProps : inputTriggerProps;
       const wrapperCls = cls({
-        ["".concat(prefixTree, "-search-wrapper")]: isDropdownPositionSearch,
-        ["".concat(prefixcls, "-triggerSingleSearch-wrapper")]: !isDropdownPositionSearch && !multiple
+        [`${prefixTree}-search-wrapper`]: isDropdownPositionSearch,
+        [`${prefixcls}-triggerSingleSearch-wrapper`]: !isDropdownPositionSearch && !multiple
       });
       const useCusSearch = typeof searchRender === 'function' || typeof searchRender === 'boolean';
 
@@ -825,7 +826,7 @@ class TreeSelect extends BaseComponent {
           // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
           itemData: flattenNodes,
-          className: "".concat(prefixTree, "-virtual-list"),
+          className: `${prefixTree}-virtual-list`,
           style: {
             direction
           }
@@ -862,9 +863,9 @@ class TreeSelect extends BaseComponent {
         renderFullLabel,
         checkRelation
       } = this.props;
-      const wrapperCls = cls("".concat(prefixTree, "-wrapper"));
-      const listCls = cls("".concat(prefixTree, "-option-list"), {
-        ["".concat(prefixTree, "-option-list-block")]: true
+      const wrapperCls = cls(`${prefixTree}-wrapper`);
+      const listCls = cls(`${prefixTree}-option-list`, {
+        [`${prefixTree}-option-list-block`]: true
       });
       const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
       const noData = _isEmpty(flattenNodes) || showFilteredOnly && searchNoRes;
@@ -909,7 +910,8 @@ class TreeSelect extends BaseComponent {
     this.state = {
       inputTriggerFocus: false,
       isOpen: false,
-      isInput: false,
+      isFocus: false,
+      // isInput: false,
       rePosKey: key,
       dropdownMinWidth: null,
       inputValue: '',
@@ -1207,7 +1209,12 @@ class TreeSelect extends BaseComponent {
       updateInputFocus: bool => {
         if (bool) {
           if (this.inputRef && this.inputRef.current) {
-            this.inputRef.current.focus();
+            const {
+              preventScroll
+            } = this.props;
+            this.inputRef.current.focus({
+              preventScroll
+            });
           }
 
           if (this.tagInputRef && this.tagInputRef.current) {
@@ -1222,8 +1229,12 @@ class TreeSelect extends BaseComponent {
             this.tagInputRef.current.blur();
           }
         }
-      } // eslint-disable-line
-
+      },
+      updateIsFocus: bool => {
+        this.setState({
+          isFocus: bool
+        });
+      }
     });
   }
 
@@ -1360,7 +1371,8 @@ TreeSelect.propTypes = {
   checkRelation: PropTypes.string,
   'aria-label': PropTypes.string,
   showRestTagsPopover: PropTypes.bool,
-  restTagsPopoverProps: PropTypes.object
+  restTagsPopoverProps: PropTypes.object,
+  preventScroll: PropTypes.bool
 };
 TreeSelect.defaultProps = {
   searchPosition: strings.SEARCH_POSITION_DROPDOWN,

package/lib/es/typography/base.js

@@ -233,7 +233,7 @@ export default class Base extends Component {
           React.createElement("a", {
             role: "button",
             tabIndex: 0,
-            className: "".concat(prefixCls, "-ellipsis-expand"),
+            className: `${prefixCls}-ellipsis-expand`,
             key: "expand",
             ref: this.expandRef,
             "aria-label": text,
@@ -309,10 +309,10 @@ export default class Base extends Component {
       } = this.state;
       const useCSS = !expanded && this.canUseCSSEllipsis();
       const ellipsisCls = cls({
-        ["".concat(prefixCls, "-ellipsis")]: true,
-        ["".concat(prefixCls, "-ellipsis-single-line")]: rows === 1,
-        ["".concat(prefixCls, "-ellipsis-multiple-line")]: rows > 1,
-        ["".concat(prefixCls, "-ellipsis-overflow-ellipsis")]: rows === 1 && useCSS
+        [`${prefixCls}-ellipsis`]: true,
+        [`${prefixCls}-ellipsis-single-line`]: rows === 1,
+        [`${prefixCls}-ellipsis-multiple-line`]: rows > 1,
+        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS
       });
       const ellipsisStyle = useCSS && rows > 1 ? {
         WebkitLineClamp: rows
@@ -523,7 +523,7 @@ export default class Base extends Component {
 
     const iconSize = size === 'small' ? 'small' : 'default';
     return /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-icon"),
+      className: `${prefixCls}-icon`,
       "x-semi-prop": "icon"
     }, isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
       size: iconSize
@@ -559,8 +559,8 @@ export default class Base extends Component {
     } = this.getEllipsisStyle();
     let textNode = ellipsis ? this.renderEllipsisText(ellipsisOpt) : children;
     const linkCls = cls({
-      ["".concat(prefixCls, "-link-text")]: link,
-      ["".concat(prefixCls, "-link-underline")]: this.props.underline && link
+      [`${prefixCls}-link-text`]: link,
+      [`${prefixCls}-link-underline`]: this.props.underline && link
     });
     textNode = wrapperDecorations(this.props, /*#__PURE__*/React.createElement(React.Fragment, null, iconNode, this.props.link ? /*#__PURE__*/React.createElement("span", {
       className: linkCls
@@ -568,12 +568,12 @@ export default class Base extends Component {
     const hTagReg = /^h[1-6]$/;
     const wrapperCls = cls(className, ellipsisCls, {
       // [`${prefixCls}-primary`]: !type || type === 'primary',
-      ["".concat(prefixCls, "-").concat(type)]: type && !link,
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-link")]: link,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-").concat(spacing)]: spacing,
-      ["".concat(prefixCls, "-").concat(heading)]: _isString(heading) && hTagReg.test(heading)
+      [`${prefixCls}-${type}`]: type && !link,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-link`]: link,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-${spacing}`]: spacing,
+      [`${prefixCls}-${heading}`]: _isString(heading) && hTagReg.test(heading)
     });
     return /*#__PURE__*/React.createElement(Typography, Object.assign({
       className: wrapperCls,

package/lib/es/typography/copyable.js

@@ -83,8 +83,8 @@ export class Copyable extends React.PureComponent {
       copied
     } = this.state;
     const finalCls = cls(className, {
-      ["".concat(prefixCls, "-action-copy")]: !copied,
-      ["".concat(prefixCls, "-action-copied")]: copied
+      [`${prefixCls}-action-copy`]: !copied,
+      [`${prefixCls}-action-copied`]: copied
     });
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Typography"
@@ -97,7 +97,7 @@ export class Copyable extends React.PureComponent {
     }, copied ? this.renderSuccessTip() : /*#__PURE__*/React.createElement(Tooltip, {
       content: typeof copyTip !== 'undefined' ? copyTip : locale.copy
     }, /*#__PURE__*/React.createElement("a", {
-      className: "".concat(prefixCls, "-action-copy-icon")
+      className: `${prefixCls}-action-copy-icon`
     }, /*#__PURE__*/React.createElement(IconCopy, {
       role: "button",
       tabIndex: 0,

package/lib/es/typography/numeral.d.ts

@@ -28,7 +28,7 @@ export default class Numeral extends PureComponent<NumeralProps> {
     static propTypes: {
         rule: PropTypes.Requireable<"text" | "numbers" | "bytes-decimal" | "bytes-binary" | "percentages" | "exponential">;
         precision: PropTypes.Requireable<number>;
-        truncate: PropTypes.Requireable<"ceil" | "floor" | "round">;
+        truncate: PropTypes.Requireable<"round" | "ceil" | "floor">;
         parser: PropTypes.Requireable<(...args: any[]) => any>;
         copyable: PropTypes.Requireable<NonNullable<boolean | object>>;
         delete: PropTypes.Requireable<boolean>;

package/lib/es/typography/paragraph.js

@@ -9,7 +9,7 @@ export default class Paragraph extends PureComponent {
     const {
       className
     } = this.props;
-    const paragraphCls = cls(className, "".concat(prefixCls, "-paragraph"));
+    const paragraphCls = cls(className, `${prefixCls}-paragraph`);
     return /*#__PURE__*/React.createElement(Base, Object.assign({
       component: 'p'
     }, this.props, {

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/typography/title.js

@@ -21,7 +21,7 @@ export default class Title extends PureComponent {
     } = _a,
           rest = __rest(_a, ["heading"]);
 
-    const component = strings.HEADING.indexOf(heading) !== -1 ? "h".concat(heading) : 'h1'; // Passing headings to support custom components
+    const component = strings.HEADING.indexOf(heading) !== -1 ? `h${heading}` : 'h1'; // Passing headings to support custom components
 
     return /*#__PURE__*/React.createElement(Base, Object.assign({
       component: component,

package/lib/es/typography/util.js

@@ -23,7 +23,7 @@ function styleToString(style) {
   // There are some different behavior between Firefox & Chrome.
   // We have to handle this ourself.
   const styleNames = Array.prototype.slice.apply(style);
-  return styleNames.map(name => "".concat(name, ": ").concat(style.getPropertyValue(name), ";")).join('');
+  return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
 }
 
 const getRenderText = function (originEle, rows) {

package/lib/es/upload/fileCard.js

@@ -103,13 +103,13 @@ class FileCard extends PureComponent {
       case typeof validateMessage === 'string' && status === strings.FILE_STATUS_VALIDATING:
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
           size: "small",
-          wrapperClassName: "".concat(prefixCls, "-file-card-icon-loading")
+          wrapperClassName: `${prefixCls}-file-card-icon-loading`
         }), validateMessage);
         break;
 
       case typeof validateMessage === 'string':
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconAlertCircle, {
-          className: "".concat(prefixCls, "-file-card-icon-error")
+          className: `${prefixCls}-file-card-icon-error`
         }), validateMessage);
         break;
 
@@ -135,13 +135,13 @@ class FileCard extends PureComponent {
       case validateMessage && status === strings.FILE_STATUS_VALIDATING:
         icon = /*#__PURE__*/React.createElement(Spin, {
           size: "small",
-          wrapperClassName: "".concat(prefixCls, "-picture-file-card-icon-loading")
+          wrapperClassName: `${prefixCls}-picture-file-card-icon-loading`
         });
         break;
 
       case validateMessage && (status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL):
         icon = /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-picture-file-card-icon-error")
+          className: `${prefixCls}-picture-file-card-icon-error`
         }, /*#__PURE__*/React.createElement(ErrorSvg, null));
         break;
 
@@ -176,19 +176,19 @@ class FileCard extends PureComponent {
     const showReplace = status === strings.FILE_STATUS_SUCCESS && this.props.showReplace;
     const showPreview = status === strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = cls({
-      ["".concat(prefixCls, "-picture-file-card")]: true,
-      ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
-      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined',
-      ["".concat(prefixCls, "-picture-file-card-error")]: status === strings.FILE_STATUS_UPLOAD_FAIL,
-      ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
+      [`${prefixCls}-picture-file-card`]: true,
+      [`${prefixCls}-picture-file-card-disabled`]: disabled,
+      [`${prefixCls}-picture-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined',
+      [`${prefixCls}-picture-file-card-error`]: status === strings.FILE_STATUS_UPLOAD_FAIL,
+      [`${prefixCls}-picture-file-card-uploading`]: showProgress
     });
     const retry = /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
-      className: "".concat(prefixCls, "-picture-file-card-retry"),
+      className: `${prefixCls}-picture-file-card-retry`,
       onClick: e => this.onRetry(e)
     }, /*#__PURE__*/React.createElement(IconRefresh, {
-      className: "".concat(prefixCls, "-picture-file-card-icon-retry")
+      className: `${prefixCls}-picture-file-card-icon-retry`
     }));
     const replace = /*#__PURE__*/React.createElement(Tooltip, {
       trigger: "hover",
@@ -199,24 +199,24 @@ class FileCard extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
-      className: "".concat(prefixCls, "-picture-file-card-replace"),
+      className: `${prefixCls}-picture-file-card-replace`,
       onClick: e => this.onReplace(e)
     }, /*#__PURE__*/React.createElement(ReplaceSvg, {
-      className: "".concat(prefixCls, "-picture-file-card-icon-replace")
+      className: `${prefixCls}-picture-file-card-icon-replace`
     })));
     const preview = /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-picture-file-card-preview")
+      className: `${prefixCls}-picture-file-card-preview`
     }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
     const close = /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
-      className: "".concat(prefixCls, "-picture-file-card-close"),
+      className: `${prefixCls}-picture-file-card-close`,
       onClick: e => this.onRemove(e)
     }, /*#__PURE__*/React.createElement(IconClear, {
-      className: "".concat(prefixCls, "-picture-file-card-icon-close")
+      className: `${prefixCls}-picture-file-card-icon-close`
     }));
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-picture-file-card-pic-info")
+      className: `${prefixCls}-picture-file-card-pic-info`
     }, index + 1);
     const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/React.createElement("img", {
       src: url,
@@ -252,17 +252,17 @@ class FileCard extends PureComponent {
       renderFileOperation
     } = this.props;
     const fileCardCls = cls({
-      ["".concat(prefixCls, "-file-card")]: true,
-      ["".concat(prefixCls, "-file-card-fail")]: status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL,
-      ["".concat(prefixCls, "-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
+      [`${prefixCls}-file-card`]: true,
+      [`${prefixCls}-file-card-fail`]: status === strings.FILE_STATUS_VALID_FAIL || status === strings.FILE_STATUS_UPLOAD_FAIL,
+      [`${prefixCls}-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined'
     });
     const previewCls = cls({
-      ["".concat(prefixCls, "-file-card-preview")]: true,
-      ["".concat(prefixCls, "-file-card-preview-placeholder")]: !preview || previewFile
+      [`${prefixCls}-file-card-preview`]: true,
+      [`${prefixCls}-file-card-preview-placeholder`]: !preview || previewFile
     });
-    const infoCls = "".concat(prefixCls, "-file-card-info");
-    const closeCls = "".concat(prefixCls, "-file-card-close");
-    const replaceCls = "".concat(prefixCls, "-file-card-replace");
+    const infoCls = `${prefixCls}-file-card-info`;
+    const closeCls = `${prefixCls}-file-card-close`;
+    const replaceCls = `${prefixCls}-file-card-replace`;
     const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS_UPLOADING; // only show retry when upload fail & showRetry is true, no need to show during validate fail
 
     const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
@@ -295,13 +295,13 @@ class FileCard extends PureComponent {
     }, /*#__PURE__*/React.createElement("div", {
       className: previewCls
     }, previewContent), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(infoCls, "-main")
+      className: `${infoCls}-main`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(infoCls, "-main-text")
+      className: `${infoCls}-main-text`
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(infoCls, "-name")
+      className: `${infoCls}-name`
     }, name), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(infoCls, "-size")
+      className: `${infoCls}-size`
     }, fileSize), showReplace && /*#__PURE__*/React.createElement(Tooltip, {
       trigger: "hover",
       position: "top",
@@ -321,13 +321,13 @@ class FileCard extends PureComponent {
       },
       "aria-label": "uploading file progress"
     }) : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(infoCls, "-main-control")
+      className: `${infoCls}-main-control`
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(infoCls, "-validate-message")
+      className: `${infoCls}-validate-message`
     }, this.renderValidateMessage()), showRetry ? /*#__PURE__*/React.createElement("span", {
       role: "button",
       tabIndex: 0,
-      className: "".concat(infoCls, "-retry"),
+      className: `${infoCls}-retry`,
       onClick: e => this.onRetry(e)
     }, locale.retry) : null)), operation);
   }