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

package/lib/cjs/timeline/item.d.ts

@@ -12,8 +12,11 @@ export interface TimelineItemProps {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
+    mode?: 'left' | 'right' | 'center' | 'alternate';
+    oddIndex?: boolean;
 }
 export default class Item extends PureComponent<TimelineItemProps> {
+    static elementType: string;
     static propTypes: {
         color: PropTypes.Requireable<string>;
         time: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -24,11 +27,13 @@ export default class Item extends PureComponent<TimelineItemProps> {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        mode: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         type: string;
         time: string;
         onClick: (...args: any[]) => void;
     };
+    getC2DCls: () => string;
     render(): JSX.Element;
 }

package/lib/cjs/timeline/item.js

@@ -26,6 +26,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const prefixCls = _constants.cssClasses.ITEM;
 
 class Item extends _react.PureComponent {
+  constructor() {
+    super(...arguments); // getC2DCls is used in C2D, it does not work in non-C2D scenes
+
+    this.getC2DCls = () => {
+      const {
+        mode,
+        oddIndex
+      } = this.props;
+
+      if (mode) {
+        switch (mode) {
+          case 'center':
+            return "".concat(prefixCls, "-center  ").concat(prefixCls, "-left");
+
+          case 'alternate':
+            return "".concat(prefixCls, "-alternate  ").concat(prefixCls, "-").concat(oddIndex ? 'left' : 'right');
+
+          default:
+            return "".concat(prefixCls, "-").concat(mode, " ").concat(mode === 'right' ? "".concat(prefixCls, "-mode-right") : '');
+        }
+      }
+
+      return '';
+    };
+  }
+
   render() {
     const {
       className,
@@ -38,11 +64,11 @@ class Item extends _react.PureComponent {
       extra,
       onClick
     } = this.props;
-    const itemCls = (0, _classnames.default)(prefixCls, className);
+    const itemCls = (0, _classnames.default)(prefixCls, className, this.getC2DCls());
     const dotCls = (0, _classnames.default)({
-      [`${prefixCls}-head`]: true,
-      [`${prefixCls}-head-custom`]: dot,
-      [`${prefixCls}-head-${type}`]: type
+      ["".concat(prefixCls, "-head")]: true,
+      ["".concat(prefixCls, "-head-custom")]: dot,
+      ["".concat(prefixCls, "-head-").concat(type)]: type
     });
     const dotStyle = color ? {
       style: {
@@ -54,17 +80,17 @@ class Item extends _react.PureComponent {
       style: style,
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-tail`,
+      className: "".concat(prefixCls, "-tail"),
       "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: dotCls,
       "aria-hidden": true
     }, dotStyle), dot), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, children, extra && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content-extra`
+      className: "".concat(prefixCls, "-content-extra")
     }, extra), time && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content-time`
+      className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
 
@@ -80,10 +106,12 @@ Item.propTypes = {
   position: _propTypes.default.oneOf(_constants.strings.ITEM_POS),
   className: _propTypes.default.string,
   style: _propTypes.default.object,
-  onClick: _propTypes.default.func
+  onClick: _propTypes.default.func,
+  mode: _propTypes.default.string
 };
 Item.defaultProps = {
   type: 'default',
   time: '',
   onClick: _noop2.default
-};
+};
+Item.elementType = 'Timeline.Item';

package/lib/cjs/toast/index.js

@@ -76,7 +76,7 @@ const createBaseToast = () => {
         ['top', 'left', 'bottom', 'right'].map(pos => {
           if (pos in ToastList.defaultOpts || pos in opts) {
             const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
-            div.style[pos] = typeof val === 'number' ? `${val}px` : val;
+            div.style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
           }
         }); // document.body.appendChild(div);
 
@@ -95,10 +95,10 @@ const createBaseToast = () => {
           }));
         });
       } else {
-        const node = document.querySelector(`#${this.wrapperId}`);
+        const node = document.querySelector("#".concat(this.wrapperId));
         ['top', 'left', 'bottom', 'right'].map(pos => {
           if (pos in opts) {
-            node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
+            node.style[pos] = typeof opts[pos] === 'number' ? "".concat(opts[pos], "px") : opts[pos];
           }
         });
 
@@ -125,7 +125,7 @@ const createBaseToast = () => {
     static destroyAll() {
       if (ToastList.ref) {
         ToastList.ref.destroyAll();
-        const wrapper = document.querySelector(`#${this.wrapperId}`);
+        const wrapper = document.querySelector("#".concat(this.wrapperId));
 
         _reactDom.default.unmountComponentAtNode(wrapper);
 
@@ -260,7 +260,7 @@ const createBaseToast = () => {
           key: item.id,
           motion: item.motion,
           animationState: isRemoved ? "leave" : "enter",
-          startClassName: isRemoved ? `${_constants.cssClasses.PREFIX}-animation-hide` : `${_constants.cssClasses.PREFIX}-animation-show`
+          startClassName: isRemoved ? "".concat(_constants.cssClasses.PREFIX, "-animation-hide") : "".concat(_constants.cssClasses.PREFIX, "-animation-show")
         }, _ref2 => {
           let {
             animationClassName,

package/lib/cjs/toast/toast.js

@@ -88,12 +88,12 @@ class Toast extends _baseComponent.default {
     };
     const iconType = iconMap[type];
     const iconSize = 'large';
-    const iconCls = (0, _classnames.default)(`${prefixCls}-icon`, `${prefixCls}-icon-${type}`);
+    const iconCls = (0, _classnames.default)("".concat(prefixCls, "-icon"), "".concat(prefixCls, "-icon-").concat(type));
 
     if (icon) {
       return (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
         size: iconSize,
-        className: `${prefixCls}-icon`
+        className: "".concat(prefixCls, "-icon")
       }) : icon;
     }
 
@@ -119,9 +119,9 @@ class Toast extends _baseComponent.default {
     } = this.props;
     const direction = this.props.direction || this.context.direction;
     const toastCls = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-${theme}`]: theme === 'light',
-      [`${prefixCls}-rtl`]: direction === 'rtl'
+      ["".concat(prefixCls, "-").concat(type)]: true,
+      ["".concat(prefixCls, "-").concat(theme)]: theme === 'light',
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
     const textStyle = {};
     textStyle.maxWidth = textMaxWidth;
@@ -129,7 +129,7 @@ class Toast extends _baseComponent.default {
     const btnSize = 'small';
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "alert",
-      "aria-label": `${type ? type : 'default'} type`,
+      "aria-label": "".concat(type ? type : 'default', " type"),
       className: toastCls,
       style: style,
       onMouseEnter: this.clearCloseTimer,
@@ -137,13 +137,13 @@ class Toast extends _baseComponent.default {
       onAnimationStart: this.props.onAnimationStart,
       onAnimationEnd: this.props.onAnimationEnd
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixCls}-content-text`,
+      className: "".concat(prefixCls, "-content-text"),
       style: textStyle,
       "x-semi-prop": "content"
     }, content), showClose && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-close-button`
+      className: "".concat(prefixCls, "-close-button")
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
       onClick: e => this.close(e),
       type: "tertiary",

package/lib/cjs/tooltip/index.js

@@ -139,7 +139,7 @@ class Tooltip extends _baseComponent.default {
         style
       } = this.props;
       let icon = null;
-      const triangleCls = (0, _classnames.default)([`${prefixCls}-icon-arrow`]);
+      const triangleCls = (0, _classnames.default)(["".concat(prefixCls, "-icon-arrow")]);
       const bgColor = (0, _get2.default)(style, 'backgroundColor');
       const iconComponent = placement.includes('left') || placement.includes('right') ? /*#__PURE__*/_react.default.createElement(_TriangleArrowVertical.default, null) : /*#__PURE__*/_react.default.createElement(_TriangleArrow.default, null);
 
@@ -212,10 +212,10 @@ class Tooltip extends _baseComponent.default {
       } = this.props;
       const direction = this.context.direction;
       const className = (0, _classnames.default)(propClassName, {
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-show`]: visible,
-        [`${prefixCls}-with-arrow`]: Boolean(showArrow),
-        [`${prefixCls}-rtl`]: direction === 'rtl'
+        ["".concat(prefixCls, "-wrapper")]: true,
+        ["".concat(prefixCls, "-wrapper-show")]: visible,
+        ["".concat(prefixCls, "-with-arrow")]: Boolean(showArrow),
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
       });
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
@@ -227,7 +227,7 @@ class Tooltip extends _baseComponent.default {
         fillMode: "forwards",
         animationState: transitionState,
         motion: motion && isPositionUpdated,
-        startClassName: transitionState === 'enter' ? `${prefix}-animation-show` : `${prefix}-animation-hide`,
+        startClassName: transitionState === 'enter' ? "".concat(prefix, "-animation-show") : "".concat(prefix, "-animation-hide"),
         onAnimationEnd: () => {
           var _a, _b;
 
@@ -262,7 +262,7 @@ class Tooltip extends _baseComponent.default {
           zIndex
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${_constants.BASE_CLASS_PREFIX}-portal-inner`,
+        className: "".concat(_constants.BASE_CLASS_PREFIX, "-portal-inner"),
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,

package/lib/cjs/transfer/index.js

@@ -57,7 +57,7 @@ const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
     items
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${prefixCls}-right-list`,
+    className: "".concat(prefixCls, "-right-list"),
     role: "list",
     "aria-label": "Selected list"
   }, items.map((item, index) =>
@@ -209,7 +209,7 @@ class Transfer extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "search",
       "aria-label": "Transfer filter",
-      className: `${prefixCls}-filter`
+      className: "".concat(prefixCls, "-filter")
     }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
       prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
       placeholder: locale.placeholder,
@@ -234,9 +234,9 @@ class Transfer extends _baseComponent.default {
       showButton
     } = headerConfig;
     const headerCls = (0, _classnames.default)({
-      [`${prefixCls}-header`]: true,
-      [`${prefixCls}-right-header`]: type === 'right',
-      [`${prefixCls}-left-header`]: type === 'left'
+      ["".concat(prefixCls, "-header")]: true,
+      ["".concat(prefixCls, "-right-header")]: type === 'right',
+      ["".concat(prefixCls, "-left-header")]: type === 'left'
     });
 
     if (type === 'left' && typeof renderSourceHeader === 'function') {
@@ -270,13 +270,13 @@ class Transfer extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: headerCls
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixCls}-header-total`
+      className: "".concat(prefixCls, "-header-total")
     }, totalContent), showButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
       theme: "borderless",
       disabled: disabled,
       type: "tertiary",
       size: "small",
-      className: `${prefixCls}-header-all`,
+      className: "".concat(prefixCls, "-header-all"),
       onClick: onAllClick
     }, allContent) : null);
   }
@@ -299,8 +299,8 @@ class Transfer extends _baseComponent.default {
     }
 
     const leftItemCls = (0, _classnames.default)({
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-disabled`]: item.disabled
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-item-disabled")]: item.disabled
     });
     return /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
       key: index,
@@ -309,7 +309,7 @@ class Transfer extends _baseComponent.default {
       checked: checked,
       role: "listitem",
       onChange: () => this.onSelectOrRemove(item),
-      "x-semi-children-alias": `dataSource[${index}].label`
+      "x-semi-children-alias": "dataSource[".concat(index, "].label")
     }, item.label);
   }
 
@@ -336,7 +336,7 @@ class Transfer extends _baseComponent.default {
     // The selected option is 2,3,4, then it is false
 
     const leftContainesNotInSelected = Boolean(filterData.find(f => !selectedItems.has(f.key)));
-    const totalText = totalToken.replace('${total}', `${showNumber}`);
+    const totalText = totalToken.replace('${total}', "".concat(showNumber));
     const headerConfig = {
       totalContent: totalText,
       allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
@@ -409,15 +409,15 @@ class Transfer extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("section", {
-      className: `${prefixCls}-left`
+      className: "".concat(prefixCls, "-left")
     }, inputCom, content);
   }
 
   renderGroupTitle(group, index) {
-    const groupCls = (0, _classnames.default)(`${prefixCls}-group-title`);
+    const groupCls = (0, _classnames.default)("".concat(prefixCls, "-group-title"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: `title-${index}`
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -481,7 +481,7 @@ class Transfer extends _baseComponent.default {
       }
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-left-list`,
+      className: "".concat(prefixCls, "-left-list"),
       role: "list",
       "aria-label": "Option list"
     }, content);
@@ -498,9 +498,9 @@ class Transfer extends _baseComponent.default {
     const onRemove = () => this.foundation.handleSelectOrRemove(item);
 
     const rightItemCls = (0, _classnames.default)({
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-right-item`]: true,
-      [`${prefixCls}-right-item-draggable`]: draggable
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-right-item")]: true,
+      ["".concat(prefixCls, "-right-item-draggable")]: draggable
     });
     const shouldShowPath = type === _constants.strings.TYPE_TREE_TO_LIST && showPath === true;
     const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
@@ -515,7 +515,7 @@ class Transfer extends _baseComponent.default {
     const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
       role: "button",
       "aria-label": "Drag and sort",
-      className: `${prefixCls}-right-item-drag-handler`
+      className: "".concat(prefixCls, "-right-item-drag-handler")
     }));
     return (
       /*#__PURE__*/
@@ -525,12 +525,12 @@ class Transfer extends _baseComponent.default {
         className: rightItemCls,
         key: item.key
       }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixCls}-right-item-text`
+        className: "".concat(prefixCls, "-right-item-text")
       }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
         onClick: onRemove,
         "aria-disabled": item.disabled,
-        className: (0, _classnames.default)(`${prefixCls}-item-close-icon`, {
-          [`${prefixCls}-item-close-icon-disabled`]: item.disabled
+        className: (0, _classnames.default)("".concat(prefixCls, "-item-close-icon"), {
+          ["".concat(prefixCls, "-item-close-icon-disabled")]: item.disabled
         })
       }))
     );
@@ -538,9 +538,9 @@ class Transfer extends _baseComponent.default {
 
   renderEmpty(type, emptyText) {
     const emptyCls = (0, _classnames.default)({
-      [`${prefixCls}-empty`]: true,
-      [`${prefixCls}-right-empty`]: type === 'right',
-      [`${prefixCls}-left-empty`]: type === 'left'
+      ["".concat(prefixCls, "-empty")]: true,
+      ["".concat(prefixCls, "-right-empty")]: type === 'right',
+      ["".concat(prefixCls, "-left-empty")]: type === 'left'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       "aria-label": "empty",
@@ -556,7 +556,7 @@ class Transfer extends _baseComponent.default {
 
     const sortList = /*#__PURE__*/_react.default.createElement(SortableList, {
       useDragHandle: true,
-      helperClass: `${prefixCls}-right-item-drag-item-move`,
+      helperClass: "".concat(prefixCls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
       items: sortableListItems
     });
@@ -588,7 +588,7 @@ class Transfer extends _baseComponent.default {
     }
 
     const selectedToken = locale.selected;
-    const selectedText = selectedToken.replace('${total}', `${selectedData.length}`);
+    const selectedText = selectedToken.replace('${total}', "".concat(selectedData.length));
     const headerConfig = {
       totalContent: selectedText,
       allContent: locale.clear,
@@ -599,7 +599,7 @@ class Transfer extends _baseComponent.default {
     };
     const headerCom = this.renderHeader(headerConfig);
     const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
-    const panelCls = `${prefixCls}-right`;
+    const panelCls = "".concat(prefixCls, "-right");
     let content = null;
 
     switch (true) {
@@ -610,7 +610,7 @@ class Transfer extends _baseComponent.default {
 
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/_react.default.createElement("div", {
-          className: `${prefixCls}-right-list`,
+          className: "".concat(prefixCls, "-right-list"),
           role: "list",
           "aria-label": "Selected list"
         }, selectedData.map(item => this.renderRightItem(Object.assign({}, item))));
@@ -640,8 +640,8 @@ class Transfer extends _baseComponent.default {
       renderSourcePanel
     } = this.props;
     const transferCls = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-custom-panel`]: renderSelectedPanel && renderSourcePanel
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-custom-panel")]: renderSelectedPanel && renderSourcePanel
     });
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Transfer"

package/lib/cjs/tree/autoSizer.js

@@ -86,7 +86,7 @@ class AutoSizer extends _react.PureComponent {
         height: defaultHeight,
         overflow: 'visible'
       },
-      className: `${prefixcls}-auto-wrapper`
+      className: "".concat(prefixcls, "-auto-wrapper")
     }, !bailoutOnChildren && children({
       height,
       width: defaultWidth

package/lib/cjs/tree/index.js

@@ -560,7 +560,7 @@ class Tree extends _baseComponent.default {
       searchPlaceholder,
       showClear
     } = this.props;
-    const inputcls = (0, _classnames.default)(`${prefixcls}-input`);
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
     const {
       inputValue
     } = this.state;
@@ -572,7 +572,7 @@ class Tree extends _baseComponent.default {
       showClear,
       placeholder: searchPlaceholder
     };
-    const wrapperCls = (0, _classnames.default)(`${prefixcls}-search-wrapper`, searchClassName);
+    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-search-wrapper"), searchClassName);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls,
       style: searchStyle
@@ -651,7 +651,7 @@ class Tree extends _baseComponent.default {
         width: width,
         itemKey: this.itemKey,
         itemData: flattenNodes,
-        className: `${prefixcls}-virtual-list`,
+        className: "".concat(prefixcls, "-virtual-list"),
         style: {
           direction
         }
@@ -691,9 +691,9 @@ class Tree extends _baseComponent.default {
       virtualize,
       checkRelation
     } = this.props;
-    const wrapperCls = (0, _classnames.default)(`${prefixcls}-wrapper`, className);
-    const listCls = (0, _classnames.default)(`${prefixcls}-option-list`, {
-      [`${prefixcls}-option-list-block`]: blockNode
+    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-wrapper"), className);
+    const listCls = (0, _classnames.default)("".concat(prefixcls, "-option-list"), {
+      ["".concat(prefixcls, "-option-list-block")]: blockNode
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
     const noData = (0, _isEmpty2.default)(keyEntities) || showFilteredOnly && searchNoRes;

package/lib/cjs/tree/nodeList.js

@@ -111,7 +111,7 @@ class NodeList extends _react.PureComponent {
           open: motionType === 'hide',
           duration: 200,
           motion: Boolean(motionType),
-          key: `motion-${nodeKey}`,
+          key: "motion-".concat(nodeKey),
           onMotionEnd: this.onMotionEnd
         }, treeNode.map(node => renderTreeNode(node)));
       }

package/lib/cjs/tree/treeNode.js

@@ -277,7 +277,7 @@ class TreeNode extends _react.PureComponent {
           searchWords: [keyword],
           option: {
             highlightTag: 'span',
-            highlightClassName: `${prefixcls}-highlight`
+            highlightClassName: "".concat(prefixcls, "-highlight")
           }
         });
       } else {
@@ -305,22 +305,22 @@ class TreeNode extends _react.PureComponent {
 
     if (loading) {
       return /*#__PURE__*/_react.default.createElement(_spin.default, {
-        wrapperClassName: `${prefixcls}-spin-icon`
+        wrapperClassName: "".concat(prefixcls, "-spin-icon")
       });
     }
 
     if (showIcon) {
       return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
         role: 'button',
-        "aria-label": `${expanded ? 'Expand' : 'Collapse'} the tree item`,
-        className: `${prefixcls}-expand-icon`,
+        "aria-label": "".concat(expanded ? 'Expand' : 'Collapse', " the tree item"),
+        className: "".concat(prefixcls, "-expand-icon"),
         size: "small",
         onClick: this.onExpand
       });
     }
 
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixcls}-empty-icon`
+      className: "".concat(prefixcls, "-empty-icon")
     });
   }
 
@@ -363,14 +363,14 @@ class TreeNode extends _react.PureComponent {
       } else {
         if (!hasChild) {
           itemIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
-            className: `${prefixcls}-item-icon`
+            className: "".concat(prefixcls, "-item-icon")
           });
         } else {
           // eslint-disable-next-line max-len
           itemIcon = expanded ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolderOpen, {
-            className: `${prefixcls}-item-icon`
+            className: "".concat(prefixcls, "-item-icon")
           }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolder, {
-            className: `${prefixcls}-item-icon`
+            className: "".concat(prefixcls, "-item-icon")
           });
         }
       }
@@ -384,12 +384,12 @@ class TreeNode extends _react.PureComponent {
       emptyContent
     } = this.props;
     const wrapperCls = (0, _classnames.default)(prefixcls, {
-      [`${prefixcls}-empty`]: true
+      ["".concat(prefixcls, "-empty")]: true
     });
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: wrapperCls
     }, /*#__PURE__*/_react.default.createElement("li", {
-      className: `${prefixcls}-label ${prefixcls}-label-empty`,
+      className: "".concat(prefixcls, "-label ").concat(prefixcls, "-label-empty"),
       "x-semi-prop": "emptyContent"
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
@@ -432,20 +432,20 @@ class TreeNode extends _react.PureComponent {
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
     const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
     const nodeCls = (0, _classnames.default)(prefixcls, {
-      [`${prefixcls}-level-${level + 1}`]: true,
-      [`${prefixcls}-collapsed`]: !expanded,
-      [`${prefixcls}-disabled`]: Boolean(disabled),
-      [`${prefixcls}-selected`]: selected,
-      [`${prefixcls}-active`]: !multiple && active,
-      [`${prefixcls}-ellipsis`]: labelEllipsis,
-      [`${prefixcls}-filtered`]: filtered && treeNodeFilterProp !== 'label',
-      [`${prefixcls}-drag-over`]: !disabled && dragOver,
-      [`${prefixcls}-draggable`]: !disabled && draggable && !renderFullLabel,
+      ["".concat(prefixcls, "-level-").concat(level + 1)]: true,
+      ["".concat(prefixcls, "-collapsed")]: !expanded,
+      ["".concat(prefixcls, "-disabled")]: Boolean(disabled),
+      ["".concat(prefixcls, "-selected")]: selected,
+      ["".concat(prefixcls, "-active")]: !multiple && active,
+      ["".concat(prefixcls, "-ellipsis")]: labelEllipsis,
+      ["".concat(prefixcls, "-filtered")]: filtered && treeNodeFilterProp !== 'label',
+      ["".concat(prefixcls, "-drag-over")]: !disabled && dragOver,
+      ["".concat(prefixcls, "-draggable")]: !disabled && draggable && !renderFullLabel,
       // When draggable + renderFullLabel is enabled, the default style
-      [`${prefixcls}-fullLabel-draggable`]: !disabled && draggable && renderFullLabel,
+      ["".concat(prefixcls, "-fullLabel-draggable")]: !disabled && draggable && renderFullLabel,
       // When draggable + renderFullLabel is turned on, the style of dragover
-      [`${prefixcls}-fullLabel-drag-over-gap-top`]: !disabled && dragOverGapTop && renderFullLabel,
-      [`${prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel
+      ["".concat(prefixcls, "-fullLabel-drag-over-gap-top")]: !disabled && dragOverGapTop && renderFullLabel,
+      ["".concat(prefixcls, "-fullLabel-drag-over-gap-bottom")]: !disabled && dragOverGapBottom && renderFullLabel
     });
     const labelProps = {
       onClick: this.onClick,
@@ -499,9 +499,9 @@ class TreeNode extends _react.PureComponent {
       }
     }
 
-    const labelCls = (0, _classnames.default)(`${prefixcls}-label`, {
-      [`${prefixcls}-drag-over-gap-top`]: !disabled && dragOverGapTop,
-      [`${prefixcls}-drag-over-gap-bottom`]: !disabled && dragOverGapBottom
+    const labelCls = (0, _classnames.default)("".concat(prefixcls, "-label"), {
+      ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
+      ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
     });
     const setsize = (0, _get2.default)(rest, ['data', 'children', 'length']);
     const posinset = (0, _isString2.default)(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
@@ -525,7 +525,7 @@ class TreeNode extends _react.PureComponent {
     }, dragProps), this.renderArrow(), /*#__PURE__*/_react.default.createElement("span", {
       className: labelCls
     }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixcls}-label-text`
+      className: "".concat(prefixcls, "-label-text")
     }, this.renderRealLabel())));
   }