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

package/lib/cjs/select/index.js

@@ -424,13 +424,13 @@ class Select extends _baseComponent.default {
       },
       updateScrollTop: index => {
         // eslint-disable-next-line max-len
-        let optionClassName = `.${prefixcls}-option-selected`;
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
 
         if (index !== undefined) {
-          optionClassName = `.${prefixcls}-option:nth-child(${index})`;
+          optionClassName = ".".concat(prefixcls, "-option:nth-child(").concat(index, ")");
         }
 
-        let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
+        let destNode = document.querySelector("#".concat(prefixcls, "-").concat(this.selectOptionListID, " ").concat(optionClassName));
 
         if (Array.isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -490,9 +490,9 @@ class Select extends _baseComponent.default {
       filter
     } = this.props;
     const inputPropsCls = (0, _get2.default)(inputProps, 'className');
-    const inputcls = (0, _classnames.default)(`${prefixcls}-input`, {
-      [`${prefixcls}-input-single`]: !multiple,
-      [`${prefixcls}-input-multiple`]: multiple
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
+      ["".concat(prefixcls, "-input-single")]: !multiple,
+      ["".concat(prefixcls, "-input-multiple")]: multiple
     }, inputPropsCls);
     const {
       inputValue,
@@ -508,7 +508,7 @@ class Select extends _baseComponent.default {
 
     if (multiple) {
       style = {
-        width: inputValue ? `${inputValue.length * 16}px` : '2px'
+        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
       };
       selectInputProps.style = style;
     }
@@ -516,7 +516,7 @@ class Select extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_index5.default, Object.assign({
       ref: this.inputRef,
       size: size,
-      "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
+      "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(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
@@ -574,7 +574,7 @@ class Select extends _baseComponent.default {
   }
 
   renderLoading() {
-    const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
+    const loadingWrapperCls = "".concat(prefixcls, "-loading-wrapper");
     return /*#__PURE__*/_react.default.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
@@ -615,7 +615,7 @@ class Select extends _baseComponent.default {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: `${this.selectID}-option-${optionIndex}`
+        id: "".concat(this.selectID, "-option-").concat(optionIndex)
       }), option.label);
     }
 
@@ -639,7 +639,7 @@ class Select extends _baseComponent.default {
       }), /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Select"
       }, locale => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: `${prefixcls}-create-tips`
+        className: "".concat(prefixcls, "-create-tips")
       }, locale.createText), option.value)));
 
       return defaultCreateItem;
@@ -743,42 +743,42 @@ class Select extends _baseComponent.default {
       minWidth: dropdownMinWidth
     }, dropdownStyle);
     const optionListCls = (0, _classnames.default)({
-      [`${prefixcls}-option-list`]: true,
-      [`${prefixcls}-option-list-chosen`]: selections.size
+      ["".concat(prefixcls, "-option-list")]: true,
+      ["".concat(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.default.createElement("div", {
-        id: `${prefixcls}-${this.selectOptionListID}`,
+        id: "".concat(prefixcls, "-").concat(this.selectOptionListID),
         className: (0, _classnames.default)({
           // 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
-          [`${prefixcls}-option-list-wrapper`]: !(isEmpty && emptyContent === null)
+          ["".concat(prefixcls, "-option-list-wrapper")]: !(isEmpty && emptyContent === null)
         }, dropdownClassName),
         style: style,
         ref: this.setOptionContainerEl,
         onKeyDown: e => this.foundation.handleContainerKeyDown(e)
       }, outerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-outer-top-slot`,
+        className: "".concat(prefixcls, "-option-list-outer-top-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerTopSlot) : null, /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          maxHeight: `${maxHeight}px`
+          maxHeight: "".concat(maxHeight, "px")
         },
         className: optionListCls,
         role: "listbox",
         "aria-multiselectable": multiple,
         onScroll: e => this.foundation.handleListScroll(e)
       }, innerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-inner-top-slot`,
+        className: "".concat(prefixcls, "-option-list-inner-top-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerTopSlot) : null, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-inner-bottom-slot`,
+        className: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-outer-bottom-slot`,
+        className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerBottomSlot) : null)
     );
@@ -808,13 +808,13 @@ class Select extends _baseComponent.default {
     }
 
     const spanCls = (0, _classnames.default)({
-      [`${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)
+      ["".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)
 
     });
-    const contentWrapperCls = `${prefixcls}-content-wrapper`;
+    const contentWrapperCls = "".concat(prefixcls, "-content-wrapper");
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/_react.default.createElement("span", {
@@ -911,8 +911,8 @@ class Select extends _baseComponent.default {
       closable: false,
       size: size || 'large',
       color: 'grey',
-      className: `${prefixcls}-content-wrapper-collapse-tag`,
-      key: `_+${n}`,
+      className: "".concat(prefixcls, "-content-wrapper-collapse-tag"),
+      key: "_+".concat(n),
       style: {
         marginRight: 0,
         flexShrink: 0
@@ -933,7 +933,7 @@ class Select extends _baseComponent.default {
         position: "top",
         autoAdjustOverflow: true
       }, restTagsPopoverProps, {
-        key: `_+${n}_Popover`
+        key: "_+".concat(n, "_Popover")
       }), nTag);
     }
 
@@ -967,7 +967,7 @@ class Select extends _baseComponent.default {
     } = this.state;
     const normalTags = typeof length === 'number' ? selections.slice(0, length) : selections;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixcls}-content-wrapper-collapse`
+      className: "".concat(prefixcls, "-content-wrapper-collapse")
     }, /*#__PURE__*/_react.default.createElement(_index2.default, {
       items: normalTags,
       overflowRenderer: overflowItems => this.renderOverflow(overflowItems, length - 1),
@@ -1059,14 +1059,14 @@ class Select extends _baseComponent.default {
     }
 
     const contentWrapperCls = (0, _classnames.default)({
-      [`${prefixcls}-content-wrapper`]: true,
-      [`${prefixcls}-content-wrapper-one-line`]: maxTagCount && !isOpen,
-      [`${prefixcls}-content-wrapper-empty`]: !selectedItems.length
+      ["".concat(prefixcls, "-content-wrapper")]: true,
+      ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount && !isOpen,
+      ["".concat(prefixcls, "-content-wrapper-empty")]: !selectedItems.length
     });
     const spanCls = (0, _classnames.default)({
-      [`${prefixcls}-selection-text`]: true,
-      [`${prefixcls}-selection-placeholder`]: !selectedItems.length,
-      [`${prefixcls}-selection-text-hide`]: selectedItems && selectedItems.length
+      ["".concat(prefixcls, "-selection-text")]: true,
+      ["".concat(prefixcls, "-selection-placeholder")]: !selectedItems.length,
+      ["".concat(prefixcls, "-selection-text-hide")]: selectedItems && selectedItems.length
     });
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: spanCls
@@ -1132,9 +1132,9 @@ class Select 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, _utils2.isSemiIcon)(suffix)
+      ["".concat(prefixcls, "-suffix")]: true,
+      ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+      ["".concat(prefixcls, "-suffix-icon")]: (0, _utils2.isSemiIcon)(suffix)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: suffixWrapperCls,
@@ -1150,10 +1150,10 @@ class Select extends _baseComponent.default {
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = (0, _classnames.default)({
-      [`${prefixcls}-prefix`]: true,
-      [`${prefixcls}-inset-label`]: insetLabel,
-      [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
-      [`${prefixcls}-prefix-icon`]: (0, _utils2.isSemiIcon)(labelNode)
+      ["".concat(prefixcls, "-prefix")]: true,
+      ["".concat(prefixcls, "-inset-label")]: insetLabel,
+      ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+      ["".concat(prefixcls, "-prefix-icon")]: (0, _utils2.isSemiIcon)(labelNode)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixWrapperCls,
@@ -1195,26 +1195,26 @@ class Select extends _baseComponent.default {
     const filterable = Boolean(filter); // filter（boolean || function）
 
     const selectionCls = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, className, {
-      [`${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
+      ["".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
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixcls}-arrow`,
+      className: "".concat(prefixcls, "-arrow"),
       "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixcls}-arrow-empty`
+      className: "".concat(prefixcls, "-arrow-empty")
     });
     const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null);
     const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
@@ -1232,11 +1232,11 @@ class Select extends _baseComponent.default {
     }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "selection"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${prefixcls}-selection`)
+      className: (0, _classnames.default)("".concat(prefixcls, "-selection"))
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${prefixcls}-clear`),
+      className: (0, _classnames.default)("".concat(prefixcls, "-clear")),
       onClick: this.onClear
     }, clear) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "suffix"
@@ -1259,7 +1259,7 @@ class Select extends _baseComponent.default {
         role: "combobox",
         "aria-disabled": disabled,
         "aria-expanded": isOpen,
-        "aria-controls": `${prefixcls}-${this.selectOptionListID}`,
+        "aria-controls": "".concat(prefixcls, "-").concat(this.selectOptionListID),
         "aria-haspopup": "listbox",
         "aria-label": selections.size ? 'selected' : '',
         "aria-invalid": this.props['aria-invalid'],
@@ -1273,7 +1273,7 @@ class Select extends _baseComponent.default {
         style: style,
         id: this.selectID,
         tabIndex: tabIndex,
-        "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
+        "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
         onFocus: e => this.foundation.handleTriggerFocus(e),

package/lib/cjs/select/option.js

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

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -54,7 +54,7 @@ class SideSheetContent extends _react.default.PureComponent {
   }
 
   componentDidMount() {
-    this.sideSheetId = `sidesheet-${uuid++}`;
+    this.sideSheetId = "sidesheet-".concat(uuid++);
   }
 
   componentWillUnmount() {
@@ -74,7 +74,7 @@ class SideSheetContent extends _react.default.PureComponent {
       return /*#__PURE__*/_react.default.createElement("div", Object.assign({
         "aria-hidden": true,
         key: "mask",
-        className: (0, _classnames.default)(`${prefixCls}-mask`, (_a = this.props.maskClassName) !== null && _a !== void 0 ? _a : ""),
+        className: (0, _classnames.default)("".concat(prefixCls, "-mask"), (_a = this.props.maskClassName) !== null && _a !== void 0 ? _a : ""),
         style: maskStyle,
         onClick: maskClosable ? this.onMaskClick : null
       }, this.props.maskExtraProps));
@@ -93,14 +93,14 @@ class SideSheetContent extends _react.default.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixCls}-title`,
+        className: "".concat(prefixCls, "-title"),
         "x-semi-prop": "title"
       }, this.props.title);
     }
 
     if (closable) {
       closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-        className: `${prefixCls}-close`,
+        className: "".concat(prefixCls, "-close"),
         key: "close-btn",
         onClick: this.close,
         type: "tertiary",
@@ -111,7 +111,7 @@ class SideSheetContent extends _react.default.PureComponent {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-header`,
+      className: "".concat(prefixCls, "-header"),
       role: 'heading',
       "aria-level": 1,
       style: Object.assign({}, headerStyle)
@@ -143,17 +143,17 @@ class SideSheetContent extends _react.default.PureComponent {
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: (0, _classnames.default)(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
+      className: (0, _classnames.default)("".concat(prefixCls, "-inner"), "".concat(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.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-body`,
+      className: "".concat(prefixCls, "-body"),
       style: props.bodyStyle,
       "x-semi-prop": "children"
     }, props.children), props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-footer`,
+      className: "".concat(prefixCls, "-footer"),
       "x-semi-prop": "footer"
     }, props.footer) : null));
 
@@ -167,7 +167,7 @@ class SideSheetContent extends _react.default.PureComponent {
       width
     } = this.props;
     const wrapperCls = (0, _classnames.default)(className, {
-      [`${prefixCls}-fixed`]: !mask
+      ["".concat(prefixCls, "-fixed")]: !mask
     });
     const wrapperStyle = {};
 

package/lib/cjs/sideSheet/index.js

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

package/lib/cjs/skeleton/index.js

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

package/lib/cjs/skeleton/item.js

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

package/lib/cjs/slider/index.js

@@ -74,10 +74,10 @@ class Slider extends _baseComponent.default {
         tipChildren
       } = this.foundation.computeHandleVisibleVal(tooltipVisible && isInRenderTree, tipFormatter, range);
       const minClass = (0, _classnames.default)(_constants.cssClasses.HANDLE, {
-        [`${_constants.cssClasses.HANDLE}-clicked`]: chooseMovePos === 'min' && isDrag
+        ["".concat(_constants.cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'min' && isDrag
       });
       const maxClass = (0, _classnames.default)(_constants.cssClasses.HANDLE, {
-        [`${_constants.cssClasses.HANDLE}-clicked`]: chooseMovePos === 'max' && isDrag
+        ["".concat(_constants.cssClasses.HANDLE, "-clicked")]: chooseMovePos === 'max' && isDrag
       });
       const {
         min,
@@ -98,13 +98,13 @@ class Slider extends _baseComponent.default {
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
-        className: `${_constants.cssClasses.HANDLE}-tooltip`
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/_react.default.createElement("span", Object.assign({
         onMouseOver: this.foundation.checkAndUpdateIsInRenderTreeState,
         ref: this.minHanleEl,
         className: minClass,
         style: {
-          [stylePos]: `${minPercent * 100}%`,
+          [stylePos]: "".concat(minPercent * 100, "%"),
           zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1
         },
         onMouseDown: e => {
@@ -150,12 +150,12 @@ class Slider extends _baseComponent.default {
         trigger: "custom",
         rePosKey: minPercent,
         visible: isInRenderTree && (tipVisible.min || firstDotFocusVisible),
-        className: `${_constants.cssClasses.HANDLE}-tooltip`
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/_react.default.createElement("span", Object.assign({
         ref: this.minHanleEl,
         className: minClass,
         style: {
-          [stylePos]: `${minPercent * 100}%`,
+          [stylePos]: "".concat(minPercent * 100, "%"),
           zIndex: chooseMovePos === 'min' ? 2 : 1
         },
         onMouseDown: e => {
@@ -201,12 +201,12 @@ class Slider extends _baseComponent.default {
         trigger: "custom",
         rePosKey: maxPercent,
         visible: isInRenderTree && (tipVisible.max || secondDotFocusVisible),
-        className: `${_constants.cssClasses.HANDLE}-tooltip`
+        className: "".concat(_constants.cssClasses.HANDLE, "-tooltip")
       }, /*#__PURE__*/_react.default.createElement("span", Object.assign({
         ref: this.maxHanleEl,
         className: maxClass,
         style: {
-          [stylePos]: `${maxPercent * 100}%`,
+          [stylePos]: "".concat(maxPercent * 100, "%"),
           zIndex: chooseMovePos === 'max' ? 2 : 1
         },
         onMouseDown: e => {
@@ -260,11 +260,11 @@ class Slider extends _baseComponent.default {
       const minPercent = percentInfo.min;
       const maxPercent = percentInfo.max;
       let trackStyle = !vertical ? {
-        width: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        left: range ? `${minPercent * 100}%` : 0
+        width: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        left: range ? "".concat(minPercent * 100, "%") : 0
       } : {
-        height: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        top: range ? `${minPercent * 100}%` : 0
+        height: range ? "".concat((maxPercent - minPercent) * 100, "%") : "".concat(minPercent * 100, "%"),
+        top: range ? "".concat(minPercent * 100, "%") : 0
       };
       trackStyle = included ? trackStyle : {};
       return (
@@ -290,8 +290,8 @@ class Slider extends _baseComponent.default {
         className: _constants.cssClasses.DOTS
       }, Object.keys(marks).map(mark => {
         const activeResult = this.foundation.isMarkActive(Number(mark));
-        const markClass = (0, _classnames.default)(`${prefixCls}-dot`, {
-          [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
+        const markClass = (0, _classnames.default)("".concat(prefixCls, "-dot"), {
+          ["".concat(prefixCls, "-dot-active")]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
         return activeResult ?
@@ -302,7 +302,7 @@ class Slider extends _baseComponent.default {
           onClick: this.foundation.handleWrapClick,
           className: markClass,
           style: {
-            [stylePos]: `calc(${markPercent * 100}% - 2px)`
+            [stylePos]: "calc(".concat(markPercent * 100, "% - 2px)")
           }
         }) : null;
       })) : null;
@@ -328,9 +328,9 @@ class Slider extends _baseComponent.default {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         _react.default.createElement("span", {
           key: mark,
-          className: (0, _classnames.default)(`${prefixCls}-mark${vertical && verticalReverse ? '-reverse' : ''}`),
+          className: (0, _classnames.default)("".concat(prefixCls, "-mark").concat(vertical && verticalReverse ? '-reverse' : '')),
           style: {
-            [stylePos]: `${markPercent * 100}%`
+            [stylePos]: "".concat(markPercent * 100, "%")
           },
           onClick: this.foundation.handleWrapClick
         }, marks[mark]) : null;
@@ -608,19 +608,19 @@ class Slider extends _baseComponent.default {
       range,
       className
     } = this.props;
-    const wrapperClass = (0, _classnames.default)(`${prefixCls}-wrapper`, {
-      [`${prefixCls}-disabled`]: disabled,
-      [`${_constants.cssClasses.VERTICAL}-wrapper`]: vertical,
-      [`${prefixCls}-reverse`]: vertical && verticalReverse
+    const wrapperClass = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), {
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(_constants.cssClasses.VERTICAL, "-wrapper")]: vertical,
+      ["".concat(prefixCls, "-reverse")]: vertical && verticalReverse
     }, className);
-    const boundaryClass = (0, _classnames.default)(`${prefixCls}-boundary`, {
-      [`${prefixCls}-boundary-show`]: this.props.showBoundary && this.state.showBoundary
+    const boundaryClass = (0, _classnames.default)("".concat(prefixCls, "-boundary"), {
+      ["".concat(prefixCls, "-boundary-show")]: this.props.showBoundary && this.state.showBoundary
     });
     const sliderCls = (0, _classnames.default)({
-      [`${prefixCls}`]: !vertical,
+      ["".concat(prefixCls)]: !vertical,
       [_constants.cssClasses.VERTICAL]: vertical
     });
-    const ariaLabel = range ? `Range: ${this._getAriaValueText(currentValue[0], 0)} to ${this._getAriaValueText(currentValue[1], 1)}` : undefined;
+    const ariaLabel = range ? "Range: ".concat(this._getAriaValueText(currentValue[0], 0), " to ").concat(this._getAriaValueText(currentValue[1], 1)) : undefined;
 
     const slider = /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperClass,
@@ -630,15 +630,15 @@ class Slider extends _baseComponent.default {
       onMouseEnter: () => this.foundation.handleWrapperEnter(),
       onMouseLeave: () => this.foundation.handleWrapperLeave()
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-rail`,
+      className: "".concat(prefixCls, "-rail"),
       onClick: this.foundation.handleWrapClick,
       style: railStyle
     }), this.renderTrack(), this.renderStepDot(), /*#__PURE__*/_react.default.createElement("div", null, this.renderHandle()), this.renderLabel(), /*#__PURE__*/_react.default.createElement("div", {
       className: boundaryClass
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixCls}-boundary-min`
+      className: "".concat(prefixCls, "-boundary-min")
     }, min), /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixCls}-boundary-max`
+      className: "".concat(prefixCls, "-boundary-max")
     }, max)));
 
     if (!vertical) {