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

package/lib/cjs/table/utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.arrayAdd = arrayAdd;
 exports.assignColumnKeys = assignColumnKeys;
-exports.cloneDeep = cloneDeep;
 exports.equalWith = equalWith;
 exports.expandBtnShouldInRow = expandBtnShouldInRow;
 exports.filterColumns = filterColumns;
@@ -18,6 +17,7 @@ exports.getColumnByLevelIndex = getColumnByLevelIndex;
 exports.getColumnKey = getColumnKey;
 exports.getColumnsByLevel = getColumnsByLevel;
 exports.getDefaultVirtualizedRowConfig = getDefaultVirtualizedRowConfig;
+exports.getRTLAlign = getRTLAlign;
 exports.getRecord = getRecord;
 exports.getRecordChildren = getRecordChildren;
 exports.getRecordKey = getRecordKey;
@@ -37,112 +37,52 @@ exports.isScrollbarColumn = isScrollbarColumn;
 exports.isSelected = isSelected;
 exports.isSelectionColumn = isSelectionColumn;
 exports.isTreeTable = isTreeTable;
-exports.mergeColumns = mergeColumns;
 exports.mergeQueries = mergeQueries;
+exports.shouldShowEllipsisTitle = shouldShowEllipsisTitle;
 exports.sliceColumnsByLevel = sliceColumnsByLevel;
 exports.warnIfNoDataIndex = warnIfNoDataIndex;
 exports.withResizeWidth = withResizeWidth;
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _toString2 = _interopRequireDefault(require("lodash/toString"));
-
 var _includes2 = _interopRequireDefault(require("lodash/includes"));
-
 var _some2 = _interopRequireDefault(require("lodash/some"));
-
 var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
-
 var _each2 = _interopRequireDefault(require("lodash/each"));
-
-var _clone2 = _interopRequireDefault(require("lodash/clone"));
-
-var _map2 = _interopRequireDefault(require("lodash/map"));
-
 var _find2 = _interopRequireDefault(require("lodash/find"));
-
 var _filter2 = _interopRequireDefault(require("lodash/filter"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _isEqualWith2 = _interopRequireDefault(require("lodash/isEqualWith"));
-
-var _cloneDeepWith2 = _interopRequireDefault(require("lodash/cloneDeepWith"));
-
 var _constants = require("./constants");
-
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
-
 var _Logger = _interopRequireDefault(require("../utils/Logger"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function cloneDeep(value, customizer) {
-  return (0, _cloneDeepWith2.default)(value, v => {
-    if (typeof v === 'function') {
-      return v;
-    } else if (typeof customizer === 'function') {
-      return customizer(v);
-    }
-
-    return undefined;
-  });
-}
-
 function equalWith(value, other, customizer) {
   return (0, _isEqualWith2.default)(value, other, function (objVal, othVal) {
     if (typeof objVal === 'function' && typeof othVal === 'function') {
       return (0, _toString2.default)(objVal) === (0, _toString2.default)(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;
   });
 }
-
 function getColumnKey(column, keyPropNames) {
   keyPropNames = Array.isArray(keyPropNames) ? keyPropNames : ['key', 'dataIndex'];
   let key = null;
   (0, _each2.default)(keyPropNames, propName => {
     key = (0, _get2.default)(column, propName);
-
     if (key != null) {
       return false;
     }
-
     return undefined;
   });
   return key;
 }
-
-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 : _clone2.default;
-  (0, _map2.default)(newColumns, newColumn => {
-    newColumn = Object.assign({}, newColumn);
-    const key = getColumnKey(newColumn, keyPropNames);
-    const oldColumn = key != null && (0, _find2.default)(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
@@ -150,8 +90,6 @@ function mergeColumns() {
  * @param {number} [endIndex] end index, not included
  * @returns {number}
  */
-
-
 function arrayAdd() {
   let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let beginIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -166,63 +104,49 @@ function arrayAdd() {
   });
   return result;
 }
-
 function isLastLeftFixed(columns, column) {
   let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
   const leftFixedColumns = (0, _filter2.default)(columns, col => col.fixed === true || col.fixed === 'left');
   const index = (0, _findIndex2.default)(leftFixedColumns, col => checkKeys.every(key => col[key] != null && col[key] === column[key]));
   return leftFixedColumns.length > 0 && index === leftFixedColumns.length - 1;
 }
-
 function isFirstFixedRight(columns, column) {
   let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
   const rightFixedColumns = (0, _filter2.default)(columns, col => col.fixed === 'right');
   const index = (0, _findIndex2.default)(rightFixedColumns, col => checkKeys.every(key => col[key] != null && col[key] === column[key]));
   return rightFixedColumns.length > 0 && index === 0;
 }
-
 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 && (0, _some2.default)(columns, col => fixedSet.includes(col.fixed));
 }
-
 function isAnyFixedRight(columns) {
   return (0, _some2.default)(columns, col => col.fixed === 'right');
 }
-
 function isFixedLeft(column) {
   return ['left', true].includes((0, _get2.default)(column, 'fixed'));
 }
-
 function isFixedRight(column) {
   return ['right'].includes((0, _get2.default)(column, 'fixed'));
 }
-
 function isFixed(column) {
   return isFixedLeft(column) || isFixedRight(column);
 }
-
 function isInnerColumnKey(key) {
   return [_constants.strings.DEFAULT_KEY_COLUMN_EXPAND, _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR, _constants.strings.DEFAULT_KEY_COLUMN_SELECTION].includes(key);
 }
-
 function isExpandedColumn(column) {
   return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_EXPAND;
 }
-
 function isScrollbarColumn(column) {
   return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR;
 }
-
 function isSelectionColumn(column) {
   return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SELECTION;
 }
-
 function filterColumns(columns) {
   let ignoreKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [_constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR];
   return (0, _filter2.default)(columns, col => !ignoreKeys.includes(col.key));
@@ -232,26 +156,20 @@ function filterColumns(columns) {
  * @param {Array} columns
  * @returns {Number|undefined}
  */
-
-
 function getScrollbarColumnWidth() {
   let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const len = columns.length;
-
   if (len) {
     const lastColumn = columns[len - 1];
-
     if ((0, _get2.default)(lastColumn, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR) {
       return (0, _get2.default)(lastColumn, 'width', 0);
     }
   }
 }
-
 function getRecordKey(record, rowKey) {
   if (rowKey === undefined) {
     rowKey = 'key';
   }
-
   return typeof rowKey === 'function' ? rowKey(record) : (0, _get2.default)(record, rowKey);
 }
 /**
@@ -259,8 +177,6 @@ function getRecordKey(record, rowKey) {
  * @param {*} expandedRowKeys
  * @param {*} key
  */
-
-
 function isExpanded(expandedRowKeys, key) {
   return key != null && (0, _includes2.default)(expandedRowKeys, key);
 }
@@ -269,8 +185,6 @@ function isExpanded(expandedRowKeys, key) {
  * @param {Set} selectedRowKeysSet
  * @param {String} key
  */
-
-
 function isSelected(selectedRowKeysSet, key) {
   return key !== null && selectedRowKeysSet.has(key);
 }
@@ -279,44 +193,33 @@ function isSelected(selectedRowKeysSet, key) {
  * @param {Set} disabledRowKeysSet
  * @param {String} key
  */
-
-
 function isDisabled(disabledRowKeysSet, key) {
   return key !== null && disabledRowKeysSet.has(key);
 }
-
 function getRecord(data, recordKey, rowKey) {
   if (rowKey === undefined) {
     rowKey = 'key';
   }
-
   return (0, _find2.default)(data, record => recordKey != null && recordKey !== '' && getRecordKey(record, rowKey) === recordKey);
 }
-
 function getRecordChildren(record, childrenRecordName) {
   if (childrenRecordName === undefined) {
     childrenRecordName = 'children';
   }
-
   return (0, _get2.default)(record, childrenRecordName);
 }
-
 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;
 }
-
 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 ? _constants.numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT : _constants.numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT;
     config.minHeight = _constants.numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT;
@@ -327,14 +230,11 @@ function getDefaultVirtualizedRowConfig() {
     config.height = sectionRow ? _constants.numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_HEIGHT : _constants.numbers.DEFAULT_VIRTUALIZED_ROW_HEIGHT;
     config.minHeight = _constants.numbers.DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT;
   }
-
   return config;
 }
-
 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) {
@@ -345,10 +245,8 @@ function flattenColumns(cols) {
       }
     }
   }
-
   return list;
 }
-
 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;
@@ -357,32 +255,25 @@ function assignColumnKeys(columns) {
     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;
 }
-
 function sliceColumnsByLevel(columns) {
   let targetLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   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 {
@@ -390,16 +281,13 @@ function sliceColumnsByLevel(columns) {
       }
     });
   }
-
   return slicedColumns;
 }
-
 function getColumnsByLevel(columns) {
   let targetLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   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);
@@ -409,40 +297,32 @@ function getColumnsByLevel(columns) {
       });
     }
   }
-
   return targetColumns;
 }
-
 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;
 }
-
 function getColumnByLevelIndex(columns, index) {
   let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let childrenColumnName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'children';
   const allLevelColumns = getAllLevelColumns(columns, childrenColumnName);
   return allLevelColumns[level][index];
 }
-
 function findColumn(columns, column) {
   let childrenColumnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
   let found;
@@ -452,20 +332,16 @@ function findColumn(columns, column) {
         found = item;
       }
     }
-
     if (item && Array.isArray(item[childrenColumnName]) && !found) {
       found = findColumn(item[childrenColumnName], column, childrenColumnName);
     }
-
     if (found) {
       return false;
     }
-
     return undefined;
   });
   return found;
 }
-
 function expandBtnShouldInRow(props) {
   const {
     expandedRowRender,
@@ -477,7 +353,6 @@ function expandBtnShouldInRow(props) {
   const hasExpandedRowRender = typeof expandedRowRender === 'function';
   return hideExpandedColumn && hasExpandedRowRender || !hasExpandedRowRender && dataSource.some(record => {
     const children = (0, _get2.default)(record, childrenRecordName);
-
     if (Array.isArray(children) && children.length || rowExpandable(record)) {
       return true;
     } else {
@@ -490,28 +365,21 @@ function expandBtnShouldInRow(props) {
  * @param {*} query
  * @param {*} queries
  */
-
-
 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];
 }
 /**
@@ -519,30 +387,23 @@ function mergeQueries(query) {
  * @param {Object[]} columns columns retain the column width after resize
  * @param {Object[]} newColumns
  */
-
-
 function withResizeWidth(columns, newColumns) {
-  const _newColumns = cloneDeep(newColumns);
-
+  const _newColumns = [...newColumns];
   for (const column of columns) {
     if (!(0, _isNullOrUndefined.default)(column.width)) {
       const currentColumn = column.key;
       const columnIndex = (0, _findIndex2.default)(_newColumns, item => item.key === currentColumn);
-
       if (columnIndex !== -1) {
         _newColumns[columnIndex].width = (0, _get2.default)(column, 'width');
       }
     }
   }
-
   return _newColumns;
 }
 /**
  * Pure function version of the same function in table foundation
  * This is not accessible in getDerivedStateFromProps, so fork one out
  */
-
-
 function getAllDisabledRowKeys(_ref) {
   let {
     dataSource,
@@ -551,18 +412,14 @@ 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) : (0, _get2.default)(record, rowKey);
-
       if (props && props.disabled) {
         disabledRowKeys.push(recordKey);
       }
-
       const children = (0, _get2.default)(record, childrenRecordName);
-
       if (Array.isArray(children) && children.length) {
         const keys = getAllDisabledRowKeys({
           dataSource: children,
@@ -572,46 +429,56 @@ function getAllDisabledRowKeys(_ref) {
       }
     }
   }
-
   return disabledRowKeys;
 }
-
 function warnIfNoDataIndex(column) {
   if (typeof column === 'object' && column !== null) {
     const {
       filters,
       sorter,
-      dataIndex
+      dataIndex,
+      onFilter
     } = column;
     const logger = new _Logger.default('[@douyinfe/semi-ui Table]');
-
-    if ((Array.isArray(filters) || (0, _isFunction2.default)(sorter)) && (0, _isNullOrUndefined.default)(dataIndex)) {
-      logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
+    if ((Array.isArray(filters) || (0, _isFunction2.default)(onFilter) || (0, _isFunction2.default)(sorter)) && (0, _isNullOrUndefined.default)(dataIndex)) {
+      logger.warn(`The column with sorter or filter must pass the 'dataIndex' prop`);
     }
   }
 }
 /**
  * Whether is tree table
  */
-
-
 function isTreeTable(_ref2) {
   let {
     dataSource,
     childrenRecordName = 'children'
   } = _ref2;
   let flag = false;
-
   if (Array.isArray(dataSource)) {
     for (const data of dataSource) {
       const children = (0, _get2.default)(data, childrenRecordName);
-
       if (Array.isArray(children) && children.length) {
         flag = true;
         break;
       }
     }
   }
-
   return flag;
+}
+function getRTLAlign(align, direction) {
+  if (direction === 'rtl') {
+    switch (align) {
+      case 'left':
+        return 'right';
+      case 'right':
+        return 'left';
+      default:
+        return align;
+    }
+  }
+  return align;
+}
+function shouldShowEllipsisTitle(ellipsis) {
+  const shouldShowTitle = ellipsis === true || (0, _get2.default)(ellipsis, 'showTitle', true);
+  return shouldShowTitle;
 }

package/lib/cjs/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/cjs/tabs/constants.js

@@ -4,31 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  TABS: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs"),
-  TABS_BAR: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar"),
-  TABS_BAR_LINE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-line"),
-  TABS_BAR_CARD: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-card"),
-  TABS_BAR_BUTTON: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-button"),
-  TABS_BAR_EXTRA: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-bar-extra"),
-  TABS_TAB: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab"),
-  TABS_TAB_ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab-active"),
-  TABS_TAB_DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-tab-disabled"),
-  TABS_CONTENT: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content"),
-  TABS_CONTENT_ANIMATED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content-animated"),
-  TABS_CONTENT_NO_ANIMATED: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-content-no-animated"),
-  TABS_PANE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane"),
-  TABS_PANE_INACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-inactive"),
-  TABS_PANE_ACTIVE: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-active"),
-  TABS_PANE_MOTION_OVERLAY: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-motion-overlay"),
-  TABS_PANE_ANIMATING: "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animating"),
-  "TABS_PANE_ANIMATE_LEFT_SHOW": "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animate-leftShow"),
-  "TABS_PANE_ANIMATE_RIGHT_SHOW": "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animate-rightShow"),
-  "TABS_PANE_ANIMATE_TOP_SHOW": "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animate-topShow"),
-  "TABS_PANE_ANIMATE_BOTTOM_SHOW": "".concat(_constants.BASE_CLASS_PREFIX, "-tabs-pane-animate-bottomShow")
+  TABS: `${_constants.BASE_CLASS_PREFIX}-tabs`,
+  TABS_BAR: `${_constants.BASE_CLASS_PREFIX}-tabs-bar`,
+  TABS_BAR_LINE: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-line`,
+  TABS_BAR_CARD: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-card`,
+  TABS_BAR_BUTTON: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-button`,
+  TABS_BAR_EXTRA: `${_constants.BASE_CLASS_PREFIX}-tabs-bar-extra`,
+  TABS_TAB: `${_constants.BASE_CLASS_PREFIX}-tabs-tab`,
+  TABS_TAB_ACTIVE: `${_constants.BASE_CLASS_PREFIX}-tabs-tab-active`,
+  TABS_TAB_DISABLED: `${_constants.BASE_CLASS_PREFIX}-tabs-tab-disabled`,
+  TABS_CONTENT: `${_constants.BASE_CLASS_PREFIX}-tabs-content`,
+  TABS_CONTENT_ANIMATED: `${_constants.BASE_CLASS_PREFIX}-tabs-content-animated`,
+  TABS_CONTENT_NO_ANIMATED: `${_constants.BASE_CLASS_PREFIX}-tabs-content-no-animated`,
+  TABS_PANE: `${_constants.BASE_CLASS_PREFIX}-tabs-pane`,
+  TABS_PANE_INACTIVE: `${_constants.BASE_CLASS_PREFIX}-tabs-pane-inactive`,
+  TABS_PANE_ACTIVE: `${_constants.BASE_CLASS_PREFIX}-tabs-pane-active`,
+  TABS_PANE_MOTION_OVERLAY: `${_constants.BASE_CLASS_PREFIX}-tabs-pane-motion-overlay`,
+  TABS_PANE_ANIMATING: `${_constants.BASE_CLASS_PREFIX}-tabs-pane-animating`,
+  "TABS_PANE_ANIMATE_LEFT_SHOW": `${_constants.BASE_CLASS_PREFIX}-tabs-pane-animate-leftShow`,
+  "TABS_PANE_ANIMATE_RIGHT_SHOW": `${_constants.BASE_CLASS_PREFIX}-tabs-pane-animate-rightShow`,
+  "TABS_PANE_ANIMATE_TOP_SHOW": `${_constants.BASE_CLASS_PREFIX}-tabs-pane-animate-topShow`,
+  "TABS_PANE_ANIMATE_BOTTOM_SHOW": `${_constants.BASE_CLASS_PREFIX}-tabs-pane-animate-bottomShow`
 };
 exports.cssClasses = cssClasses;
 const numbers = {