@douyinfe/semi-ui 2.27.1 → 2.28.0-beta.1

package/lib/cjs/upload/index.js

@@ -162,7 +162,7 @@ class Upload extends _baseComponent.default {
         onRemove,
         onRetry,
         index,
-        key: uid || "".concat(name).concat(index),
+        key: uid || `${name}${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 = "".concat(prefixCls, "-drag-area");
-      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"), {
-        ["".concat(prefixCls, "-picture-add")]: true,
-        ["".concat(prefixCls, "-picture-add-disabled")]: disabled
+      const dragAreaBaseCls = `${prefixCls}-drag-area`;
+      const uploadAddCls = (0, _classnames.default)(`${prefixCls}-add`, {
+        [`${prefixCls}-picture-add`]: true,
+        [`${prefixCls}-picture-add-disabled`]: disabled
       });
-      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
-        ["".concat(prefixCls, "-picture-file-list")]: true
+      const fileListCls = (0, _classnames.default)(`${prefixCls}-file-list`, {
+        [`${prefixCls}-picture-file-list`]: true
       });
       const dragAreaCls = (0, _classnames.default)({
-        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
-        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
+        [`${dragAreaBaseCls}-legal`]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
       });
-      const mainCls = "".concat(prefixCls, "-file-list-main");
+      const mainCls = `${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)("".concat(prefixCls, "-file-list"));
-      const titleCls = "".concat(prefixCls, "-file-list-title");
-      const mainCls = "".concat(prefixCls, "-file-list-main");
+      const fileListCls = (0, _classnames.default)(`${prefixCls}-file-list`);
+      const titleCls = `${prefixCls}-file-list-title`;
+      const mainCls = `${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: "".concat(titleCls, "-choosen")
+        className: `${titleCls}-choosen`
       }, locale.selectedFiles), showClear ? /*#__PURE__*/_react.default.createElement("span", {
         role: "button",
         tabIndex: 0,
         onClick: this.clear,
-        className: "".concat(titleCls, "-clear")
+        className: `${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)("".concat(prefixCls, "-add"));
+      const uploadAddCls = (0, _classnames.default)(`${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 = "".concat(prefixCls, "-drag-area");
+      const dragAreaBaseCls = `${prefixCls}-drag-area`;
       const dragAreaCls = (0, _classnames.default)(dragAreaBaseCls, {
-        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
-        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL,
-        ["".concat(dragAreaBaseCls, "-custom")]: children
+        [`${dragAreaBaseCls}-legal`]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        [`${dragAreaBaseCls}-illegal`]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL,
+        [`${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: "".concat(dragAreaBaseCls, "-icon"),
+        className: `${dragAreaBaseCls}-icon`,
         "x-semi-prop": "dragIcon"
       }, dragIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconUpload, {
         size: "extra-large"
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-text")
+        className: `${dragAreaBaseCls}-text`
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-main-text"),
+        className: `${dragAreaBaseCls}-main-text`,
         "x-semi-prop": "dragMainText"
       }, dragMainText || locale.mainText), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-sub-text"),
+        className: `${dragAreaBaseCls}-sub-text`,
         "x-semi-prop": "dragSubText"
       }, dragSubText), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(dragAreaBaseCls, "-tips")
+        className: `${dragAreaBaseCls}-tips`
       }, dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(dragAreaBaseCls, "-tips-legal")
+        className: `${dragAreaBaseCls}-tips-legal`
       }, locale.legalTips), dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL && /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(dragAreaBaseCls, "-tips-illegal")
+        className: `${dragAreaBaseCls}-tips-illegal`
       }, locale.illegalTips))))));
     };
 
@@ -545,17 +545,17 @@ class Upload extends _baseComponent.default {
       directory
     } = this.props;
     const uploadCls = (0, _classnames.default)(prefixCls, {
-      ["".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'
+      [`${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'
     }, className);
-    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 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 dirProps = directory ? {
       directory: 'directory',
       webkitdirectory: 'webkitdirectory'

package/lib/es/_portal/index.js

@@ -35,7 +35,7 @@ class Portal extends PureComponent {
       }
 
       const cls = classnames(prefixCls, ...classNames, {
-        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+        [`${prefixCls}-rtl`]: direction === 'rtl'
       });
 
       if (_this.el) {
@@ -118,7 +118,7 @@ class Portal extends PureComponent {
 Portal.contextType = ConfigContext;
 Portal.defaultProps = {
   // getPopupContainer: () => document.body,
-  prefixCls: "".concat(BASE_CLASS_PREFIX, "-portal")
+  prefixCls: `${BASE_CLASS_PREFIX}-portal`
 };
 Portal.propTypes = {
   children: PropTypes.node,

package/lib/es/_utils/index.js

@@ -57,7 +57,9 @@ export function cloneDeep(value, customizer) {
         }); // internal-issues:887
 
         try {
-          warning(_get(process, 'env.NODE_ENV') !== 'production', "[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.\n                    The maximum length of an array is 4294967295.\n                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript");
+          warning(_get(process, 'env.NODE_ENV') !== 'production', `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
+                    The maximum length of an array is 4294967295.
+                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`);
         } catch (e) {}
 
         return newArray;

package/lib/es/anchor/index.js

@@ -130,7 +130,7 @@ class Anchor extends BaseComponent {
       },
       setSlideBarTop: height => {
         this.setState({
-          slideBarTop: "".concat(height, "px")
+          slideBarTop: `${height}px`
         });
       },
       setClickLink: value => {
@@ -189,7 +189,7 @@ class Anchor extends BaseComponent {
         return elTop;
       },
       getAnchorNode: selector => {
-        const selectors = "#".concat(this.anchorID, " ").concat(selector);
+        const selectors = `#${this.anchorID} ${selector}`;
         return document.querySelector(selectors);
       },
       getContentNode: selector => document.querySelector(selector),
@@ -244,15 +244,15 @@ class Anchor extends BaseComponent {
       slideBarTop
     } = this.state;
     const wrapperCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-size-").concat(size)]: size
+      [`${prefixCls}-size-${size}`]: size
     });
-    const slideCls = cls("".concat(prefixCls, "-slide"), "".concat(prefixCls, "-slide-").concat(railTheme));
-    const slideBarCls = cls("".concat(prefixCls, "-slide-bar"), {
-      ["".concat(prefixCls, "-slide-bar-").concat(size)]: size,
-      ["".concat(prefixCls, "-slide-bar-").concat(railTheme)]: railTheme,
-      ["".concat(prefixCls, "-slide-bar-active")]: activeLink
+    const slideCls = cls(`${prefixCls}-slide`, `${prefixCls}-slide-${railTheme}`);
+    const slideBarCls = cls(`${prefixCls}-slide-bar`, {
+      [`${prefixCls}-slide-bar-${size}`]: size,
+      [`${prefixCls}-slide-bar-${railTheme}`]: railTheme,
+      [`${prefixCls}-slide-bar-active`]: activeLink
     });
-    const anchorWrapper = "".concat(prefixCls, "-link-wrapper");
+    const anchorWrapper = `${prefixCls}-link-wrapper`;
     const wrapperStyle = Object.assign(Object.assign({}, style), {
       maxWidth,
       maxHeight

package/lib/es/anchor/link.js

@@ -25,10 +25,10 @@ export default class Link extends BaseComponent {
         size
       } = this.context;
       const active = activeLink === href;
-      const linkTitleCls = cls("".concat(prefixCls, "-link-tooltip"), {
-        ["".concat(prefixCls, "-link-tooltip-small")]: size === 'small',
-        ["".concat(prefixCls, "-link-tooltip-active")]: active,
-        ["".concat(prefixCls, "-link-tooltip-disabled")]: disabled
+      const linkTitleCls = cls(`${prefixCls}-link-tooltip`, {
+        [`${prefixCls}-link-tooltip-small`]: size === 'small',
+        [`${prefixCls}-link-tooltip-active`]: active,
+        [`${prefixCls}-link-tooltip-disabled`]: disabled
       });
       const toolTipOpt = position ? {
         position
@@ -140,10 +140,10 @@ export default class Link extends BaseComponent {
       showTooltip
     } = this.context;
     const active = activeLink === href;
-    const linkCls = cls("".concat(prefixCls, "-link"), className);
-    const linkTitleCls = cls("".concat(prefixCls, "-link-title"), {
-      ["".concat(prefixCls, "-link-title-active")]: active,
-      ["".concat(prefixCls, "-link-title-disabled")]: disabled
+    const linkCls = cls(`${prefixCls}-link`, className);
+    const linkTitleCls = cls(`${prefixCls}-link-title`, {
+      [`${prefixCls}-link-title-active`]: active,
+      [`${prefixCls}-link-title-disabled`]: disabled
     });
     const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     const ariaProps = {

package/lib/es/autoComplete/index.js

@@ -59,7 +59,11 @@ class AutoComplete extends BaseComponent {
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
-    warning('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete]\n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',\n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
+    warning('triggerRender' in this.props && typeof this.props.triggerRender === 'function', `[Semi AutoComplete]
+            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',
+            please notice that they will be removed in the next major version.
+            Please use 'componentProps' to retrieve these props instead.
+            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.`);
   }
 
   get adapter() {
@@ -196,7 +200,7 @@ class AutoComplete extends BaseComponent {
       style,
       className: useCustomTrigger ? cls(className) : cls({
         [prefixCls]: true,
-        ["".concat(prefixCls, "-disabled")]: disabled
+        [`${prefixCls}-disabled`]: disabled
       }, className),
       onClick: this.handleInputClick,
       ref: this.triggerRef,
@@ -240,7 +244,7 @@ class AutoComplete extends BaseComponent {
   }
 
   renderLoading() {
-    const loadingWrapperCls = "".concat(prefixCls, "-loading-wrapper");
+    const loadingWrapperCls = `${prefixCls}-loading-wrapper`;
     return /*#__PURE__*/React.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/React.createElement(Spin, null));
@@ -274,7 +278,7 @@ class AutoComplete extends BaseComponent {
       dropdownMinWidth
     } = this.state;
     const listCls = cls({
-      ["".concat(prefixCls, "-option-list")]: true
+      [`${prefixCls}-option-list`]: true
     }, dropdownClassName);
     let optionsNode;
 

package/lib/es/autoComplete/option.js

@@ -81,13 +81,13 @@ class Option extends PureComponent {
           rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
 
     const optionClassName = classNames(prefixCls, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-selected")]: selected,
-      ["".concat(prefixCls, "-focused")]: focused,
-      ["".concat(prefixCls, "-empty")]: empty,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-selected`]: selected,
+      [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-empty`]: empty,
       [className]: className
     });
-    const selectedIconClassName = classNames(["".concat(prefixCls, "-icon")]);
+    const selectedIconClassName = classNames([`${prefixCls}-icon`]);
 
     if (empty) {
       if (emptyContent === null) {
@@ -125,7 +125,7 @@ class Option extends PureComponent {
       searchWords: inputValue,
       sourceString: children,
       option: {
-        highlightClassName: "".concat(prefixCls, "-keyword")
+        highlightClassName: `${prefixCls}-keyword`
       }
     };
     return (
@@ -148,7 +148,7 @@ class Option extends PureComponent {
       }, showTick ? /*#__PURE__*/React.createElement("div", {
         className: selectedIconClassName
       }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-text")
+        className: `${prefixCls}-text`
       }, this.renderOptionContent({
         children,
         config,

package/lib/es/avatar/avatarGroup.js

@@ -57,7 +57,7 @@ export default class AvatarGroup extends PureComponent {
     const {
       renderMore
     } = this.props;
-    const moreCls = cls("".concat(prefixCls, "-item-more"));
+    const moreCls = cls(`${prefixCls}-item-more`);
     const restAvatarAlt = restAvatars === null || restAvatars === void 0 ? void 0 : restAvatars.reduce((pre, cur) => {
       const {
         children,
@@ -69,14 +69,14 @@ export default class AvatarGroup extends PureComponent {
         return pre;
       }
 
-      return pre.length > 0 ? "".concat(pre, ",").concat(avatarInfo) : avatarInfo;
+      return pre.length > 0 ? `${pre},${avatarInfo}` : avatarInfo;
     }, '');
-    const finalAlt = " Number of remaining Avatars\uFF1A".concat(restNumber, ",").concat(restAvatarAlt);
+    const finalAlt = ` Number of remaining Avatars：${restNumber},${restAvatarAlt}`;
     let moreAvatar = /*#__PURE__*/React.createElement(Avatar, {
       className: moreCls,
       key: "_+n",
       alt: finalAlt
-    }, "+".concat(restNumber));
+    }, `+${restNumber}`);
 
     if (_isFunction(renderMore)) {
       moreAvatar = /*#__PURE__*/React.createElement(Fragment, {
@@ -102,15 +102,15 @@ export default class AvatarGroup extends PureComponent {
 
     let inner;
     const groupCls = cls({
-      ["".concat(prefixCls, "-group")]: true
+      [`${prefixCls}-group`]: true
     });
 
     if (children) {
       const avatars = this.getAllAvatars();
       inner = (_isNumber(maxCount) ? this.getMergeAvatars(avatars) : avatars).map((itm, index) => {
         const className = cls(_get(itm.props, 'className'), {
-          ["".concat(prefixCls, "-item-start-").concat(index)]: overlapFrom === 'start',
-          ["".concat(prefixCls, "-item-end-").concat(index)]: overlapFrom === 'end'
+          [`${prefixCls}-item-start-${index}`]: overlapFrom === 'start',
+          [`${prefixCls}-item-end-${index}`]: overlapFrom === 'end'
         });
         return /*#__PURE__*/React.cloneElement(itm, Object.assign(Object.assign({}, rest), {
           className,

package/lib/es/avatar/index.js

@@ -58,14 +58,14 @@ export default class Avatar extends BaseComponent {
       };
 
       if (isImg) {
-        const finalAlt = clickable ? "clickable Avatar: ".concat(alt) : alt;
+        const finalAlt = clickable ? `clickable Avatar: ${alt}` : alt;
         const imgBasicProps = Object.assign(Object.assign({
           src,
           srcSet,
           onError: this.handleError
         }, imgAttr), {
           className: cls({
-            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+            [`${prefixCls}-no-focus-visible`]: clickable
           })
         });
         const imgProps = clickable ? Object.assign(Object.assign({}, imgBasicProps), a11yFocusProps) : imgBasicProps;
@@ -74,17 +74,17 @@ export default class Avatar extends BaseComponent {
         }, imgProps));
       } else if (typeof children === 'string') {
         const tempAlt = alt !== null && alt !== void 0 ? alt : children;
-        const finalAlt = clickable ? "clickable Avatar: ".concat(tempAlt) : tempAlt;
+        const finalAlt = clickable ? `clickable Avatar: ${tempAlt}` : tempAlt;
         const props = {
           role: 'img',
           'aria-label': finalAlt,
-          className: cls("".concat(prefixCls, "-label"), {
-            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          className: cls(`${prefixCls}-label`, {
+            [`${prefixCls}-no-focus-visible`]: clickable
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
         content = /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-content")
+          className: `${prefixCls}-content`
         }, /*#__PURE__*/React.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -236,14 +236,14 @@ export default class Avatar extends BaseComponent {
     } = this.state;
     const isImg = src && isImgExist;
     const avatarCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-").concat(shape)]: shape,
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-").concat(color)]: color && !isImg,
-      ["".concat(prefixCls, "-img")]: isImg,
-      ["".concat(prefixCls, "-focus")]: focusVisible
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${color}`]: color && !isImg,
+      [`${prefixCls}-img`]: isImg,
+      [`${prefixCls}-focus`]: focusVisible
     }, className);
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-hover"),
+      className: `${prefixCls}-hover`,
       "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
     return /*#__PURE__*/React.createElement("span", Object.assign({}, others, {

package/lib/es/badge/index.js

@@ -45,18 +45,18 @@ export default class Badge extends PureComponent {
     const custom = count && !(_isNumber(count) || _isString(count));
     const showBadge = count !== null && typeof count !== 'undefined';
     const wrapper = cls(className, {
-      ["".concat(prefixCls, "-").concat(type)]: !custom,
-      ["".concat(prefixCls, "-").concat(theme)]: !custom,
-      ["".concat(prefixCls, "-").concat(position)]: Boolean(position) && Boolean(children),
-      ["".concat(prefixCls, "-block")]: !children,
-      ["".concat(prefixCls, "-dot")]: dot,
-      ["".concat(prefixCls, "-count")]: !dot && !custom && showBadge,
-      ["".concat(prefixCls, "-custom")]: custom
+      [`${prefixCls}-${type}`]: !custom,
+      [`${prefixCls}-${theme}`]: !custom,
+      [`${prefixCls}-${position}`]: Boolean(position) && Boolean(children),
+      [`${prefixCls}-block`]: !children,
+      [`${prefixCls}-dot`]: dot,
+      [`${prefixCls}-count`]: !dot && !custom && showBadge,
+      [`${prefixCls}-custom`]: custom
     });
     let content;
 
     if (_isNumber(count)) {
-      content = overflowCount && overflowCount < count ? "".concat(overflowCount, "+") : "".concat(count);
+      content = overflowCount && overflowCount < count ? `${overflowCount}+` : `${count}`;
     } else {
       content = count;
     }

package/lib/es/banner/index.js

@@ -62,7 +62,7 @@ export default class Banner extends BaseComponent {
     }
 
     const closer = /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(prefixCls, "-close"),
+      className: `${prefixCls}-close`,
       onClick: this.remove,
       icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, {
         "x-semi-prop": "closeIcon",
@@ -101,7 +101,7 @@ export default class Banner extends BaseComponent {
     };
     let iconType = iconMap[type];
     const iconCls = cls({
-      ["".concat(prefixCls, "-icon")]: true // [prefixCls + '-' + type]: true,
+      [`${prefixCls}-icon`]: true // [prefixCls + '-' + type]: true,
 
     });
 
@@ -134,32 +134,32 @@ export default class Banner extends BaseComponent {
       visible
     } = this.state;
     const wrapper = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-").concat(type)]: type,
-      ["".concat(prefixCls, "-full")]: fullMode,
-      ["".concat(prefixCls, "-in-container")]: !fullMode,
-      ["".concat(prefixCls, "-bordered")]: !fullMode && bordered
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-full`]: fullMode,
+      [`${prefixCls}-in-container`]: !fullMode,
+      [`${prefixCls}-bordered`]: !fullMode && bordered
     });
     const banner = visible ? /*#__PURE__*/React.createElement("div", {
       className: wrapper,
       style: style,
       role: "alert"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content-wrapper")
+      className: `${prefixCls}-content-wrapper`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, this.renderIcon(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content-body")
+      className: `${prefixCls}-content-body`
     }, title ? /*#__PURE__*/React.createElement(Typography.Title, {
       heading: 5,
-      className: "".concat(prefixCls, "-title"),
+      className: `${prefixCls}-title`,
       component: "div",
       "x-semi-prop": "title"
     }, title) : null, description ? /*#__PURE__*/React.createElement(Typography.Paragraph, {
-      className: "".concat(prefixCls, "-description"),
+      className: `${prefixCls}-description`,
       component: "div",
       "x-semi-prop": "description"
     }, description) : null)), this.renderCloser()), children ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-extra"),
+      className: `${prefixCls}-extra`,
       "x-semi-prop": "children"
     }, children) : null) : null;
     return banner;

package/lib/es/breadcrumb/index.js

@@ -31,19 +31,19 @@ class Breadcrumb extends BaseComponent {
 
       const restItem = template.slice(1, itemsLen - 3);
       const spread = /*#__PURE__*/React.createElement("span", {
-        className: "".concat(clsPrefix, "-collapse"),
-        key: "more-".concat(itemsLen)
+        className: `${clsPrefix}-collapse`,
+        key: `more-${itemsLen}`
       }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(clsPrefix, "-item-wrap")
+        className: `${clsPrefix}-item-wrap`
       }, /*#__PURE__*/React.createElement("span", {
         role: "button",
         tabIndex: 0,
         "aria-label": "Expand breadcrumb items",
-        className: "".concat(clsPrefix, "-item ").concat(clsPrefix, "-item-more"),
+        className: `${clsPrefix}-item ${clsPrefix}-item-more`,
         onClick: item => this.foundation.handleExpand(item),
         onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/React.createElement(IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(clsPrefix, "-separator"),
+        className: `${clsPrefix}-separator`,
         "x-semi-prop": "separator"
       }, this.props.separator)));
       template.splice(1, itemsLen - maxItemCount, spread);
@@ -61,7 +61,7 @@ class Breadcrumb extends BaseComponent {
       const hasRenderMore = _isFunction(renderMore);
 
       const template = items.map((route, idx) => {
-        const key = route._origin.key || "item-".concat(route.name || route.path, "-").concat(idx);
+        const key = route._origin.key || `item-${route.name || route.path}-${idx}`;
         const inCollapseArea = idx > 0 && idx <= restItemLength;
         return /*#__PURE__*/React.createElement(BreadcrumbItem, Object.assign({}, route, {
           key: key,
@@ -112,7 +112,7 @@ class Breadcrumb extends BaseComponent {
 
           warning(item.type && !item.type.isBreadcrumbItem, '[Semi Breadcrumb]: Only accepts Breadcrumb.Item as its children');
           return /*#__PURE__*/React.cloneElement(item, {
-            key: "".concat(idx, "-item"),
+            key: `${idx}-item`,
             active: idx === items.length - 1,
             shouldRenderSeparator: !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)
           });
@@ -163,9 +163,9 @@ class Breadcrumb extends BaseComponent {
       separator
     } = this.props;
     const content = /*#__PURE__*/React.createElement(React.Fragment, null, restItem.map((item, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "restItem-".concat(idx)
+      key: `restItem-${idx}`
     }, item, idx !== restItem.length - 1 && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(clsPrefix, "-restItem")
+      className: `${clsPrefix}-restItem`
     }, separator))));
     return /*#__PURE__*/React.createElement(Popover, {
       content: content,
@@ -186,9 +186,9 @@ class Breadcrumb extends BaseComponent {
       showTooltip
     } = this.props;
     const sizeCls = cls(className, {
-      ["".concat(clsPrefix, "-wrapper")]: true,
-      ["".concat(clsPrefix, "-wrapper-compact")]: compact,
-      ["".concat(clsPrefix, "-wrapper-loose")]: !compact
+      [`${clsPrefix}-wrapper`]: true,
+      [`${clsPrefix}-wrapper-compact`]: compact,
+      [`${clsPrefix}-wrapper-loose`]: !compact
     });
     return /*#__PURE__*/React.createElement(BreadContext.Provider, {
       value: {