@douyinfe/semi-ui 2.25.2 → 2.25.4

package/lib/cjs/calendar/weekCalendar.js

@@ -35,11 +35,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
-  return "".concat(res, "%");
+  return `${res}%`;
 };
 
-const prefixCls = "".concat(_constants.cssClasses.PREFIX, "-week");
-const allDayCls = "".concat(_constants.cssClasses.PREFIX, "-all-day");
+const prefixCls = `${_constants.cssClasses.PREFIX}-week`;
+const allDayCls = `${_constants.cssClasses.PREFIX}-all-day`;
 
 class WeekCalendar extends _baseComponent.default {
   constructor(props) {
@@ -72,7 +72,7 @@ class WeekCalendar extends _baseComponent.default {
         const dayEvents = events.has(dateString) ? events.get(dateString) : [];
         const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
         return /*#__PURE__*/_react.default.createElement(_dayCol.default, {
-          key: "".concat(dateString, "-weekday"),
+          key: `${dateString}-weekday`,
           displayValue: day.date,
           scrollHeight: this.state.scrollHeight,
           handleClick: this.handleClick,
@@ -95,14 +95,14 @@ class WeekCalendar extends _baseComponent.default {
         week
       } = this.foundation.getWeeklyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: `${prefixCls}-header`
       }, /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-tag ").concat(prefixCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${_constants.cssClasses.PREFIX}-tag ${prefixCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/_react.default.createElement("span", null, month)), /*#__PURE__*/_react.default.createElement("div", {
         role: "gridcell",
-        className: "".concat(prefixCls, "-grid")
+        className: `${prefixCls}-grid`
       }, /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(prefixCls, "-grid-row")
+        className: `${prefixCls}-grid-row`
       }, week.map(day => {
         const {
           date,
@@ -111,14 +111,14 @@ class WeekCalendar extends _baseComponent.default {
           isToday
         } = day;
         const listCls = (0, _classnames.default)({
-          ["".concat(_constants.cssClasses.PREFIX, "-today")]: isToday,
-          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
+          [`${_constants.cssClasses.PREFIX}-today`]: isToday,
+          [`${_constants.cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/_react.default.createElement("li", {
-          key: "".concat(date.toString(), "-weekheader"),
+          key: `${date.toString()}-weekheader`,
           className: listCls
         }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "".concat(_constants.cssClasses.PREFIX, "-today-date")
+          className: `${_constants.cssClasses.PREFIX}-today-date`
         }, dayString), /*#__PURE__*/_react.default.createElement("span", null, weekday));
       }))));
     };
@@ -132,15 +132,15 @@ class WeekCalendar extends _baseComponent.default {
           children,
           key
         } = event;
-        const top = "".concat(topInd, "em");
+        const top = `${topInd}em`;
         const style = {
           left: toPercent(leftPos),
           width: toPercent(width),
           top
         };
         return /*#__PURE__*/_react.default.createElement("li", {
-          className: "".concat(_constants.cssClasses.PREFIX, "-event-item ").concat(_constants.cssClasses.PREFIX, "-event-allday"),
-          key: "allDay-".concat(ind),
+          className: `${_constants.cssClasses.PREFIX}-event-item ${_constants.cssClasses.PREFIX}-event-allday`,
+          key: `allDay-${ind}`,
           style: style
         }, children);
       });
@@ -154,7 +154,7 @@ class WeekCalendar extends _baseComponent.default {
       const parsed = this.foundation.parseWeeklyAllDayEvents(allDay);
       const maxRowHeight = (0, _eventUtil.calcRowHeight)(parsed);
       const style = {
-        height: "".concat(maxRowHeight, "em")
+        height: `${maxRowHeight}em`
       };
       const {
         markWeekend
@@ -163,25 +163,25 @@ class WeekCalendar extends _baseComponent.default {
         week
       } = this.weeklyData;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(allDayCls),
+        className: `${allDayCls}`,
         style: style
       }, /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-tag ").concat(allDayCls, "-tag ").concat(prefixCls, "-sticky-left")
+        className: `${_constants.cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`
       }, /*#__PURE__*/_react.default.createElement("span", null, locale.allDay)), /*#__PURE__*/_react.default.createElement("div", {
         role: "gridcell",
-        className: "".concat(_constants.cssClasses.PREFIX, "-content ").concat(allDayCls, "-content")
+        className: `${_constants.cssClasses.PREFIX}-content ${allDayCls}-content`
       }, /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(allDayCls, "-skeleton")
+        className: `${allDayCls}-skeleton`
       }, Object.keys(week).map((date, ind) => {
         const listCls = (0, _classnames.default)({
-          ["".concat(_constants.cssClasses.PREFIX, "-weekend")]: markWeekend && week[date].isWeekend
+          [`${_constants.cssClasses.PREFIX}-weekend`]: markWeekend && week[date].isWeekend
         });
         return /*#__PURE__*/_react.default.createElement("li", {
-          key: "".concat(date, "-weekgrid"),
+          key: `${date}-weekgrid`,
           className: listCls
         });
       })), /*#__PURE__*/_react.default.createElement("ul", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-event-items")
+        className: `${_constants.cssClasses.PREFIX}-event-items`
       }, this.renderAllDayEvents(parsed))));
     };
 
@@ -268,14 +268,14 @@ class WeekCalendar extends _baseComponent.default {
       style: weekStyle,
       ref: this.dom
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-sticky-top")
+      className: `${prefixCls}-sticky-top`
     }, header, this.renderHeader(dateFnsLocale), this.renderAllDay(locale)), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-scroll-wrapper")
+      className: `${prefixCls}-scroll-wrapper`
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-scroll"),
+      className: `${prefixCls}-scroll`,
       ref: this.scrollDom
     }, /*#__PURE__*/_react.default.createElement(_timeCol.default, {
-      className: "".concat(prefixCls, "-sticky-left"),
+      className: `${prefixCls}-sticky-left`,
       renderTimeDisplay: renderTimeDisplay
     }), this.renderDayGrid()))));
   }

package/lib/cjs/card/cardGroup.js

@@ -47,8 +47,8 @@ class CardGroup extends _react.PureComponent {
           others = __rest(_a, ["children", "className", "spacing", "style", "type"]);
 
     const isGrid = type === 'grid';
-    const cardGroupCls = (0, _classnames.default)("".concat(prefixcls, "-group"), className, {
-      ["".concat(prefixcls, "-group-grid")]: isGrid
+    const cardGroupCls = (0, _classnames.default)(`${prefixcls}-group`, className, {
+      [`${prefixcls}-group-grid`]: isGrid
     });
     return /*#__PURE__*/_react.default.createElement(_space.default, Object.assign({
       spacing: isGrid ? 0 : spacing,

package/lib/cjs/card/index.js

@@ -58,12 +58,12 @@ class Card extends _react.PureComponent {
         headerLine,
         headerStyle
       } = this.props;
-      const headerCls = (0, _classnames.default)("".concat(prefixcls, "-header"), {
-        ["".concat(prefixcls, "-header-bordered")]: Boolean(headerLine)
+      const headerCls = (0, _classnames.default)(`${prefixcls}-header`, {
+        [`${prefixcls}-header-bordered`]: Boolean(headerLine)
       });
-      const headerWrapperCls = (0, _classnames.default)("".concat(prefixcls, "-header-wrapper"));
-      const titleCls = (0, _classnames.default)("".concat(prefixcls, "-header-wrapper-title"), {
-        ["".concat(prefixcls, "-header-wrapper-spacing")]: Boolean(headerExtraContent)
+      const headerWrapperCls = (0, _classnames.default)(`${prefixcls}-header-wrapper`);
+      const titleCls = (0, _classnames.default)(`${prefixcls}-header-wrapper-title`, {
+        [`${prefixcls}-header-wrapper-spacing`]: Boolean(headerExtraContent)
       });
 
       if (header || headerExtraContent || title) {
@@ -76,7 +76,7 @@ class Card extends _react.PureComponent {
         _react.default.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(prefixcls, "-header-wrapper-extra"),
+          className: `${prefixcls}-header-wrapper-extra`,
           "x-semi-prop": "headerExtraContent"
         }, headerExtraContent), title && /*#__PURE__*/_react.default.createElement("div", {
           className: titleCls
@@ -97,7 +97,7 @@ class Card extends _react.PureComponent {
       const {
         cover
       } = this.props;
-      const coverCls = (0, _classnames.default)("".concat(prefixcls, "-cover"));
+      const coverCls = (0, _classnames.default)(`${prefixcls}-cover`);
       return cover && /*#__PURE__*/_react.default.createElement("div", {
         className: coverCls,
         "x-semi-prop": "cover"
@@ -111,9 +111,9 @@ class Card extends _react.PureComponent {
         actions,
         loading
       } = this.props;
-      const bodyCls = (0, _classnames.default)("".concat(prefixcls, "-body"));
-      const actionsCls = (0, _classnames.default)("".concat(prefixcls, "-body-actions"));
-      const actionsItemCls = (0, _classnames.default)("".concat(prefixcls, "-body-actions-item"));
+      const bodyCls = (0, _classnames.default)(`${prefixcls}-body`);
+      const actionsCls = (0, _classnames.default)(`${prefixcls}-body-actions`);
+      const actionsItemCls = (0, _classnames.default)(`${prefixcls}-body-actions-item`);
 
       const placeholder = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_skeleton.default.Title, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_skeleton.default.Paragraph, {
         rows: 3
@@ -133,7 +133,7 @@ class Card extends _react.PureComponent {
       }, actions.map((item, idx) => /*#__PURE__*/_react.default.createElement("div", {
         key: idx,
         className: actionsItemCls,
-        "x-semi-prop": "actions.".concat(idx)
+        "x-semi-prop": `actions.${idx}`
       }, item)))));
     };
 
@@ -143,8 +143,8 @@ class Card extends _react.PureComponent {
         footerLine,
         footerStyle
       } = this.props;
-      const footerCls = (0, _classnames.default)("".concat(prefixcls, "-footer"), {
-        ["".concat(prefixcls, "-footer-bordered")]: footerLine
+      const footerCls = (0, _classnames.default)(`${prefixcls}-footer`, {
+        [`${prefixcls}-footer-bordered`]: footerLine
       });
       return footer && /*#__PURE__*/_react.default.createElement("div", {
         style: footerStyle,
@@ -166,9 +166,9 @@ class Card extends _react.PureComponent {
 
     const others = (0, _omit2.default)(otherProps, ['actions', 'bodyStyle', 'cover', 'headerExtraContent', 'footer', 'footerLine', 'footerStyle', 'header', 'headerLine', 'headerStyle', 'loading', 'title']);
     const cardCls = (0, _classnames.default)(prefixcls, className, {
-      ["".concat(prefixcls, "-bordered")]: bordered,
-      ["".concat(prefixcls, "-shadows")]: shadows,
-      ["".concat(prefixcls, "-shadows-").concat(shadows)]: shadows
+      [`${prefixcls}-bordered`]: bordered,
+      [`${prefixcls}-shadows`]: shadows,
+      [`${prefixcls}-shadows-${shadows}`]: shadows
     });
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, others, {
       "aria-busy": this.props.loading,

package/lib/cjs/card/meta.js

@@ -44,22 +44,22 @@ class Meta extends _react.PureComponent {
     } = _a,
           others = __rest(_a, ["avatar", "className", "description", "style", "title"]);
 
-    const metaCls = (0, _classnames.default)("".concat(prefixcls, "-meta"), className);
+    const metaCls = (0, _classnames.default)(`${prefixcls}-meta`, className);
 
     const avatarNode = avatar && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-meta-avatar")
+      className: `${prefixcls}-meta-avatar`
     }, avatar);
 
     const titleNode = title && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper-title")
+      className: `${prefixcls}-meta-wrapper-title`
     }, title);
 
     const descriptionNode = description && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper-description")
+      className: `${prefixcls}-meta-wrapper-description`
     }, description);
 
     const wrapper = title || description ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-meta-wrapper")
+      className: `${prefixcls}-meta-wrapper`
     }, titleNode, descriptionNode) : null;
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, others, {
       className: metaCls,

package/lib/cjs/carousel/CarouselArrow.js

@@ -48,16 +48,16 @@ class CarouselArrow extends _react.default.PureComponent {
     } = this.props;
     const classNames = (0, _classnames.default)({
       [_constants.cssClasses.CAROUSEL_ARROW]: true,
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme,
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-hover`]: type === 'hover'
     });
     const leftClassNames = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-prev")]: true,
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-prev`]: true,
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
     });
     const rightClassNames = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-next")]: true,
-      ["".concat(_constants.cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-next`]: true,
+      [`${_constants.cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classNames

package/lib/cjs/carousel/CarouselIndicator.js

@@ -75,10 +75,10 @@ class CarouselIndicator extends _react.default.PureComponent {
         // role='none' 
         key: i,
         "data-index": i,
-        className: (0, _classnames.default)(["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item")], {
-          ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
-          ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-").concat(theme)]: theme,
-          ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-item-").concat(size)]: size
+        className: (0, _classnames.default)([`${_constants.cssClasses.CAROUSEL_INDICATOR}-item`], {
+          [`${_constants.cssClasses.CAROUSEL_INDICATOR}-item-active`]: i === activeIndex,
+          [`${_constants.cssClasses.CAROUSEL_INDICATOR}-item-${theme}`]: theme,
+          [`${_constants.cssClasses.CAROUSEL_INDICATOR}-item-${size}`]: size
         }),
         onClick: () => this.handleIndicatorClick(i),
         onMouseEnter: () => this.handleIndicatorHover(i)
@@ -102,8 +102,8 @@ class CarouselIndicator extends _react.default.PureComponent {
 
     const classNames = (0, _classnames.default)(className, {
       [_constants.cssClasses.CAROUSEL_INDICATOR]: true,
-      ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-").concat(type)]: type,
-      ["".concat(_constants.cssClasses.CAROUSEL_INDICATOR, "-").concat(position)]: position
+      [`${_constants.cssClasses.CAROUSEL_INDICATOR}-${type}`]: type,
+      [`${_constants.cssClasses.CAROUSEL_INDICATOR}-${position}`]: position
     });
     const indicatorContent = this.renderIndicatorContent();
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({

package/lib/cjs/carousel/index.js

@@ -118,20 +118,20 @@ class Carousel extends _baseComponent.default {
         const isNext = index === this.getValidIndex(activeIndex + 1);
         const animateStyle = {
           transitionTimingFunction: 'ease',
-          transitionDuration: "".concat(speed, "ms"),
+          transitionDuration: `${speed}ms`,
           animationTimingFunction: 'ease',
-          animationDuration: "".concat(speed, "ms")
+          animationDuration: `${speed}ms`
         };
         return /*#__PURE__*/_react.default.cloneElement(child, {
           style: Object.assign(Object.assign({}, child.props.style), animateStyle),
           className: (0, _classnames.default)(child.props.className, {
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item")]: true,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
-            ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-prev`]: isPrev,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-next`]: isNext,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-current`]: isCurrent,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item`]: true,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-slide-in`]: animation === 'slide' && !isInit && isCurrent,
+            [`${_constants.cssClasses.CAROUSEL_CONTENT}-item-slide-out`]: animation === 'slide' && !isInit && index === preIndex
           })
         });
       }));
@@ -274,9 +274,9 @@ class Carousel extends _baseComponent.default {
       onMouseEnter: (0, _debounce2.default)(this.handleMouseEnter, 400),
       onMouseLeave: (0, _debounce2.default)(this.handleMouseLeave, 400)
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-").concat(animation)], {
-        ["".concat(_constants.cssClasses.CAROUSEL_CONTENT)]: true,
-        ["".concat(_constants.cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
+      className: (0, _classnames.default)([`${_constants.cssClasses.CAROUSEL_CONTENT}-${animation}`], {
+        [`${_constants.cssClasses.CAROUSEL_CONTENT}`]: true,
+        [`${_constants.cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse
       }),
       "x-semi-prop": "children"
     }, this.renderChildren()), this.renderIndicator(), this.renderArrow());

package/lib/cjs/cascader/index.js

@@ -98,8 +98,8 @@ class Cascader extends _baseComponent.default {
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
 
       if (!(0, _isEmpty2.default)(keyEntities) && !(0, _isEmpty2.default)(keyEntities[nodeKey])) {
-        const tagCls = (0, _classnames.default)("".concat(prefixcls, "-selection-tag"), {
-          ["".concat(prefixcls, "-selection-tag-disabled")]: isDsiabled
+        const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
+          [`${prefixcls}-selection-tag-disabled`]: isDsiabled
         }); // custom render tags
 
         if ((0, _isFunction2.default)(displayRender)) {
@@ -107,7 +107,7 @@ class Cascader extends _baseComponent.default {
         } else {
           return /*#__PURE__*/_react.default.createElement(_tag.default, {
             size: size === 'default' ? 'large' : size,
-            key: "tag-".concat(nodeKey, "-").concat(idx),
+            key: `tag-${nodeKey}-${idx}`,
             color: "white",
             className: tagCls,
             closable: true,
@@ -163,7 +163,7 @@ class Cascader extends _baseComponent.default {
         multiple
       } = this.props;
       const searchable = Boolean(filterTreeNode) && isSearching;
-      const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
+      const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
       const renderData = this.foundation.getRenderData();
 
       const content = /*#__PURE__*/_react.default.createElement("div", {
@@ -200,8 +200,8 @@ class Cascader extends _baseComponent.default {
         showRestTagsPopover,
         restTagsPopoverProps
       } = this.props;
-      const plusNCls = (0, _classnames.default)("".concat(prefixcls, "-selection-n"), {
-        ["".concat(prefixcls, "-selection-n-disabled")]: disabled
+      const plusNCls = (0, _classnames.default)(`${prefixcls}-selection-n`, {
+        [`${prefixcls}-selection-n-disabled`]: disabled
       });
 
       const renderPlusNChildren = /*#__PURE__*/_react.default.createElement("span", {
@@ -260,7 +260,7 @@ class Cascader extends _baseComponent.default {
           displayText = displayRender(displayPath);
         } else {
           displayText = displayPath.map((path, index) => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-            key: "".concat(path, "-").concat(index)
+            key: `${path}-${index}`
           }, index < displayPath.length - 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path, separator) : path));
         }
       }
@@ -283,7 +283,7 @@ class Cascader extends _baseComponent.default {
         if (multiple) {
           if ((0, _isEmpty2.default)(checkedKeys)) {
             return /*#__PURE__*/_react.default.createElement("span", {
-              className: "".concat(prefixcls, "-selection-placeholder")
+              className: `${prefixcls}-selection-placeholder`
             }, placeholder);
           }
 
@@ -291,7 +291,7 @@ class Cascader extends _baseComponent.default {
         } else {
           const displayText = this.renderDisplayText();
           const spanCls = (0, _classnames.default)({
-            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
+            [`${prefixcls}-selection-placeholder`]: !displayText
           });
           return /*#__PURE__*/_react.default.createElement("span", {
             className: spanCls
@@ -308,9 +308,9 @@ class Cascader extends _baseComponent.default {
         suffix
       } = this.props;
       const suffixWrapperCls = (0, _classnames.default)({
-        ["".concat(prefixcls, "-suffix")]: true,
-        ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
-        ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
+        [`${prefixcls}-suffix`]: true,
+        [`${prefixcls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
+        [`${prefixcls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: suffixWrapperCls,
@@ -326,11 +326,11 @@ class Cascader extends _baseComponent.default {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = (0, _classnames.default)({
-        ["".concat(prefixcls, "-prefix")]: true,
+        [`${prefixcls}-prefix`]: true,
         // to be doublechecked
-        ["".concat(prefixcls, "-inset-label")]: insetLabel,
-        ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
-        ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+        [`${prefixcls}-inset-label`]: insetLabel,
+        [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
+        [`${prefixcls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
@@ -419,7 +419,7 @@ class Cascader extends _baseComponent.default {
     };
 
     this.renderClearBtn = () => {
-      const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
+      const clearCls = (0, _classnames.default)(`${prefixcls}-clearbtn`);
       const {
         clearIcon
       } = this.props;
@@ -449,7 +449,7 @@ class Cascader extends _baseComponent.default {
       }
 
       return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("".concat(prefixcls, "-arrow")),
+        className: (0, _classnames.default)(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -479,23 +479,23 @@ class Cascader extends _baseComponent.default {
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
       const classNames = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, className, {
-        ["".concat(prefixcls, "-focus")]: isFocus || isOpen && !isInput,
-        ["".concat(prefixcls, "-disabled")]: disabled,
-        ["".concat(prefixcls, "-single")]: true,
-        ["".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
+        [`${prefixcls}-focus`]: isFocus || isOpen && !isInput,
+        [`${prefixcls}-disabled`]: disabled,
+        [`${prefixcls}-single`]: true,
+        [`${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
       });
       const mouseEvent = showClear ? {
         onMouseEnter: () => this.handleMouseOver(),
         onMouseLeave: () => this.handleMouseLeave()
       } : {};
-      const sectionCls = (0, _classnames.default)("".concat(prefixcls, "-selection"), {
-        ["".concat(prefixcls, "-selection-multiple")]: multiple && !(0, _isEmpty2.default)(checkedKeys)
+      const sectionCls = (0, _classnames.default)(`${prefixcls}-selection`, {
+        [`${prefixcls}-selection-multiple`]: multiple && !(0, _isEmpty2.default)(checkedKeys)
       });
       const inner = useCustomTrigger ? this.renderCustomTrigger() : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'prefix'
@@ -889,7 +889,7 @@ class Cascader extends _baseComponent.default {
       keyEntities,
       resolvedCheckedKeys
     } = this.state;
-    const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
+    const tagInputcls = (0, _classnames.default)(`${prefixcls}-tagInput-wrapper`);
     const tagValue = [];
     const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
     [...realKeys].forEach(checkedKey => {
@@ -922,7 +922,7 @@ class Cascader extends _baseComponent.default {
       size,
       disabled
     } = this.props;
-    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
+    const inputcls = (0, _classnames.default)(`${prefixcls}-input`);
     const {
       inputValue,
       inputPlaceHolder,
@@ -935,13 +935,13 @@ class Cascader extends _baseComponent.default {
       onChange: this.handleInputChange
     };
     const wrappercls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-search-wrapper")]: true
+      [`${prefixcls}-search-wrapper`]: true
     });
     const displayText = this.renderDisplayText();
     const spanCls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-selection-placeholder")]: !displayText,
-      ["".concat(prefixcls, "-selection-text-hide")]: showInput && inputValue,
-      ["".concat(prefixcls, "-selection-text-inactive")]: showInput && !inputValue
+      [`${prefixcls}-selection-placeholder`]: !displayText,
+      [`${prefixcls}-selection-text-hide`]: showInput && inputValue,
+      [`${prefixcls}-selection-text-inactive`]: showInput && !inputValue
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrappercls