@douyinfe/semi-ui 2.29.0 → 2.30.0-alpha.1

package/lib/cjs/treeSelect/index.js

@@ -96,9 +96,9 @@ class TreeSelect extends _baseComponent.default {
         suffix
       } = this.props;
       const suffixWrapperCls = (0, _classnames.default)({
-        [`${prefixcls}-suffix`]: true,
-        [`${prefixcls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
-        [`${prefixcls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix)
+        ["".concat(prefixcls, "-suffix")]: true,
+        ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+        ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: suffixWrapperCls,
@@ -114,11 +114,11 @@ class TreeSelect extends _baseComponent.default {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = (0, _classnames.default)({
-        [`${prefixcls}-prefix`]: true,
+        ["".concat(prefixcls, "-prefix")]: true,
         // to be doublechecked
-        [`${prefixcls}-inset-label`]: insetLabel,
-        [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
-        [`${prefixcls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
+        ["".concat(prefixcls, "-inset-label")]: insetLabel,
+        ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+        ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
@@ -138,7 +138,7 @@ class TreeSelect extends _baseComponent.default {
       const style = Object.assign({
         minWidth: dropdownMinWidth
       }, dropdownStyle);
-      const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
+      const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: popoverCls,
         style: style
@@ -263,7 +263,7 @@ class TreeSelect extends _baseComponent.default {
           color: 'white',
           visible: true,
           onClose,
-          key: `tag-${key}-${index}`,
+          key: "tag-".concat(key, "-").concat(index),
           size: size === 'small' ? 'small' : 'large'
         };
 
@@ -290,9 +290,9 @@ class TreeSelect extends _baseComponent.default {
         inputTriggerFocus
       } = this.state;
       const renderText = this.foundation.getRenderTextInSingle();
-      const spanCls = (0, _classnames.default)(`${prefixcls}-selection-TriggerSearchItem`, {
-        [`${prefixcls}-selection-TriggerSearchItem-placeholder`]: (inputTriggerFocus || !renderText) && !disabled,
-        [`${prefixcls}-selection-TriggerSearchItem-disabled`]: disabled
+      const spanCls = (0, _classnames.default)("".concat(prefixcls, "-selection-TriggerSearchItem"), {
+        ["".concat(prefixcls, "-selection-TriggerSearchItem-placeholder")]: (inputTriggerFocus || !renderText) && !disabled,
+        ["".concat(prefixcls, "-selection-TriggerSearchItem-disabled")]: disabled
       });
       return /*#__PURE__*/_react.default.createElement("span", {
         className: spanCls
@@ -330,7 +330,7 @@ class TreeSelect extends _baseComponent.default {
       if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = (0, _classnames.default)({
-          [`${prefixcls}-selection-placeholder`]: !renderText
+          ["".concat(prefixcls, "-selection-placeholder")]: !renderText
         });
         return /*#__PURE__*/_react.default.createElement("span", {
           className: spanCls
@@ -397,7 +397,7 @@ class TreeSelect extends _baseComponent.default {
       }
 
       return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${prefixcls}-arrow`),
+        className: (0, _classnames.default)("".concat(prefixcls, "-arrow")),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -407,7 +407,7 @@ class TreeSelect extends _baseComponent.default {
       const {
         clearIcon
       } = this.props;
-      const clearCls = (0, _classnames.default)(`${prefixcls}-clearbtn`);
+      const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
 
       if (showClearBtn) {
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -459,20 +459,20 @@ class TreeSelect extends _baseComponent.default {
       const isEmptyTriggerSearch = isTriggerPositionSearch && (0, _isEmpty2.default)(checkedKeys);
       const isValueTriggerSearch = isTriggerPositionSearch && !(0, _isEmpty2.default)(checkedKeys);
       const classNames = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, {
-        [`${prefixcls}-focus`]: isOpen && !isInput,
-        [`${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
+        ["".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
       }, className);
       const triggerRenderKeys = multiple ? (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
       const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
@@ -490,7 +490,7 @@ class TreeSelect extends _baseComponent.default {
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'selection'
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-selection`
+        className: "".concat(prefixcls, "-selection")
       }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'suffix'
       }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -541,8 +541,8 @@ class TreeSelect extends _baseComponent.default {
       const keyList = (0, _treeUtil.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 = (0, _treeUtil.getValueOrKey)(nodes);
-      const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
-        [`${prefixcls}-selection-tag-disabled`]: disabled
+      const tagCls = (0, _classnames.default)("".concat(prefixcls, "-selection-tag"), {
+        ["".concat(prefixcls, "-selection-tag-disabled")]: disabled
       });
       const nodeHaveData = !(0, _isEmpty2.default)(nodes) && !(0, _isEmpty2.default)(nodes[0]);
       const isDisableStrictlyNode = disableStrictly && nodeHaveData && disabledKeys.has(nodes[0].key);
@@ -556,7 +556,7 @@ class TreeSelect extends _baseComponent.default {
 
       const tagProps = {
         size: size === 'small' ? 'small' : 'large',
-        key: `tag-${value}-${idx}`,
+        key: "tag-".concat(value, "-").concat(idx),
         color: 'white',
         className: tagCls,
         closable,
@@ -655,8 +655,8 @@ class TreeSelect extends _baseComponent.default {
       } = this.props;
       const isDropdownPositionSearch = searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN;
       const inputcls = (0, _classnames.default)({
-        [`${prefixTree}-input`]: isDropdownPositionSearch,
-        [`${prefixcls}-inputTrigger`]: !isDropdownPositionSearch
+        ["".concat(prefixTree, "-input")]: isDropdownPositionSearch,
+        ["".concat(prefixcls, "-inputTrigger")]: !isDropdownPositionSearch
       });
       const {
         inputValue
@@ -678,8 +678,8 @@ class TreeSelect extends _baseComponent.default {
       };
       const realInputProps = isDropdownPositionSearch ? inputDropdownProps : inputTriggerProps;
       const wrapperCls = (0, _classnames.default)({
-        [`${prefixTree}-search-wrapper`]: isDropdownPositionSearch,
-        [`${prefixcls}-triggerSingleSearch-wrapper`]: !isDropdownPositionSearch && !multiple
+        ["".concat(prefixTree, "-search-wrapper")]: isDropdownPositionSearch,
+        ["".concat(prefixcls, "-triggerSingleSearch-wrapper")]: !isDropdownPositionSearch && !multiple
       });
       const useCusSearch = typeof searchRender === 'function' || typeof searchRender === 'boolean';
 
@@ -872,7 +872,7 @@ class TreeSelect extends _baseComponent.default {
           // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
           itemData: flattenNodes,
-          className: `${prefixTree}-virtual-list`,
+          className: "".concat(prefixTree, "-virtual-list"),
           style: {
             direction
           }
@@ -909,9 +909,9 @@ class TreeSelect extends _baseComponent.default {
         renderFullLabel,
         checkRelation
       } = this.props;
-      const wrapperCls = (0, _classnames.default)(`${prefixTree}-wrapper`);
-      const listCls = (0, _classnames.default)(`${prefixTree}-option-list`, {
-        [`${prefixTree}-option-list-block`]: true
+      const wrapperCls = (0, _classnames.default)("".concat(prefixTree, "-wrapper"));
+      const listCls = (0, _classnames.default)("".concat(prefixTree, "-option-list"), {
+        ["".concat(prefixTree, "-option-list-block")]: true
       });
       const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
       const noData = (0, _isEmpty2.default)(flattenNodes) || showFilteredOnly && searchNoRes;

package/lib/cjs/typography/base.js

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

package/lib/cjs/typography/copyable.js

@@ -103,8 +103,8 @@ class Copyable extends _react.default.PureComponent {
       copied
     } = this.state;
     const finalCls = (0, _classnames.default)(className, {
-      [`${prefixCls}-action-copy`]: !copied,
-      [`${prefixCls}-action-copied`]: copied
+      ["".concat(prefixCls, "-action-copy")]: !copied,
+      ["".concat(prefixCls, "-action-copied")]: copied
     });
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
@@ -117,7 +117,7 @@ class Copyable extends _react.default.PureComponent {
     }, copied ? this.renderSuccessTip() : /*#__PURE__*/_react.default.createElement(_index.default, {
       content: typeof copyTip !== 'undefined' ? copyTip : locale.copy
     }, /*#__PURE__*/_react.default.createElement("a", {
-      className: `${prefixCls}-action-copy-icon`
+      className: "".concat(prefixCls, "-action-copy-icon")
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCopy, {
       role: "button",
       tabIndex: 0,

package/lib/cjs/typography/paragraph.js

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

package/lib/cjs/typography/title.js

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

package/lib/cjs/typography/util.js

@@ -33,7 +33,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 => `${name}: ${style.getPropertyValue(name)};`).join('');
+  return styleNames.map(name => "".concat(name, ": ").concat(style.getPropertyValue(name), ";")).join('');
 }
 
 const getRenderText = function (originEle, rows) {

package/lib/cjs/upload/fileCard.js

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

package/lib/cjs/upload/index.js

@@ -162,7 +162,7 @@ class Upload extends _baseComponent.default {
         onRemove,
         onRetry,
         index,
-        key: uid || `${name}${index}`,
+        key: uid || "".concat(name).concat(index),
         style: itemStyle,
         disabled,
         showPicInfo,
@@ -220,19 +220,19 @@ class Upload extends _baseComponent.default {
       } = this.state;
       const fileList = this.props.fileList || stateFileList;
       const showAddTriggerInList = limit ? limit > fileList.length : true;
-      const dragAreaBaseCls = `${prefixCls}-drag-area`;
-      const uploadAddCls = (0, _classnames.default)(`${prefixCls}-add`, {
-        [`${prefixCls}-picture-add`]: true,
-        [`${prefixCls}-picture-add-disabled`]: disabled
+      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
+      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"), {
+        ["".concat(prefixCls, "-picture-add")]: true,
+        ["".concat(prefixCls, "-picture-add-disabled")]: disabled
       });
-      const fileListCls = (0, _classnames.default)(`${prefixCls}-file-list`, {
-        [`${prefixCls}-picture-file-list`]: true
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
+        ["".concat(prefixCls, "-picture-file-list")]: true
       });
       const dragAreaCls = (0, _classnames.default)({
-        [`${dragAreaBaseCls}-legal`]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
-        [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
+        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
       });
-      const mainCls = `${prefixCls}-file-list-main`;
+      const mainCls = "".concat(prefixCls, "-file-list-main");
       const addContentProps = {
         role: 'button',
         className: uploadAddCls,
@@ -285,9 +285,9 @@ class Upload extends _baseComponent.default {
         fileList: stateFileList
       } = this.state;
       const fileList = this.props.fileList || stateFileList;
-      const fileListCls = (0, _classnames.default)(`${prefixCls}-file-list`);
-      const titleCls = `${prefixCls}-file-list-title`;
-      const mainCls = `${prefixCls}-file-list-main`;
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"));
+      const titleCls = "".concat(prefixCls, "-file-list-title");
+      const mainCls = "".concat(prefixCls, "-file-list-main");
       const showTitle = limit !== 1 && fileList.length;
       const showClear = this.props.showClear && !disabled;
       const containerProps = {
@@ -303,12 +303,12 @@ class Upload extends _baseComponent.default {
       }, locale => /*#__PURE__*/_react.default.createElement("div", Object.assign({}, containerProps), showTitle ? /*#__PURE__*/_react.default.createElement("div", {
         className: titleCls
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: `${titleCls}-choosen`
+        className: "".concat(titleCls, "-choosen")
       }, locale.selectedFiles), showClear ? /*#__PURE__*/_react.default.createElement("span", {
         role: "button",
         tabIndex: 0,
         onClick: this.clear,
-        className: `${titleCls}-clear`
+        className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
         className: mainCls,
         role: "list",
@@ -340,7 +340,7 @@ class Upload extends _baseComponent.default {
         listType,
         disabled
       } = this.props;
-      const uploadAddCls = (0, _classnames.default)(`${prefixCls}-add`);
+      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
 
       if (listType === _constants.strings.FILE_LIST_PIC) {
         return null;
@@ -370,11 +370,11 @@ class Upload extends _baseComponent.default {
         dragSubText,
         disabled
       } = this.props;
-      const dragAreaBaseCls = `${prefixCls}-drag-area`;
+      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const dragAreaCls = (0, _classnames.default)(dragAreaBaseCls, {
-        [`${dragAreaBaseCls}-legal`]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
-        [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL,
-        [`${dragAreaBaseCls}-custom`]: children
+        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL,
+        ["".concat(dragAreaBaseCls, "-custom")]: children
       });
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
@@ -389,24 +389,24 @@ class Upload extends _baseComponent.default {
         onDragEnter: this.onDragEnter,
         onClick: this.onClick
       }, children ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${dragAreaBaseCls}-icon`,
+        className: "".concat(dragAreaBaseCls, "-icon"),
         "x-semi-prop": "dragIcon"
       }, dragIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconUpload, {
         size: "extra-large"
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: `${dragAreaBaseCls}-text`
+        className: "".concat(dragAreaBaseCls, "-text")
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${dragAreaBaseCls}-main-text`,
+        className: "".concat(dragAreaBaseCls, "-main-text"),
         "x-semi-prop": "dragMainText"
       }, dragMainText || locale.mainText), /*#__PURE__*/_react.default.createElement("div", {
-        className: `${dragAreaBaseCls}-sub-text`,
+        className: "".concat(dragAreaBaseCls, "-sub-text"),
         "x-semi-prop": "dragSubText"
       }, dragSubText), /*#__PURE__*/_react.default.createElement("div", {
-        className: `${dragAreaBaseCls}-tips`
+        className: "".concat(dragAreaBaseCls, "-tips")
       }, dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: `${dragAreaBaseCls}-tips-legal`
+        className: "".concat(dragAreaBaseCls, "-tips-legal")
       }, locale.legalTips), dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: `${dragAreaBaseCls}-tips-illegal`
+        className: "".concat(dragAreaBaseCls, "-tips-illegal")
       }, locale.illegalTips))))));
     };
 
@@ -545,17 +545,17 @@ class Upload extends _baseComponent.default {
       directory
     } = this.props;
     const uploadCls = (0, _classnames.default)(prefixCls, {
-      [`${prefixCls}-picture`]: listType === _constants.strings.FILE_LIST_PIC,
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-default`]: validateStatus === 'default',
-      [`${prefixCls}-error`]: validateStatus === 'error',
-      [`${prefixCls}-warning`]: validateStatus === 'warning',
-      [`${prefixCls}-success`]: validateStatus === 'success'
+      ["".concat(prefixCls, "-picture")]: listType === _constants.strings.FILE_LIST_PIC,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-default")]: validateStatus === 'default',
+      ["".concat(prefixCls, "-error")]: validateStatus === 'error',
+      ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
+      ["".concat(prefixCls, "-success")]: validateStatus === 'success'
     }, className);
-    const inputCls = (0, _classnames.default)(`${prefixCls}-hidden-input`);
-    const inputReplaceCls = (0, _classnames.default)(`${prefixCls}-hidden-input-replace`);
-    const promptCls = (0, _classnames.default)(`${prefixCls}-prompt`);
-    const validateMsgCls = (0, _classnames.default)(`${prefixCls}-validate-message`);
+    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input"));
+    const inputReplaceCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input-replace"));
+    const promptCls = (0, _classnames.default)("".concat(prefixCls, "-prompt"));
+    const validateMsgCls = (0, _classnames.default)("".concat(prefixCls, "-validate-message"));
     const dirProps = directory ? {
       directory: 'directory',
       webkitdirectory: 'webkitdirectory'