@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/table/utils.js

@@ -4,84 +4,40 @@ import _includes from "lodash/includes";
 import _some from "lodash/some";
 import _findIndex from "lodash/findIndex";
 import _each from "lodash/each";
-import _clone from "lodash/clone";
-import _map from "lodash/map";
 import _find from "lodash/find";
 import _filter from "lodash/filter";
 import _get from "lodash/get";
 import _isEqualWith from "lodash/isEqualWith";
-import _cloneDeepWith from "lodash/cloneDeepWith";
 import { strings, numbers } from './constants';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import Logger from '../utils/Logger';
-export function cloneDeep(value, customizer) {
-  return _cloneDeepWith(value, v => {
-    if (typeof v === 'function') {
-      return v;
-    } else if (typeof customizer === 'function') {
-      return customizer(v);
-    }
-
-    return undefined;
-  });
-}
 export function equalWith(value, other, customizer) {
   return _isEqualWith(value, other, function (objVal, othVal) {
     if (typeof objVal === 'function' && typeof othVal === 'function') {
       return _toString(objVal) === _toString(othVal);
     }
-
     if (typeof customizer === 'function') {
       for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
         rest[_key - 2] = arguments[_key];
       }
-
       return customizer(objVal, othVal, ...rest);
-    } // If customizer returns undefined, comparisons are handled by isEqual instead
-
-
+    }
+    // If customizer returns undefined, comparisons are handled by isEqual instead
     return undefined;
   });
 }
 export function getColumnKey(column, keyPropNames) {
   keyPropNames = Array.isArray(keyPropNames) ? keyPropNames : ['key', 'dataIndex'];
   let key = null;
-
   _each(keyPropNames, propName => {
     key = _get(column, propName);
-
     if (key != null) {
       return false;
     }
-
     return undefined;
   });
-
   return key;
 }
-export function mergeColumns() {
-  let oldColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let newColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  let keyPropNames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let deep = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  const finalColumns = [];
-  const clone = deep ? cloneDeep : _clone;
-
-  _map(newColumns, newColumn => {
-    newColumn = Object.assign({}, newColumn);
-    const key = getColumnKey(newColumn, keyPropNames);
-
-    const oldColumn = key != null && _find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
-
-    if (oldColumn) {
-      finalColumns.push(clone(Object.assign(Object.assign({}, oldColumn), newColumn)));
-    } else {
-      finalColumns.push(clone(newColumn));
-    }
-  });
-
-  return finalColumns;
-}
 /**
  *
  * @param {Array<number>} arr
@@ -89,7 +45,6 @@ export function mergeColumns() {
  * @param {number} [endIndex] end index, not included
  * @returns {number}
  */
-
 export function arrayAdd() {
   let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let beginIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -97,40 +52,30 @@ export function arrayAdd() {
   beginIndex = beginIndex < 0 || typeof beginIndex !== 'number' ? 0 : beginIndex;
   endIndex = endIndex > arr.length || typeof endIndex !== 'number' ? arr.length : endIndex;
   let result = 0;
-
   _each(arr, (value, index) => {
     if (index >= beginIndex && index < endIndex) {
       result += typeof value === 'number' && !isNaN(value) ? value : 0;
     }
   });
-
   return result;
 }
 export function isLastLeftFixed(columns, column) {
   let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
-
   const leftFixedColumns = _filter(columns, col => col.fixed === true || col.fixed === 'left');
-
   const index = _findIndex(leftFixedColumns, col => checkKeys.every(key => col[key] != null && col[key] === column[key]));
-
   return leftFixedColumns.length > 0 && index === leftFixedColumns.length - 1;
 }
 export function isFirstFixedRight(columns, column) {
   let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
-
   const rightFixedColumns = _filter(columns, col => col.fixed === 'right');
-
   const index = _findIndex(rightFixedColumns, col => checkKeys.every(key => col[key] != null && col[key] === column[key]));
-
   return rightFixedColumns.length > 0 && index === 0;
 }
 export function isAnyFixed(columns) {
   let fixedSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['left', true, 'right'];
-
   if (typeof fixedSet === 'string' || typeof fixedSet === 'boolean') {
     fixedSet = [fixedSet];
   }
-
   return fixedSet.length > 0 && _some(columns, col => fixedSet.includes(col.fixed));
 }
 export function isAnyFixedRight(columns) {
@@ -166,14 +111,11 @@ export function filterColumns(columns) {
  * @param {Array} columns
  * @returns {Number|undefined}
  */
-
 export function getScrollbarColumnWidth() {
   let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const len = columns.length;
-
   if (len) {
     const lastColumn = columns[len - 1];
-
     if (_get(lastColumn, 'key') === strings.DEFAULT_KEY_COLUMN_SCROLLBAR) {
       return _get(lastColumn, 'width', 0);
     }
@@ -183,7 +125,6 @@ export function getRecordKey(record, rowKey) {
   if (rowKey === undefined) {
     rowKey = 'key';
   }
-
   return typeof rowKey === 'function' ? rowKey(record) : _get(record, rowKey);
 }
 /**
@@ -191,7 +132,6 @@ export function getRecordKey(record, rowKey) {
  * @param {*} expandedRowKeys
  * @param {*} key
  */
-
 export function isExpanded(expandedRowKeys, key) {
   return key != null && _includes(expandedRowKeys, key);
 }
@@ -200,7 +140,6 @@ export function isExpanded(expandedRowKeys, key) {
  * @param {Set} selectedRowKeysSet
  * @param {String} key
  */
-
 export function isSelected(selectedRowKeysSet, key) {
   return key !== null && selectedRowKeysSet.has(key);
 }
@@ -209,7 +148,6 @@ export function isSelected(selectedRowKeysSet, key) {
  * @param {Set} disabledRowKeysSet
  * @param {String} key
  */
-
 export function isDisabled(disabledRowKeysSet, key) {
   return key !== null && disabledRowKeysSet.has(key);
 }
@@ -217,31 +155,26 @@ export function getRecord(data, recordKey, rowKey) {
   if (rowKey === undefined) {
     rowKey = 'key';
   }
-
   return _find(data, record => recordKey != null && recordKey !== '' && getRecordKey(record, rowKey) === recordKey);
 }
 export function getRecordChildren(record, childrenRecordName) {
   if (childrenRecordName === undefined) {
     childrenRecordName = 'children';
   }
-
   return _get(record, childrenRecordName);
 }
 export function genExpandedRowKey() {
   let recordKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let suffix = arguments.length > 1 ? arguments[1] : undefined;
-
   if (suffix === undefined) {
     suffix = '__expanded_row';
   }
-
   return recordKey + suffix;
 }
 export function getDefaultVirtualizedRowConfig() {
   let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let sectionRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const config = {};
-
   if (size === 'small') {
     config.height = sectionRow ? numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT : numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT;
     config.minHeight = numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT;
@@ -252,13 +185,11 @@ export function getDefaultVirtualizedRowConfig() {
     config.height = sectionRow ? numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_HEIGHT : numbers.DEFAULT_VIRTUALIZED_ROW_HEIGHT;
     config.minHeight = numbers.DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT;
   }
-
   return config;
 }
 export function flattenColumns(cols) {
   let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
   const list = [];
-
   if (Array.isArray(cols) && cols.length) {
     for (const col of cols) {
       if (Array.isArray(col[childrenColumnName]) && col[childrenColumnName].length) {
@@ -269,31 +200,25 @@ export function flattenColumns(cols) {
       }
     }
   }
-
   return list;
 }
 export function assignColumnKeys(columns) {
   let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
   let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   const sameLevelCols = [];
-
   _each(columns, (column, index) => {
     if (column.key == null) {
       // if user give column a dataIndex, use it for backup
       const _index = column.dataIndex || index;
-
-      column.key = "".concat(level, "-").concat(_index);
+      column.key = `${level}-${_index}`;
     }
-
     if (Array.isArray(column[childrenColumnName]) && column[childrenColumnName].length) {
       sameLevelCols.push(...column[childrenColumnName]);
     }
   });
-
   if (sameLevelCols.length) {
     assignColumnKeys(sameLevelCols, childrenColumnName, level + 1);
   }
-
   return columns;
 }
 export function sliceColumnsByLevel(columns) {
@@ -301,11 +226,9 @@ export function sliceColumnsByLevel(columns) {
   let childrenColumnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
   let currentLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   const slicedColumns = [];
-
   if (Array.isArray(columns) && columns.length && currentLevel <= targetLevel) {
     columns.forEach(column => {
       const children = column[childrenColumnName];
-
       if (Array.isArray(children) && children.length && currentLevel < targetLevel) {
         slicedColumns.push(...sliceColumnsByLevel(children, targetLevel, childrenColumnName, currentLevel + 1));
       } else {
@@ -313,7 +236,6 @@ export function sliceColumnsByLevel(columns) {
       }
     });
   }
-
   return slicedColumns;
 }
 export function getColumnsByLevel(columns) {
@@ -321,7 +243,6 @@ export function getColumnsByLevel(columns) {
   let targetColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   let currentLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   let childrenColumnName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'children';
-
   if (Array.isArray(columns) && columns.length) {
     if (targetLevel === currentLevel) {
       targetColumns.push(...columns);
@@ -331,29 +252,24 @@ export function getColumnsByLevel(columns) {
       });
     }
   }
-
   return targetColumns;
 }
 export function getAllLevelColumns(columns) {
   let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
   const all = [];
-
   if (Array.isArray(columns) && columns.length) {
     all.push([...columns]);
     const sameLevelColumns = [];
     columns.forEach(column => {
       const children = column[childrenColumnName];
-
       if (Array.isArray(children) && children.length) {
         sameLevelColumns.push(...children);
       }
     });
-
     if (sameLevelColumns.length) {
       all.push(sameLevelColumns);
     }
   }
-
   return all;
 }
 export function getColumnByLevelIndex(columns, index) {
@@ -365,25 +281,20 @@ export function getColumnByLevelIndex(columns, index) {
 export function findColumn(columns, column) {
   let childrenColumnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
   let found;
-
   _each(columns, item => {
     if (item && item.key != null && !found) {
       if (item.key === column.key) {
         found = item;
       }
     }
-
     if (item && Array.isArray(item[childrenColumnName]) && !found) {
       found = findColumn(item[childrenColumnName], column, childrenColumnName);
     }
-
     if (found) {
       return false;
     }
-
     return undefined;
   });
-
   return found;
 }
 export function expandBtnShouldInRow(props) {
@@ -397,7 +308,6 @@ export function expandBtnShouldInRow(props) {
   const hasExpandedRowRender = typeof expandedRowRender === 'function';
   return hideExpandedColumn && hasExpandedRowRender || !hasExpandedRowRender && dataSource.some(record => {
     const children = _get(record, childrenRecordName);
-
     if (Array.isArray(children) && children.length || rowExpandable(record)) {
       return true;
     } else {
@@ -410,27 +320,21 @@ export function expandBtnShouldInRow(props) {
  * @param {*} query
  * @param {*} queries
  */
-
 export function mergeQueries(query) {
   let queries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   let _mergedQuery;
-
   const idx = queries.findIndex(item => {
     if (query.dataIndex === item.dataIndex) {
       _mergedQuery = Object.assign(Object.assign({}, item), query);
       return true;
     }
-
     return false;
   });
-
   if (idx > -1) {
     queries.splice(idx, 1, _mergedQuery);
   } else {
     queries.push(_mergedQuery);
   }
-
   return [...queries];
 }
 /**
@@ -438,29 +342,23 @@ export function mergeQueries(query) {
  * @param {Object[]} columns columns retain the column width after resize
  * @param {Object[]} newColumns
  */
-
 export function withResizeWidth(columns, newColumns) {
-  const _newColumns = cloneDeep(newColumns);
-
+  const _newColumns = [...newColumns];
   for (const column of columns) {
     if (!isNullOrUndefined(column.width)) {
       const currentColumn = column.key;
-
       const columnIndex = _findIndex(_newColumns, item => item.key === currentColumn);
-
       if (columnIndex !== -1) {
         _newColumns[columnIndex].width = _get(column, 'width');
       }
     }
   }
-
   return _newColumns;
 }
 /**
  * Pure function version of the same function in table foundation
  * This is not accessible in getDerivedStateFromProps, so fork one out
  */
-
 export function getAllDisabledRowKeys(_ref) {
   let {
     dataSource,
@@ -469,18 +367,14 @@ export function getAllDisabledRowKeys(_ref) {
     rowKey
   } = _ref;
   const disabledRowKeys = [];
-
   if (Array.isArray(dataSource) && dataSource.length && typeof getCheckboxProps === 'function') {
     for (const record of dataSource) {
       const props = getCheckboxProps(record);
       const recordKey = typeof rowKey === 'function' ? rowKey(record) : _get(record, rowKey);
-
       if (props && props.disabled) {
         disabledRowKeys.push(recordKey);
       }
-
       const children = _get(record, childrenRecordName);
-
       if (Array.isArray(children) && children.length) {
         const keys = getAllDisabledRowKeys({
           dataSource: children,
@@ -490,7 +384,6 @@ export function getAllDisabledRowKeys(_ref) {
       }
     }
   }
-
   return disabledRowKeys;
 }
 export function warnIfNoDataIndex(column) {
@@ -498,36 +391,49 @@ export function warnIfNoDataIndex(column) {
     const {
       filters,
       sorter,
-      dataIndex
+      dataIndex,
+      onFilter
     } = column;
     const logger = new Logger('[@douyinfe/semi-ui Table]');
-
-    if ((Array.isArray(filters) || _isFunction(sorter)) && isNullOrUndefined(dataIndex)) {
-      logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
+    if ((Array.isArray(filters) || _isFunction(onFilter) || _isFunction(sorter)) && isNullOrUndefined(dataIndex)) {
+      logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
     }
   }
 }
 /**
  * Whether is tree table
  */
-
 export function isTreeTable(_ref2) {
   let {
     dataSource,
     childrenRecordName = 'children'
   } = _ref2;
   let flag = false;
-
   if (Array.isArray(dataSource)) {
     for (const data of dataSource) {
       const children = _get(data, childrenRecordName);
-
       if (Array.isArray(children) && children.length) {
         flag = true;
         break;
       }
     }
   }
-
   return flag;
+}
+export function getRTLAlign(align, direction) {
+  if (direction === 'rtl') {
+    switch (align) {
+      case 'left':
+        return 'right';
+      case 'right':
+        return 'left';
+      default:
+        return align;
+    }
+  }
+  return align;
+}
+export function shouldShowEllipsisTitle(ellipsis) {
+  const shouldShowTitle = ellipsis === true || _get(ellipsis, 'showTitle', true);
+  return shouldShowTitle;
 }

package/lib/es/table/variables.scss

@@ -42,23 +42,24 @@ $width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边
 $width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
 $width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度
 $height-table_pagination_outer_min: 60px; // 表格分页器高度
+$height-table_column_filter_dropdown: 290px; // 表格过滤筛选列表最大高度
 
 
 // Color no need to change
 $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
 $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
-$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
 $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
 
 $color-table-border-default: var(--semi-color-border); // 表格描边颜色
 $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
 $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
-$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
 
 $color-table_pl-bg-default: transparent;
-$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
 $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
 $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
 $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
@@ -75,6 +76,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

package/lib/es/tabs/constants.js

@@ -1,26 +1,26 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  TABS: "".concat(BASE_CLASS_PREFIX, "-tabs"),
-  TABS_BAR: "".concat(BASE_CLASS_PREFIX, "-tabs-bar"),
-  TABS_BAR_LINE: "".concat(BASE_CLASS_PREFIX, "-tabs-bar-line"),
-  TABS_BAR_CARD: "".concat(BASE_CLASS_PREFIX, "-tabs-bar-card"),
-  TABS_BAR_BUTTON: "".concat(BASE_CLASS_PREFIX, "-tabs-bar-button"),
-  TABS_BAR_EXTRA: "".concat(BASE_CLASS_PREFIX, "-tabs-bar-extra"),
-  TABS_TAB: "".concat(BASE_CLASS_PREFIX, "-tabs-tab"),
-  TABS_TAB_ACTIVE: "".concat(BASE_CLASS_PREFIX, "-tabs-tab-active"),
-  TABS_TAB_DISABLED: "".concat(BASE_CLASS_PREFIX, "-tabs-tab-disabled"),
-  TABS_CONTENT: "".concat(BASE_CLASS_PREFIX, "-tabs-content"),
-  TABS_CONTENT_ANIMATED: "".concat(BASE_CLASS_PREFIX, "-tabs-content-animated"),
-  TABS_CONTENT_NO_ANIMATED: "".concat(BASE_CLASS_PREFIX, "-tabs-content-no-animated"),
-  TABS_PANE: "".concat(BASE_CLASS_PREFIX, "-tabs-pane"),
-  TABS_PANE_INACTIVE: "".concat(BASE_CLASS_PREFIX, "-tabs-pane-inactive"),
-  TABS_PANE_ACTIVE: "".concat(BASE_CLASS_PREFIX, "-tabs-pane-active"),
-  TABS_PANE_MOTION_OVERLAY: "".concat(BASE_CLASS_PREFIX, "-tabs-pane-motion-overlay"),
-  TABS_PANE_ANIMATING: "".concat(BASE_CLASS_PREFIX, "-tabs-pane-animating"),
-  "TABS_PANE_ANIMATE_LEFT_SHOW": "".concat(BASE_CLASS_PREFIX, "-tabs-pane-animate-leftShow"),
-  "TABS_PANE_ANIMATE_RIGHT_SHOW": "".concat(BASE_CLASS_PREFIX, "-tabs-pane-animate-rightShow"),
-  "TABS_PANE_ANIMATE_TOP_SHOW": "".concat(BASE_CLASS_PREFIX, "-tabs-pane-animate-topShow"),
-  "TABS_PANE_ANIMATE_BOTTOM_SHOW": "".concat(BASE_CLASS_PREFIX, "-tabs-pane-animate-bottomShow")
+  TABS: `${BASE_CLASS_PREFIX}-tabs`,
+  TABS_BAR: `${BASE_CLASS_PREFIX}-tabs-bar`,
+  TABS_BAR_LINE: `${BASE_CLASS_PREFIX}-tabs-bar-line`,
+  TABS_BAR_CARD: `${BASE_CLASS_PREFIX}-tabs-bar-card`,
+  TABS_BAR_BUTTON: `${BASE_CLASS_PREFIX}-tabs-bar-button`,
+  TABS_BAR_EXTRA: `${BASE_CLASS_PREFIX}-tabs-bar-extra`,
+  TABS_TAB: `${BASE_CLASS_PREFIX}-tabs-tab`,
+  TABS_TAB_ACTIVE: `${BASE_CLASS_PREFIX}-tabs-tab-active`,
+  TABS_TAB_DISABLED: `${BASE_CLASS_PREFIX}-tabs-tab-disabled`,
+  TABS_CONTENT: `${BASE_CLASS_PREFIX}-tabs-content`,
+  TABS_CONTENT_ANIMATED: `${BASE_CLASS_PREFIX}-tabs-content-animated`,
+  TABS_CONTENT_NO_ANIMATED: `${BASE_CLASS_PREFIX}-tabs-content-no-animated`,
+  TABS_PANE: `${BASE_CLASS_PREFIX}-tabs-pane`,
+  TABS_PANE_INACTIVE: `${BASE_CLASS_PREFIX}-tabs-pane-inactive`,
+  TABS_PANE_ACTIVE: `${BASE_CLASS_PREFIX}-tabs-pane-active`,
+  TABS_PANE_MOTION_OVERLAY: `${BASE_CLASS_PREFIX}-tabs-pane-motion-overlay`,
+  TABS_PANE_ANIMATING: `${BASE_CLASS_PREFIX}-tabs-pane-animating`,
+  "TABS_PANE_ANIMATE_LEFT_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-leftShow`,
+  "TABS_PANE_ANIMATE_RIGHT_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-rightShow`,
+  "TABS_PANE_ANIMATE_TOP_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-topShow`,
+  "TABS_PANE_ANIMATE_BOTTOM_SHOW": `${BASE_CLASS_PREFIX}-tabs-pane-animate-bottomShow`
 };
 const numbers = {
   DEFAULT_ACTIVE_KEY: 1