@douyinfe/semi-ui 2.28.0-alpha.0 → 2.28.0

package/lib/es/table/Body/ExpandedRow.js

@@ -89,14 +89,14 @@ export default class TableExpandedRow extends PureComponent {
       render: () => ({
         props,
         children: /*#__PURE__*/React.createElement("div", {
-          className: classnames("".concat(prefixCls, "-expand-inner")),
+          className: classnames(`${prefixCls}-expand-inner`),
           style: {
             width: anyColumnFixed ? amendTableWidth(tableWidth) : undefined
           }
         }, children)
       })
     }, column)];
-    const rowCls = classnames(className, "".concat(prefixCls, "-row-expand"));
+    const rowCls = classnames(className, `${prefixCls}-row-expand`);
     const baseRowCellWidths = getCellWidths(columns);
     return /*#__PURE__*/React.createElement(TableRow, {
       style: style,
@@ -104,7 +104,7 @@ export default class TableExpandedRow extends PureComponent {
       className: rowCls,
       expandedRow: true,
       renderExpandIcon: renderExpandIcon,
-      rowKey: "".concat(record.key, "-expanded-row"),
+      rowKey: `${record.key}-expanded-row`,
       columns: columns,
       store: store,
       virtualized: virtualized,

package/lib/es/table/Body/SectionRow.js

@@ -145,7 +145,7 @@ class SectionRow extends PureComponent {
         children
       })
     }, column)];
-    const rowCls = classnames(className, "".concat(prefixCls, "-row-section"), {
+    const rowCls = classnames(className, `${prefixCls}-row-section`, {
       on: expanded
     });
     const {

package/lib/es/table/Body/index.js

@@ -87,7 +87,7 @@ class Body extends BaseComponent {
       }
 
       if (realSize < defaultConfig.minHeight) {
-        logger.warn("The computed real `itemSize` cannot be less than ".concat(defaultConfig.minHeight));
+        logger.warn(`The computed real \`itemSize\` cannot be less than ${defaultConfig.minHeight}`);
       }
 
       return realSize;
@@ -201,7 +201,7 @@ class Body extends BaseComponent {
           }
         },
         // eslint-disable-next-line react/no-this-in-sfc,react/destructuring-assignment
-        className: classnames(props.className, "".concat(_this.props.prefixCls, "-tbody")),
+        className: classnames(props.className, `${_this.props.prefixCls}-tbody`),
         style: Object.assign({}, props.style),
         ref: ref
       }));
@@ -222,7 +222,7 @@ class Body extends BaseComponent {
       } = this.props; // eslint-disable-next-line react/no-this-in-sfc
 
       const tableWidth = this.getVirtualizedRowWidth();
-      const tableCls = classnames("".concat(prefixCls), "".concat(prefixCls, "-fixed"));
+      const tableCls = classnames(`${prefixCls}`, `${prefixCls}-fixed`);
       return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
         ref: ref,
         onWheel: function () {
@@ -291,7 +291,7 @@ class Body extends BaseComponent {
         overflowX: 'auto',
         overflowY: 'auto'
       };
-      const wrapCls = classnames("".concat(prefixCls, "-body"));
+      const wrapCls = classnames(`${prefixCls}-body`);
       return /*#__PURE__*/React.createElement(List, Object.assign({}, typeof virtualized === 'object' ? virtualized : {}, {
         initialScrollOffset: this.state.cache.virtualizedScrollTop,
         onScroll: this.handleVirtualizedScroll,
@@ -516,7 +516,7 @@ class Body extends BaseComponent {
         prefixCls: prefixCls
       }); // const tableBody = this.renderBody();
 
-      const wrapCls = "".concat(prefixCls, "-body");
+      const wrapCls = `${prefixCls}-body`;
       const baseTable = /*#__PURE__*/React.createElement("div", {
         key: "bodyTable",
         className: wrapCls,
@@ -532,21 +532,21 @@ class Body extends BaseComponent {
         "aria-colcount": columns && columns.length,
         style: tableStyle,
         className: classnames(prefixCls, {
-          ["".concat(prefixCls, "-fixed")]: anyColumnFixed
+          [`${prefixCls}-fixed`]: anyColumnFixed
         })
       }, colgroup, includeHeader && showHeader ? /*#__PURE__*/React.createElement(TableHeader, Object.assign({}, this.props, {
         ref: headerRef,
         components: components,
         columns: columns
       })) : null, /*#__PURE__*/React.createElement(BodyWrapper, {
-        className: "".concat(prefixCls, "-tbody"),
+        className: `${prefixCls}-tbody`,
         onScroll: onScroll
       }, _isMap(groups) ? this.renderGroupedRows() : this.renderBodyRows(dataSource))), emptySlot);
 
       if (fixed && columns.length) {
         return /*#__PURE__*/React.createElement("div", {
           key: "bodyTable",
-          className: "".concat(prefixCls, "-body-outer")
+          className: `${prefixCls}-body-outer`
         }, baseTable);
       }
 

package/lib/es/table/ColGroup.js

@@ -30,12 +30,12 @@ export default class ColGroup extends React.PureComponent {
       }
 
       return /*#__PURE__*/React.createElement(Col, {
-        className: classnames("".concat(prefixCls, "-col"), column.className),
+        className: classnames(`${prefixCls}-col`, column.className),
         key: column.key || column.dataIndex || idx,
         style: colStyle
       });
     });
-    const groupCls = classnames("".concat(prefixCls, "-colgroup"), className);
+    const groupCls = classnames(`${prefixCls}-colgroup`, className);
     return /*#__PURE__*/React.createElement(ColGroup, {
       className: groupCls,
       style: style

package/lib/es/table/ColumnFilter.js

@@ -69,7 +69,7 @@ function renderDropdown() {
       const {
         value
       } = filter;
-      const key = "".concat(level, "_").concat(index);
+      const key = `${level}_${index}`;
       const dropdownItem = typeof renderFilterDropdownItem === 'function' ? renderFilterDropdownItem({
         onChange: changeFn,
         filterMultiple,
@@ -109,7 +109,7 @@ function renderDropdown() {
   }
 
   return /*#__PURE__*/React.createElement(Dropdown, Object.assign({}, dropdownProps, {
-    key: "Dropdown_level_".concat(level)
+    key: `Dropdown_level_${level}`
   }), nestedElem);
 }
 
@@ -125,7 +125,7 @@ export default function ColumnFilter() {
   let {
     filterDropdown = null
   } = props;
-  const finalCls = cls("".concat(prefixCls, "-column-filter"), {
+  const finalCls = cls(`${prefixCls}-column-filter`, {
     on: Array.isArray(filteredValue) && filteredValue.length
   });
   let iconElem;

package/lib/es/table/ColumnSelection.js

@@ -52,8 +52,8 @@ export default class TableSelectionCell extends BaseComponent {
       checkboxProps = Object.assign(Object.assign({}, checkboxProps), getCheckboxProps());
     }
 
-    const wrapCls = classnames("".concat(prefixCls, "-selection-wrap"), {
-      ["".concat(prefixCls, "-selection-disabled")]: disabled
+    const wrapCls = classnames(`${prefixCls}-selection-wrap`, {
+      [`${prefixCls}-selection-disabled`]: disabled
     }, className);
     return /*#__PURE__*/React.createElement("span", {
       className: wrapCls

package/lib/es/table/ColumnSorter.js

@@ -15,10 +15,10 @@ export default class ColumnSorter extends PureComponent {
       title
     } = this.props;
     const iconBtnSize = 'default';
-    const upCls = cls("".concat(prefixCls, "-column-sorter-up"), {
+    const upCls = cls(`${prefixCls}-column-sorter-up`, {
       on: sortOrder === strings.SORT_DIRECTIONS[0]
     });
-    const downCls = cls("".concat(prefixCls, "-column-sorter-down"), {
+    const downCls = cls(`${prefixCls}-column-sorter-down`, {
       on: sortOrder === strings.SORT_DIRECTIONS[1]
     });
     const ariaProps = {
@@ -26,25 +26,25 @@ export default class ColumnSorter extends PureComponent {
        * Set 'aria-sort' to aria-columnheader is difficult, so set 'aria-label' about sort info to sorter
        * reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
        */
-      'aria-label': "Current sort order is ".concat(sortOrder ? "".concat(sortOrder, "ing") : 'none'),
+      'aria-label': `Current sort order is ${sortOrder ? `${sortOrder}ing` : 'none'}`,
       'aria-roledescription': 'Sort data with this column'
     };
     return /*#__PURE__*/React.createElement("div", Object.assign({
       role: 'button'
     }, ariaProps, {
       tabIndex: -1,
-      className: "".concat(prefixCls, "-column-sorter-wrapper"),
+      className: `${prefixCls}-column-sorter-wrapper`,
       onClick: onClick,
       onKeyPress: e => isEnterPress(e) && onClick(e)
     }), title, /*#__PURE__*/React.createElement("div", {
       style: style,
-      className: "".concat(prefixCls, "-column-sorter")
+      className: `${prefixCls}-column-sorter`
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(upCls)
+      className: `${upCls}`
     }, /*#__PURE__*/React.createElement(IconCaretup, {
       size: iconBtnSize
     })), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(downCls)
+      className: `${downCls}`
     }, /*#__PURE__*/React.createElement(IconCaretdown, {
       size: iconBtnSize
     }))));

package/lib/es/table/CustomExpandIcon.js

@@ -48,7 +48,7 @@ export default function CustomExpandIcon(props) {
     const originIcon = icon;
     icon = /*#__PURE__*/React.createElement(CSSAnimation, {
       animationState: expanded ? "enter" : "leave",
-      startClassName: "".concat(cssClasses.PREFIX, "-expandedIcon-").concat(expanded ? 'show' : "hide")
+      startClassName: `${cssClasses.PREFIX}-expandedIcon-${expanded ? 'show' : "hide"}`
     }, _ref => {
       let {
         animationClassName
@@ -66,7 +66,7 @@ export default function CustomExpandIcon(props) {
     onClick: handleClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: "".concat(prefixCls, "-expand-icon"),
+    className: `${prefixCls}-expand-icon`,
     onKeyPress: e => isEnterPress(e) && handleClick(e)
   }, icon);
 }

package/lib/es/table/HeadTable.js

@@ -63,8 +63,8 @@ class HeadTable extends React.PureComponent {
       components: components,
       onDidUpdate: onDidUpdate
     }));
-    const headTableCls = classnames("".concat(prefixCls, "-header"), {
-      ["".concat(prefixCls, "-header-sticky")]: sticky
+    const headTableCls = classnames(`${prefixCls}-header`, {
+      [`${prefixCls}-header-sticky`]: sticky
     });
 
     const stickyTop = _get(sticky, 'top', 0);
@@ -82,7 +82,7 @@ class HeadTable extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Table, {
       style: tableStyle,
       className: classnames(prefixCls, {
-        ["".concat(prefixCls, "-fixed")]: anyColumnFixed
+        [`${prefixCls}-fixed`]: anyColumnFixed
       })
     }, colgroup, tableHeader));
   }

package/lib/es/table/Table.js

@@ -248,17 +248,17 @@ class Table extends BaseComponent {
       const {
         prefixCls
       } = this.props;
-      const positionAll = ["".concat(prefixCls, "-scroll-position-both"), "".concat(prefixCls, "-scroll-position-middle"), "".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+      const positionAll = [`${prefixCls}-scroll-position-both`, `${prefixCls}-scroll-position-middle`, `${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
       this.scrollPosition = position;
       const tableNode = this.wrapRef.current;
 
       if (tableNode && tableNode.nodeType) {
         if (position === 'both') {
-          const acceptPosition = ["".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+          const acceptPosition = [`${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
           tableNode.classList.remove(..._difference(positionAll, acceptPosition));
           tableNode.classList.add(...acceptPosition);
         } else {
-          const acceptPosition = ["".concat(prefixCls, "-scroll-position-").concat(position)];
+          const acceptPosition = [`${prefixCls}-scroll-position-${position}`];
           tableNode.classList.remove(..._difference(positionAll, acceptPosition));
           tableNode.classList.add(...acceptPosition);
         }
@@ -319,7 +319,7 @@ class Table extends BaseComponent {
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
-            "aria-label": "".concat(allIsSelected ? 'Deselect' : 'Select', " all rows"),
+            "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
@@ -336,7 +336,7 @@ class Table extends BaseComponent {
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
-            "aria-label": "".concat(selected ? 'Deselect' : 'Select', " this row"),
+            "aria-label": `${selected ? 'Deselect' : 'Select'} this row`,
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this.toggleSelectRow(status, key, e)
@@ -372,7 +372,7 @@ class Table extends BaseComponent {
           column = Object.assign(Object.assign({}, column), _omit(rowSelection, needOmitSelectionKey));
         }
 
-        column.className = classnames(column.className, "".concat(prefixCls, "-column-selection"));
+        column.className = classnames(column.className, `${prefixCls}-column-selection`);
         column.title = _this.renderTitleSelectionCallback;
         column.render = _this.renderRowSelectionCallback;
       }
@@ -438,7 +438,7 @@ class Table extends BaseComponent {
         fixed: expandCellFixed,
         key: strings.DEFAULT_KEY_COLUMN_EXPAND
       };
-      column.className = classnames(column.className, "".concat(prefixCls, "-column-expand"));
+      column.className = classnames(column.className, `${prefixCls}-column-expand`);
       column.render = expandIcon !== false ? function () {
         let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
         let record = arguments.length > 1 ? arguments[1] : undefined;
@@ -572,7 +572,7 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, title) : null;
     };
@@ -584,7 +584,7 @@ class Table extends BaseComponent {
         empty,
         dataSource
       } = props;
-      const wrapCls = "".concat(prefixCls, "-placeholder");
+      const wrapCls = `${prefixCls}-placeholder`;
 
       const isEmpty = _this.foundation.isEmpty(dataSource);
 
@@ -598,7 +598,7 @@ class Table extends BaseComponent {
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
         className: wrapCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-empty"),
+        className: `${prefixCls}-empty`,
         "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
@@ -618,7 +618,7 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-footer"),
+        className: `${prefixCls}-footer`,
         key: "footer",
         "x-semi-prop": "footer"
       }, footer) : null;
@@ -1432,13 +1432,13 @@ class Table extends BaseComponent {
     }
 
     const wrapCls = classnames({
-      ["".concat(prefixCls, "-").concat(strings.SIZE_SMALL)]: size === strings.SIZE_SMALL,
-      ["".concat(prefixCls, "-").concat(strings.SIZE_MIDDLE)]: size === strings.SIZE_MIDDLE,
-      ["".concat(prefixCls, "-virtualized")]: Boolean(virtualized),
-      ["".concat(prefixCls, "-bordered")]: bordered,
-      ["".concat(prefixCls, "-fixed-header")]: Boolean(y),
-      ["".concat(prefixCls, "-scroll-position-left")]: ['both', 'left'].includes(this.position),
-      ["".concat(prefixCls, "-scroll-position-right")]: ['both', 'right'].includes(this.position)
+      [`${prefixCls}-${strings.SIZE_SMALL}`]: size === strings.SIZE_SMALL,
+      [`${prefixCls}-${strings.SIZE_MIDDLE}`]: size === strings.SIZE_MIDDLE,
+      [`${prefixCls}-virtualized`]: Boolean(virtualized),
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-fixed-header`]: Boolean(y),
+      [`${prefixCls}-scroll-position-left`]: ['both', 'left'].includes(this.position),
+      [`${prefixCls}-scroll-position-right`]: ['both', 'right'].includes(this.position)
     }); // pagination
 
     const tablePagination = pagination && propPagination ? this.renderPagination(pagination, propRenderPagination) : null;
@@ -1461,7 +1461,7 @@ class Table extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
-      className: classnames(className, "".concat(prefixCls, "-wrapper")),
+      className: classnames(className, `${prefixCls}-wrapper`),
       "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
@@ -1478,7 +1478,7 @@ class Table extends BaseComponent {
       dataSource: props.dataSource,
       prefixCls: props.prefixCls
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-container")
+      className: `${prefixCls}-container`
     }, this.renderMainTable(Object.assign({}, props))), /*#__PURE__*/React.createElement(React.Fragment, {
       key: 'pagination-bottom'
     }, ['bottom', 'both'].includes(paginationPosition) ? tablePagination : null)))));

package/lib/es/table/TableCell.js

@@ -191,9 +191,9 @@ export default class TableCell extends BaseComponent {
 
     const indentText = indent && indentSize ? /*#__PURE__*/React.createElement("span", {
       style: {
-        paddingLeft: "".concat(indentSize * indent, "px")
+        paddingLeft: `${indentSize * indent}px`
       },
-      className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
+      className: `${prefixCls}-row-indent indent-level-${indent}`
     }) : null; // column.render
 
     const realExpandIcon = typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon;
@@ -265,7 +265,7 @@ export default class TableCell extends BaseComponent {
 
     if (isSection) {
       inner = /*#__PURE__*/React.createElement("div", {
-        className: classnames("".concat(prefixCls, "-section-inner")),
+        className: classnames(`${prefixCls}-section-inner`),
         style: {
           width: anyColumnFixed ? amendTableWidth(tableWidth) : undefined
         }
@@ -316,11 +316,11 @@ export default class TableCell extends BaseComponent {
     }
 
     const inner = this.renderInner(text, indentText, realExpandIcon);
-    const columnCls = classnames(className, "".concat(prefixCls, "-row-cell"), _get(customCellProps, 'className'), {
-      ["".concat(prefixCls, "-cell-fixed-left")]: fixedLeftFlag,
-      ["".concat(prefixCls, "-cell-fixed-left-last")]: lastFixedLeft,
-      ["".concat(prefixCls, "-cell-fixed-right")]: fixedRightFlag,
-      ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
+    const columnCls = classnames(className, `${prefixCls}-row-cell`, _get(customCellProps, 'className'), {
+      [`${prefixCls}-cell-fixed-left`]: fixedLeftFlag,
+      [`${prefixCls}-cell-fixed-left-last`]: lastFixedLeft,
+      [`${prefixCls}-cell-fixed-right`]: fixedRightFlag,
+      [`${prefixCls}-cell-fixed-right-first`]: firstFixedRight
     });
     return /*#__PURE__*/React.createElement(BodyCell, Object.assign({
       role: "gridcell",

package/lib/es/table/TableHeader.js

@@ -113,7 +113,7 @@ class TableHeader extends BaseComponent {
     const rows = parseHeaderRows(columns);
     const HeaderWrapper = components.header.wrapper;
     return /*#__PURE__*/React.createElement(HeaderWrapper, {
-      className: "".concat(prefixCls, "-thead"),
+      className: `${prefixCls}-thead`,
       ref: forwardedRef
     }, rows.map((row, idx) => /*#__PURE__*/React.createElement(TableHeaderRow, {
       prefixCls: prefixCls,

package/lib/es/table/TableHeaderRow.js

@@ -38,7 +38,7 @@ export default class TableHeaderRow extends BaseComponent {
           row,
           index
         } = this.props;
-        const cellSelector = ".".concat(prefixCls, "-row-head");
+        const cellSelector = `.${prefixCls}-row-head`;
         const heads = node && node.querySelectorAll && node.querySelectorAll(cellSelector);
         this.context.setHeadWidths(_map(heads, (head, headIndex) => {
           let configWidth = _get(row, [headIndex, 'column', 'width']);
@@ -92,7 +92,7 @@ export default class TableHeaderRow extends BaseComponent {
 
     const rowProps = onHeaderRow(columns, index) || {};
 
-    _set(rowProps, 'className', classnames(_get(rowProps, 'className'), "".concat(prefixCls, "-row")));
+    _set(rowProps, 'className', classnames(_get(rowProps, 'className'), `${prefixCls}-row`));
 
     const cells = _map(row, (cell, cellIndex) => {
       const {
@@ -108,16 +108,16 @@ export default class TableHeaderRow extends BaseComponent {
           textAlign: column.align
         });
         customProps.className = classnames(customProps.className, column.className, {
-          ["".concat(prefixCls, "-align-").concat(column.align)]: Boolean(column.align)
+          [`${prefixCls}-align-${column.align}`]: Boolean(column.align)
         });
       }
 
-      customProps.className = classnames("".concat(prefixCls, "-row-head"), column.className, customProps.className, // `${prefixCls}-fixed-columns`,
+      customProps.className = classnames(`${prefixCls}-row-head`, column.className, customProps.className, // `${prefixCls}-fixed-columns`,
       {
-        ["".concat(prefixCls, "-cell-fixed-left")]: isFixedLeft(column),
-        ["".concat(prefixCls, "-cell-fixed-left-last")]: isLastLeftFixed(slicedColumns, column),
-        ["".concat(prefixCls, "-cell-fixed-right")]: isFixedRight(column),
-        ["".concat(prefixCls, "-cell-fixed-right-first")]: isFirstFixedRight(slicedColumns, column)
+        [`${prefixCls}-cell-fixed-left`]: isFixedLeft(column),
+        [`${prefixCls}-cell-fixed-left-last`]: isLastLeftFixed(slicedColumns, column),
+        [`${prefixCls}-cell-fixed-right`]: isFixedRight(column),
+        [`${prefixCls}-cell-fixed-right-first`]: isFirstFixedRight(slicedColumns, column)
       });
 
       if (headWidths.length && slicedColumns.length) {

package/lib/es/table/TablePagination.js

@@ -19,11 +19,11 @@ export default class TablePagination extends PureComponent {
 
     const customPagination = renderPagination && _isFunction(renderPagination) ? renderPagination(pagination) : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-pagination-outer")
+      className: `${prefixCls}-pagination-outer`
     }, /*#__PURE__*/isValidElement(customPagination) ? customPagination : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-pagination-info")
+      className: `${prefixCls}-pagination-info`
     }, info), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-pagination-wrapper")
+      className: `${prefixCls}-pagination-wrapper`
     }, total > 0 ? /*#__PURE__*/React.createElement(Pagination, Object.assign({}, pagination, {
       key: _get(pagination, 'pageSize', 'pagination')
     })) : null)));

package/lib/es/tabs/TabBar.js

@@ -1,3 +1,4 @@
+import _pick from "lodash/pick";
 import _isEmpty from "lodash/isEmpty";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -19,8 +20,9 @@ import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import OverflowList from '../overflowList';
 import Dropdown from '../dropdown';
 import Button from '../button';
-import { IconChevronRight, IconChevronLeft, IconClose } from '@douyinfe/semi-icons';
+import { IconChevronRight, IconChevronLeft } from '@douyinfe/semi-icons';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+import TabItem from './TabItem';
 
 class TabBar extends React.Component {
   constructor(props) {
@@ -33,7 +35,7 @@ class TabBar extends React.Component {
         const key = this._getItemKey(itemKey); // eslint-disable-next-line max-len
 
 
-        const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
         tabItem.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest',
@@ -50,45 +52,23 @@ class TabBar extends React.Component {
       const {
         size,
         type,
-        deleteTabItem
+        deleteTabItem,
+        handleKeyDown,
+        tabPosition
       } = this.props;
-      const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
-      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
-        "aria-label": "Close",
-        role: "button",
-        className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
-        onClick: e => deleteTabItem(panel.itemKey, e)
-      }) : null;
-      let events = {};
-      const key = panel.itemKey;
-
-      if (!panel.disabled) {
-        events = {
-          onClick: e => this.handleItemClick(key, e)
-        };
-      }
-
-      const isSelected = this._isActive(key);
 
-      const className = cls(cssClasses.TABS_TAB, {
-        [cssClasses.TABS_TAB_ACTIVE]: isSelected,
-        [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-        ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
-        ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
-      });
-      return /*#__PURE__*/React.createElement("div", Object.assign({
-        role: "tab",
-        id: "semiTab".concat(key),
-        "data-tabkey": "semiTab".concat(key),
-        "aria-controls": "semiTabPanel".concat(key),
-        "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": isSelected ? 'true' : 'false',
-        tabIndex: isSelected ? 0 : -1,
-        onKeyDown: e => this.handleKeyDown(e, key, panel.closable)
-      }, events, {
-        className: className,
-        key: this._getItemKey(key)
-      }), panelIcon, panel.tab, closableIcon);
+      const isSelected = this._isActive(panel.itemKey);
+
+      return /*#__PURE__*/React.createElement(TabItem, Object.assign({}, _pick(panel, ['disabled', 'icon', 'itemKey', 'tab', 'closable']), {
+        key: this._getItemKey(panel.itemKey),
+        selected: isSelected,
+        size: size,
+        type: type,
+        tabPosition: tabPosition,
+        handleKeyDown: handleKeyDown,
+        deleteTabItem: deleteTabItem,
+        onClick: this.handleItemClick
+      }));
     };
 
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
@@ -103,7 +83,7 @@ class TabBar extends React.Component {
       const key = this._getItemKey(lastItem.itemKey); // eslint-disable-next-line max-len
 
 
-      const tabItem = document.querySelector("[data-uuid=\"".concat(this.state.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
@@ -142,17 +122,17 @@ class TabBar extends React.Component {
         }, panelIcon, tab);
       }));
       const arrowCls = cls({
-        ["".concat(cssClasses.TABS_BAR, "-arrow-").concat(pos)]: pos,
-        ["".concat(cssClasses.TABS_BAR, "-arrow")]: true
+        [`${cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
+        [`${cssClasses.TABS_BAR}-arrow`]: true
       });
       const dropdownCls = cls(dropdownClassName, {
-        ["".concat(cssClasses.TABS_BAR, "-dropdown")]: true
+        [`${cssClasses.TABS_BAR}-dropdown`]: true
       });
       return /*#__PURE__*/React.createElement(Dropdown, {
         className: dropdownCls,
         clickToHide: true,
         clickTriggerToHide: true,
-        key: "".concat(rePosKey, "-").concat(pos),
+        key: `${rePosKey}-${pos}`,
         position: pos === 'start' ? 'bottomLeft' : 'bottomRight',
         render: disabled ? null : menu,
         showTick: true,
@@ -195,14 +175,14 @@ class TabBar extends React.Component {
         items: renderedList,
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
-        className: "".concat(cssClasses.TABS_BAR, "-overflow-list"),
+        className: `${cssClasses.TABS_BAR}-overflow-list`,
         visibleItemRenderer: this.renderTabItem
       });
     };
 
     this._isActive = key => key === this.props.activeKey;
 
-    this._getItemKey = key => "".concat(key, "-bar");
+    this._getItemKey = key => `${key}-bar`;
 
     this.state = {
       endInd: props.list.length,
@@ -233,8 +213,8 @@ class TabBar extends React.Component {
     };
     const tabBarExtraContentStyle = tabBarExtraContent && tabBarExtraContent.props ? tabBarExtraContent.props.style : {};
     const extraCls = cls(cssClasses.TABS_BAR_EXTRA, {
-      ["".concat(cssClasses.TABS_BAR, "-").concat(type, "-extra")]: type,
-      ["".concat(cssClasses.TABS_BAR, "-").concat(type, "-extra-").concat(size)]: size
+      [`${cssClasses.TABS_BAR}-${type}-extra`]: type,
+      [`${cssClasses.TABS_BAR}-${type}-extra-${size}`]: size
     });
 
     if (tabBarExtraContent) {
@@ -266,8 +246,8 @@ class TabBar extends React.Component {
       [cssClasses.TABS_BAR_LINE]: type === 'line',
       [cssClasses.TABS_BAR_CARD]: type === 'card',
       [cssClasses.TABS_BAR_BUTTON]: type === 'button',
-      ["".concat(cssClasses.TABS_BAR, "-").concat(tabPosition)]: tabPosition,
-      ["".concat(cssClasses.TABS_BAR, "-collapse")]: collapsible
+      [`${cssClasses.TABS_BAR}-${tabPosition}`]: tabPosition,
+      [`${cssClasses.TABS_BAR}-collapse`]: collapsible
     });
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);