@douyinfe/semi-ui 2.27.0 → 2.27.1-alpha.1

package/lib/es/rating/item.js

@@ -128,9 +128,9 @@ export default class Item extends BaseComponent {
     const isFull = starValue <= value;
     const isCustomSize = typeof size === 'number';
     const starCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-half")]: isHalf,
-      ["".concat(prefixCls, "-full")]: isFull,
-      ["".concat(prefixCls, "-").concat(size)]: !isCustomSize
+      [`${prefixCls}-half`]: isHalf,
+      [`${prefixCls}-full`]: isFull,
+      [`${prefixCls}-${size}`]: !isCustomSize
     });
     const sizeStyle = isCustomSize ? {
       width: size,
@@ -145,9 +145,9 @@ export default class Item extends BaseComponent {
       }
     });
     const isEmpty = index === count;
-    const starWrapCls = cls("".concat(prefixCls, "-wrapper"), {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
+    const starWrapCls = cls(`${prefixCls}-wrapper`, {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${cssClasses.PREFIX}-focus`]: (firstStarFocus || secondStarFocus) && value !== 0
     });
     const starWrapProps = {
       onClick: disabled ? null : this.onClick,
@@ -163,10 +163,10 @@ export default class Item extends BaseComponent {
       'aria-posinset': 2 * index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(index + 0.5, " ").concat(ariaLabelPrefix, "s"),
+      'aria-label': `${index + 0.5} ${ariaLabelPrefix}s`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: cls("".concat(prefixCls, "-first"), "".concat(cssClasses.PREFIX, "-no-focus")),
+      className: cls(`${prefixCls}-first`, `${cssClasses.PREFIX}-no-focus`),
       tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
       onFocus: e => {
         this.onFocus(e, 'first');
@@ -183,10 +183,10 @@ export default class Item extends BaseComponent {
       'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(isEmpty ? 0 : index + 1, " ").concat(ariaLabelPrefix).concat(index === 0 ? '' : 's'),
+      'aria-label': `${isEmpty ? 0 : index + 1} ${ariaLabelPrefix}${index === 0 ? '' : 's'}`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: cls("".concat(prefixCls, "-second"), "".concat(cssClasses.PREFIX, "-no-focus")),
+      className: cls(`${prefixCls}-second`, `${cssClasses.PREFIX}-no-focus`),
       tabIndex: secondStarTabIndex,
       onFocus: e => {
         this.onFocus(e, 'second');
@@ -201,7 +201,7 @@ export default class Item extends BaseComponent {
       key: index
     }, /*#__PURE__*/React.createElement("div", Object.assign({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/React.createElement("div", Object.assign({}, firstStarProps, {
       style: {
-        width: "".concat(firstWidth * 100, "%")
+        width: `${firstWidth * 100}%`
       }
     }), content), /*#__PURE__*/React.createElement("div", Object.assign({}, secondStarProps, {
       "x-semi-prop": "character"

package/lib/es/scrollList/index.js

@@ -27,7 +27,7 @@ class ScrollList extends BaseComponent {
       [prefixCls || cssClasses.PREFIX]: true
     });
     const clsHeader = classnames({
-      ["".concat(prefixCls || cssClasses.PREFIX, "-header")]: true
+      [`${prefixCls || cssClasses.PREFIX}-header`]: true
     });
     return /*#__PURE__*/React.createElement("div", {
       className: clsWrapper,
@@ -35,18 +35,18 @@ class ScrollList extends BaseComponent {
     }, header ? /*#__PURE__*/React.createElement("div", {
       className: clsHeader
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsHeader, "-title"),
+      className: `${clsHeader}-title`,
       "x-semi-prop": this.props['x-semi-header-alias'] || "header"
     }, header), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-line")
+      className: `${clsWrapper}-line`
     })) : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-body"),
+      className: `${clsWrapper}-body`,
       style: {
         height: bodyHeight ? bodyHeight : ''
       },
       "x-semi-prop": "children"
     }, children), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-footer"),
+      className: `${clsWrapper}-footer`,
       "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
     }, footer) : null);
   }

package/lib/es/scrollList/scrollItem.js

@@ -127,7 +127,7 @@ export default class ScrollItem extends BaseComponent {
         const {
           children
         } = list;
-        const reg = new RegExp("\\s*".concat(selectedCls, "\\s*"), 'g');
+        const reg = new RegExp(`\\s*${selectedCls}\\s*`, 'g');
 
         _map(children, node => {
           node.className = node.className && node.className.replace(reg, ' ');
@@ -138,7 +138,7 @@ export default class ScrollItem extends BaseComponent {
         });
 
         if (selectedNode.className && !blankReg.test(selectedNode.className)) {
-          selectedNode.className += " ".concat(selectedCls);
+          selectedNode.className += ` ${selectedCls}`;
         } else {
           selectedNode.className = selectedCls;
         }
@@ -276,8 +276,8 @@ export default class ScrollItem extends BaseComponent {
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
         const selected = selectedIndex === index;
         const cls = classnames({
-          ["".concat(cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
-          ["".concat(cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
+          [`${cssClasses.PREFIX}-item-sel`]: selected && mode !== wheelMode,
+          [`${cssClasses.PREFIX}-item-disabled`]: Boolean(item.disabled)
         });
         let text = '';
 
@@ -321,7 +321,7 @@ export default class ScrollItem extends BaseComponent {
         style
       } = this.props;
       const inner = this.renderItemList();
-      const wrapperCls = classnames("".concat(cssClasses.PREFIX, "-item"), className);
+      const wrapperCls = classnames(`${cssClasses.PREFIX}-item`, className);
       return /*#__PURE__*/React.createElement("div", {
         style: style,
         className: wrapperCls,
@@ -351,25 +351,25 @@ export default class ScrollItem extends BaseComponent {
       } = this.state;
 
       const prependList = _times(prependCount).reduce((arr, num) => {
-        const items = this.renderItemList("pre_".concat(num, "_"));
+        const items = this.renderItemList(`pre_${num}_`);
         arr.unshift(...items);
         return arr;
       }, []);
 
       const appendList = _times(appendCount).reduce((arr, num) => {
-        const items = this.renderItemList("app_".concat(num, "_"));
+        const items = this.renderItemList(`app_${num}_`);
         arr.push(...items);
         return arr;
       }, []);
 
       const inner = this.renderItemList();
-      const listWrapperCls = classnames("".concat(cssClasses.PREFIX, "-list-outer"), {
-        ["".concat(cssClasses.PREFIX, "-list-outer-nocycle")]: !cycled
+      const listWrapperCls = classnames(`${cssClasses.PREFIX}-list-outer`, {
+        [`${cssClasses.PREFIX}-list-outer-nocycle`]: !cycled
       });
-      const wrapperCls = classnames("".concat(cssClasses.PREFIX, "-item-wheel"), className);
-      const selectorCls = classnames("".concat(cssClasses.PREFIX, "-selector"));
-      const preShadeCls = classnames("".concat(cssClasses.PREFIX, "-shade"), "".concat(cssClasses.PREFIX, "-shade-pre"));
-      const postShadeCls = classnames("".concat(cssClasses.PREFIX, "-shade"), "".concat(cssClasses.PREFIX, "-shade-post"));
+      const wrapperCls = classnames(`${cssClasses.PREFIX}-item-wheel`, className);
+      const selectorCls = classnames(`${cssClasses.PREFIX}-selector`);
+      const preShadeCls = classnames(`${cssClasses.PREFIX}-shade`, `${cssClasses.PREFIX}-shade-pre`);
+      const postShadeCls = classnames(`${cssClasses.PREFIX}-shade`, `${cssClasses.PREFIX}-shade-post`);
       return /*#__PURE__*/React.createElement("div", {
         className: wrapperCls,
         style: style

package/lib/es/select/index.js

@@ -365,13 +365,13 @@ class Select extends BaseComponent {
       },
       updateScrollTop: index => {
         // eslint-disable-next-line max-len
-        let optionClassName = ".".concat(prefixcls, "-option-selected");
+        let optionClassName = `.${prefixcls}-option-selected`;
 
         if (index !== undefined) {
-          optionClassName = ".".concat(prefixcls, "-option:nth-child(").concat(index, ")");
+          optionClassName = `.${prefixcls}-option:nth-child(${index})`;
         }
 
-        let destNode = document.querySelector("#".concat(prefixcls, "-").concat(this.selectOptionListID, " ").concat(optionClassName));
+        let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
 
         if (Array.isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -431,9 +431,9 @@ class Select extends BaseComponent {
 
     const inputPropsCls = _get(inputProps, 'className');
 
-    const inputcls = cls("".concat(prefixcls, "-input"), {
-      ["".concat(prefixcls, "-input-single")]: !multiple,
-      ["".concat(prefixcls, "-input-multiple")]: multiple
+    const inputcls = cls(`${prefixcls}-input`, {
+      [`${prefixcls}-input-single`]: !multiple,
+      [`${prefixcls}-input-multiple`]: multiple
     }, inputPropsCls);
     const {
       inputValue,
@@ -449,7 +449,7 @@ class Select extends BaseComponent {
 
     if (multiple) {
       style = {
-        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
+        width: inputValue ? `${inputValue.length * 16}px` : '2px'
       };
       selectInputProps.style = style;
     }
@@ -457,7 +457,7 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(Input, Object.assign({
       ref: this.inputRef,
       size: size,
-      "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
+      "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
       onFocus: e => {
         // if multiple and filter, when use tab key to let select get focus
         // need to manual update state isFocus to let the focus style take effect
@@ -515,7 +515,7 @@ class Select 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));
@@ -556,7 +556,7 @@ class Select extends BaseComponent {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: "".concat(this.selectID, "-option-").concat(optionIndex)
+        id: `${this.selectID}-option-${optionIndex}`
       }), option.label);
     }
 
@@ -580,7 +580,7 @@ class Select extends BaseComponent {
       }), /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixcls, "-create-tips")
+        className: `${prefixcls}-create-tips`
       }, locale.createText), option.value)));
       return defaultCreateItem;
     }
@@ -682,42 +682,42 @@ class Select extends BaseComponent {
       minWidth: dropdownMinWidth
     }, dropdownStyle);
     const optionListCls = cls({
-      ["".concat(prefixcls, "-option-list")]: true,
-      ["".concat(prefixcls, "-option-list-chosen")]: selections.size
+      [`${prefixcls}-option-list`]: true,
+      [`${prefixcls}-option-list-chosen`]: selections.size
     });
     const isEmpty = !options.length || !options.some(item => item._show);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       React.createElement("div", {
-        id: "".concat(prefixcls, "-").concat(this.selectOptionListID),
+        id: `${prefixcls}-${this.selectOptionListID}`,
         className: cls({
           // When emptyContent is null and the option is empty, there is no need for the drop-down option for the user,
           // so there is no need to set padding through this className
-          ["".concat(prefixcls, "-option-list-wrapper")]: !(isEmpty && emptyContent === null)
+          [`${prefixcls}-option-list-wrapper`]: !(isEmpty && emptyContent === null)
         }, dropdownClassName),
         style: style,
         ref: this.setOptionContainerEl,
         onKeyDown: e => this.foundation.handleContainerKeyDown(e)
       }, outerTopSlot ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-outer-top-slot"),
+        className: `${prefixcls}-option-list-outer-top-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerTopSlot) : null, /*#__PURE__*/React.createElement("div", {
         style: {
-          maxHeight: "".concat(maxHeight, "px")
+          maxHeight: `${maxHeight}px`
         },
         className: optionListCls,
         role: "listbox",
         "aria-multiselectable": multiple,
         onScroll: e => this.foundation.handleListScroll(e)
       }, innerTopSlot ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-inner-top-slot"),
+        className: `${prefixcls}-option-list-inner-top-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerTopSlot) : null, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
+        className: `${prefixcls}-option-list-inner-bottom-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
+        className: `${prefixcls}-option-list-outer-bottom-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerBottomSlot) : null)
     );
@@ -747,13 +747,13 @@ class Select extends BaseComponent {
     }
 
     const spanCls = cls({
-      ["".concat(prefixcls, "-selection-text")]: true,
-      ["".concat(prefixcls, "-selection-placeholder")]: !renderText && renderText !== 0,
-      ["".concat(prefixcls, "-selection-text-hide")]: inputValue && showInput,
-      ["".concat(prefixcls, "-selection-text-inactive")]: !inputValue && showInput // Stack Input & RenderText(opacity 0.4)
+      [`${prefixcls}-selection-text`]: true,
+      [`${prefixcls}-selection-placeholder`]: !renderText && renderText !== 0,
+      [`${prefixcls}-selection-text-hide`]: inputValue && showInput,
+      [`${prefixcls}-selection-text-inactive`]: !inputValue && showInput // Stack Input & RenderText(opacity 0.4)
 
     });
-    const contentWrapperCls = "".concat(prefixcls, "-content-wrapper");
+    const contentWrapperCls = `${prefixcls}-content-wrapper`;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/React.createElement("span", {
@@ -838,14 +838,14 @@ class Select extends BaseComponent {
     }
 
     const contentWrapperCls = cls({
-      ["".concat(prefixcls, "-content-wrapper")]: true,
-      ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount,
-      ["".concat(prefixcls, "-content-wrapper-empty")]: !tags.length
+      [`${prefixcls}-content-wrapper`]: true,
+      [`${prefixcls}-content-wrapper-one-line`]: maxTagCount,
+      [`${prefixcls}-content-wrapper-empty`]: !tags.length
     });
     const spanCls = cls({
-      ["".concat(prefixcls, "-selection-text")]: true,
-      ["".concat(prefixcls, "-selection-placeholder")]: !tags.length,
-      ["".concat(prefixcls, "-selection-text-hide")]: tags && tags.length // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
+      [`${prefixcls}-selection-text`]: true,
+      [`${prefixcls}-selection-placeholder`]: !tags.length,
+      [`${prefixcls}-selection-text-hide`]: tags && tags.length // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
 
     });
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/React.createElement("span", {
@@ -909,9 +909,9 @@ class Select extends BaseComponent {
       suffix
     } = this.props;
     const suffixWrapperCls = cls({
-      ["".concat(prefixcls, "-suffix")]: true,
-      ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
-      ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
+      [`${prefixcls}-suffix`]: true,
+      [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
+      [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
     });
     return /*#__PURE__*/React.createElement("div", {
       className: suffixWrapperCls,
@@ -927,10 +927,10 @@ class Select extends BaseComponent {
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = cls({
-      ["".concat(prefixcls, "-prefix")]: true,
-      ["".concat(prefixcls, "-inset-label")]: insetLabel,
-      ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
-      ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
+      [`${prefixcls}-prefix`]: true,
+      [`${prefixcls}-inset-label`]: insetLabel,
+      [`${prefixcls}-prefix-text`]: labelNode && _isString(labelNode),
+      [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode)
     });
     return /*#__PURE__*/React.createElement("div", {
       className: prefixWrapperCls,
@@ -972,26 +972,26 @@ class Select extends BaseComponent {
     const filterable = Boolean(filter); // filter（boolean || function）
 
     const selectionCls = useCustomTrigger ? cls(className) : cls(prefixcls, className, {
-      ["".concat(prefixcls, "-open")]: isOpen,
-      ["".concat(prefixcls, "-focus")]: isFocus,
-      ["".concat(prefixcls, "-disabled")]: disabled,
-      ["".concat(prefixcls, "-single")]: !multiple,
-      ["".concat(prefixcls, "-multiple")]: multiple,
-      ["".concat(prefixcls, "-filterable")]: filterable,
-      ["".concat(prefixcls, "-small")]: size === 'small',
-      ["".concat(prefixcls, "-large")]: size === 'large',
-      ["".concat(prefixcls, "-error")]: validateStatus === 'error',
-      ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
-      ["".concat(prefixcls, "-no-arrow")]: !showArrow,
-      ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
-      ["".concat(prefixcls, "-with-suffix")]: suffix
+      [`${prefixcls}-open`]: isOpen,
+      [`${prefixcls}-focus`]: isFocus,
+      [`${prefixcls}-disabled`]: disabled,
+      [`${prefixcls}-single`]: !multiple,
+      [`${prefixcls}-multiple`]: multiple,
+      [`${prefixcls}-filterable`]: filterable,
+      [`${prefixcls}-small`]: size === 'small',
+      [`${prefixcls}-large`]: size === 'large',
+      [`${prefixcls}-error`]: validateStatus === 'error',
+      [`${prefixcls}-warning`]: validateStatus === 'warning',
+      [`${prefixcls}-no-arrow`]: !showArrow,
+      [`${prefixcls}-with-prefix`]: prefix || insetLabel,
+      [`${prefixcls}-with-suffix`]: suffix
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-arrow"),
+      className: `${prefixcls}-arrow`,
       "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-arrow-empty")
+      className: `${prefixcls}-arrow-empty`
     });
     const clear = clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null);
     const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
@@ -1009,11 +1009,11 @@ class Select extends BaseComponent {
     }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
       key: "selection"
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls("".concat(prefixcls, "-selection"))
+      className: cls(`${prefixcls}-selection`)
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/React.createElement(Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/React.createElement("div", {
-      className: cls("".concat(prefixcls, "-clear")),
+      className: cls(`${prefixcls}-clear`),
       onClick: this.onClear
     }, clear) : arrowContent), /*#__PURE__*/React.createElement(Fragment, {
       key: "suffix"
@@ -1036,7 +1036,7 @@ class Select extends BaseComponent {
         role: "combobox",
         "aria-disabled": disabled,
         "aria-expanded": isOpen,
-        "aria-controls": "".concat(prefixcls, "-").concat(this.selectOptionListID),
+        "aria-controls": `${prefixcls}-${this.selectOptionListID}`,
         "aria-haspopup": "listbox",
         "aria-label": selections.size ? 'selected' : '',
         "aria-invalid": this.props['aria-invalid'],
@@ -1050,7 +1050,7 @@ class Select extends BaseComponent {
         style: style,
         id: this.selectID,
         tabIndex: tabIndex,
-        "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
+        "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
         onFocus: e => this.foundation.handleTriggerFocus(e),

package/lib/es/select/option.js

@@ -82,13 +82,13 @@ class Option extends PureComponent {
           rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
 
     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) {
@@ -126,7 +126,7 @@ class Option extends PureComponent {
       searchWords: inputValue,
       sourceString: children,
       option: {
-        highlightClassName: "".concat(prefixCls, "-keyword")
+        highlightClassName: `${prefixCls}-keyword`
       }
     };
     return (
@@ -150,7 +150,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/sideSheet/SideSheetContent.js

@@ -38,7 +38,7 @@ export default class SideSheetContent extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.sideSheetId = "sidesheet-".concat(uuid++);
+    this.sideSheetId = `sidesheet-${uuid++}`;
   }
 
   componentWillUnmount() {
@@ -58,7 +58,7 @@ export default class SideSheetContent extends React.PureComponent {
       return /*#__PURE__*/React.createElement("div", Object.assign({
         "aria-hidden": true,
         key: "mask",
-        className: cls("".concat(prefixCls, "-mask"), (_a = this.props.maskClassName) !== null && _a !== void 0 ? _a : ""),
+        className: cls(`${prefixCls}-mask`, (_a = this.props.maskClassName) !== null && _a !== void 0 ? _a : ""),
         style: maskStyle,
         onClick: maskClosable ? this.onMaskClick : null
       }, this.props.maskExtraProps));
@@ -77,14 +77,14 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, this.props.title);
     }
 
     if (closable) {
       closer = /*#__PURE__*/React.createElement(Button, {
-        className: "".concat(prefixCls, "-close"),
+        className: `${prefixCls}-close`,
         key: "close-btn",
         onClick: this.close,
         type: "tertiary",
@@ -95,7 +95,7 @@ export default class SideSheetContent extends React.PureComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-header"),
+      className: `${prefixCls}-header`,
       role: 'heading',
       "aria-level": 1,
       style: Object.assign({}, headerStyle)
@@ -126,17 +126,17 @@ export default class SideSheetContent extends React.PureComponent {
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: cls("".concat(prefixCls, "-inner"), "".concat(prefixCls, "-inner-wrap"), (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
+      className: cls(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
       // onMouseDown={this.onDialogMouseDown}
       style: Object.assign(Object.assign({}, props.style), style)
     }, this.props.wrapperExtraProps), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, header, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-body"),
+      className: `${prefixCls}-body`,
       style: props.bodyStyle,
       "x-semi-prop": "children"
     }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer"),
+      className: `${prefixCls}-footer`,
       "x-semi-prop": "footer"
     }, props.footer) : null));
     return dialogElement;
@@ -149,7 +149,7 @@ export default class SideSheetContent extends React.PureComponent {
       width
     } = this.props;
     const wrapperCls = cls(className, {
-      ["".concat(prefixCls, "-fixed")]: !mask
+      [`${prefixCls}-fixed`]: !mask
     });
     const wrapperStyle = {};
 

package/lib/es/sideSheet/index.js

@@ -164,11 +164,11 @@ export default class SideSheet extends BaseComponent {
     const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
     const sheetHeight = isHorizontal ? height ? height : defaultHeight : '100%';
     const classList = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-").concat(placement)]: placement,
-      ["".concat(prefixCls, "-popup")]: getPopupContainer,
-      ["".concat(prefixCls, "-horizontal")]: isHorizontal,
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl',
-      ["".concat(prefixCls, "-hidden")]: keepDOM && this.state.displayNone
+      [`${prefixCls}-${placement}`]: placement,
+      [`${prefixCls}-popup`]: getPopupContainer,
+      [`${prefixCls}-horizontal`]: isHorizontal,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone
     });
     const contentProps = Object.assign(Object.assign({}, props), {
       visible,
@@ -185,7 +185,7 @@ export default class SideSheet extends BaseComponent {
     return /*#__PURE__*/React.createElement(CSSAnimation, {
       motion: this.props.motion,
       animationState: visible ? 'enter' : 'leave',
-      startClassName: visible ? "".concat(prefixCls, "-animation-mask_show") : "".concat(prefixCls, "-animation-mask_hide"),
+      startClassName: visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`,
       onAnimationEnd: this.updateState
     }, _ref => {
       let {
@@ -195,7 +195,7 @@ export default class SideSheet extends BaseComponent {
       return /*#__PURE__*/React.createElement(CSSAnimation, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
-        startClassName: visible ? "".concat(prefixCls, "-animation-content_show_").concat(this.props.placement) : "".concat(prefixCls, "-animation-content_hide_").concat(this.props.placement),
+        startClassName: visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`,
         onAnimationEnd: this.updateState
         /* for no mask case*/
 

package/lib/es/skeleton/index.js

@@ -31,7 +31,7 @@ class Skeleton extends PureComponent {
           others = __rest(_a, ["placeholder", "active", "children", "className", "loading", "style"]);
 
     const skCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-active")]: Boolean(active)
+      [`${prefixCls}-active`]: Boolean(active)
     }, className);
     let content;
 

package/lib/es/skeleton/item.js

@@ -34,10 +34,10 @@ class Generic extends PureComponent {
     } = _a,
           others = __rest(_a, ["prefixCls", "className", "type", "size", "shape"]);
 
-    const classString = cls(className, "".concat(prefixCls, "-").concat(type), {
-      ["".concat(prefixCls, "-").concat(type, "-").concat(size)]: type.toUpperCase() === 'AVATAR'
+    const classString = cls(className, `${prefixCls}-${type}`, {
+      [`${prefixCls}-${type}-${size}`]: type.toUpperCase() === 'AVATAR'
     }, {
-      ["".concat(prefixCls, "-").concat(type, "-").concat(shape)]: type.toUpperCase() === 'AVATAR'
+      [`${prefixCls}-${type}-${shape}`]: type.toUpperCase() === 'AVATAR'
     });
     return /*#__PURE__*/React.createElement('div', Object.assign({
       className: classString
@@ -71,7 +71,7 @@ export class Paragraph extends PureComponent {
       style,
       rows
     } = this.props;
-    const classString = cls(className, "".concat(prefixCls, "-paragraph"));
+    const classString = cls(className, `${prefixCls}-paragraph`);
     return /*#__PURE__*/React.createElement("ul", {
       className: classString,
       style: style