@kdcloudjs/kdesign 1.6.33 → 1.6.35

package/es/table/api.js

@@ -0,0 +1,128 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import { collectNodes } from '@kdcloudjs/table/es/table/utils';
+import { rangeSelectionKey } from '@kdcloudjs/table/es/table/pipeline/features/rangeSelection';
+export default function getApi(pipelineRef) {
+  function getColumns() {
+    var _a;
+    return (_a = pipelineRef.current.getColumns) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current)();
+  }
+  function getDataSource() {
+    var _a;
+    return (_a = pipelineRef.current.getDataSource) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current)();
+  }
+  function getFooterDataSource() {
+    var _a;
+    return (_a = pipelineRef.current.getFooterDataSource) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current)();
+  }
+  /**
+   * 清除范围选中内容
+   */
+  function clearRangeSelection() {
+    var pipeline = pipelineRef.current;
+    pipeline.setStateAtKey(rangeSelectionKey, null);
+  }
+  /**
+   * 将目标行滚动到可视位置
+   * @param rowIndex 行索引
+   * @param position 目标行滚动到的位置，不传则根据目标行相对视口的位置滚动到底部或顶部，可取值为'top' | 'middle' | 'bottom'
+   * @returns
+   */
+  function ensureRowIndexVisible(rowIndex, position) {
+    var _a, _b;
+    var pipeline = pipelineRef.current;
+    var _ref = (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.rowHeightManager,
+      cache = _ref.cache;
+    if (typeof rowIndex !== 'number' || rowIndex < 0 || rowIndex >= cache.length) {
+      console.warn('invalid row index for ensureIndexVisible: ' + rowIndex);
+      return;
+    }
+    var tableBodyContainer = (_b = pipeline.ref) === null || _b === void 0 ? void 0 : _b.current.domHelper.tableBody;
+    if (!tableBodyContainer) return;
+    var rowTopPixel = 0;
+    for (var i = 0; i < rowIndex; i++) {
+      rowTopPixel += cache[i];
+    }
+    var rowBottomPixel = rowTopPixel + cache[rowIndex];
+    var viewportHeight = tableBodyContainer.clientHeight;
+    var vScrollTop = tableBodyContainer.scrollTop;
+    var vScrollBottom = vScrollTop + viewportHeight;
+    var pxTop = rowTopPixel;
+    var pxBottom = rowBottomPixel - viewportHeight;
+    var pxMiddle = Math.min((pxTop + pxBottom) / 2, rowTopPixel);
+    var rowBelowViewport = vScrollTop > rowTopPixel;
+    var rowAboveViewport = vScrollBottom < rowBottomPixel;
+    var newScrollPosition = null;
+    if (position === 'top') {
+      newScrollPosition = pxTop;
+    } else if (position === 'bottom') {
+      newScrollPosition = pxBottom;
+    } else if (position === 'middle') {
+      newScrollPosition = pxMiddle;
+    } else if (rowBelowViewport) {
+      // 目标行在视口之上，则向上滚动到顶部
+      newScrollPosition = pxTop;
+    } else if (rowAboveViewport) {
+      // 目标行在视口之下，则向下滚动到底部
+      newScrollPosition = pxBottom;
+    }
+    if (newScrollPosition !== null) {
+      tableBodyContainer.scrollTop = newScrollPosition;
+    }
+  }
+  /**
+   * 将目标列滚动到可视位置
+   * @param code 列标识
+   * @returns
+   */
+  function ensureColumnVisible(code) {
+    var _a, _b;
+    var pipeline = pipelineRef.current;
+    var tableBodyContainer = (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.domHelper.tableBody;
+    var tableScroll = (_b = pipeline.ref) === null || _b === void 0 ? void 0 : _b.current.domHelper.stickyScroll;
+    var columnNodes = collectNodes(pipeline.getColumns(), 'leaf-only');
+    var column = _findInstanceProperty(columnNodes).call(columnNodes, function (col) {
+      return col.code === code;
+    });
+    var index = _findIndexInstanceProperty(columnNodes).call(columnNodes, function (col) {
+      return col.code === code;
+    });
+    // 固定列也不需要重置滚动条
+    if (!column || !tableBodyContainer || (column === null || column === void 0 ? void 0 : column.lock)) return;
+    var colLeft = _sliceInstanceProperty(columnNodes).call(columnNodes, 0, index).reduce(function (acc, col) {
+      return acc + col.width;
+    }, 0);
+    var colLeftPixel = colLeft; // 目标列前面列宽总和
+    var colRightPixel = colLeftPixel + column.width;
+    var viewportWidth = tableBodyContainer.clientWidth; // 表体容器的宽度
+    var scrollPosition = tableScroll.scrollLeft; // 滚动条滚动的距离
+    var vScrollLeft = scrollPosition;
+    var vScrollRight = scrollPosition + viewportWidth;
+    var pxLeft = colLeftPixel;
+    var pxRight = colRightPixel - viewportWidth;
+    var colBeforeViewport = vScrollLeft > colLeftPixel; // 滚动距离大于目标列前面列宽总和，说明目标列在视口之前
+    var colPastViewport = vScrollRight < colRightPixel; // 目标列是视口之后
+    var colToSmallForViewport = viewportWidth < column.width;
+    var alignColToLeft = colBeforeViewport || colToSmallForViewport;
+    var alignColToRight = colPastViewport;
+    if (alignColToLeft || alignColToRight) {
+      var newScrollPosition = alignColToLeft ? pxLeft : pxRight;
+      tableScroll.scrollLeft = newScrollPosition;
+    }
+  }
+  function getHeightCache() {
+    var _a;
+    var pipeline = pipelineRef.current;
+    return (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.rowHeightManager.cache;
+  }
+  return {
+    getColumns: getColumns,
+    getDataSource: getDataSource,
+    getFooterDataSource: getFooterDataSource,
+    clearRangeSelection: clearRangeSelection,
+    ensureRowIndexVisible: ensureRowIndexVisible,
+    ensureColumnVisible: ensureColumnVisible,
+    getHeightCache: getHeightCache
+  };
+}

package/es/table/feature/autoRowSpan.js

@@ -1,9 +1,7 @@
 import { features } from '@kdcloudjs/table';
-
 function useAutoRowSpan(pipeline, autoRowSpan) {
   if (autoRowSpan) {
     pipeline.use(features.autoRowSpan());
   }
 }
-
 export default useAutoRowSpan;

package/es/table/feature/colGroupExtendable.js

@@ -1,9 +1,7 @@
 import { features } from '@kdcloudjs/table';
-
 function colGroupExtendable(pipeline, columnGroupExtend) {
   if (columnGroupExtend) {
     pipeline.use(features.colGroupExtendable(columnGroupExtend));
   }
 }
-
 export default colGroupExtendable;

package/es/table/feature/columnDrag.js

@@ -1,9 +1,7 @@
 import { features } from '@kdcloudjs/table';
-
 function useColumnDrag(pipeline, columnDrag) {
   if (columnDrag) {
     pipeline.use(features.columnDrag(columnDrag === true ? {} : columnDrag));
   }
 }
-
 export default useColumnDrag;

package/es/table/feature/columnResize.js

@@ -1,9 +1,7 @@
 import { features } from '@kdcloudjs/table';
-
 function useColumnResize(pipeline, columnResize) {
   if (columnResize) {
     pipeline.use(features.columnResize(columnResize === true ? {} : columnResize));
   }
 }
-
 export default useColumnResize;

package/es/table/feature/contextMenu.js

@@ -1,9 +1,7 @@
 import { features } from '@kdcloudjs/table';
-
 function useContextMenu(pipeline, contextMenu) {
   if (contextMenu) {
     pipeline.use(features.contextMenu(contextMenu === true ? {} : contextMenu));
   }
 }
-
 export default useContextMenu;

package/es/table/feature/filter.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import { features } from '@kdcloudjs/table';
-
 function useFilter(pipeline, filter) {
   if (filter) {
     pipeline.use(_filterInstanceProperty(features).call(features, _extends({}, filter)));
   }
 }
-
 export default useFilter;

package/es/table/feature/mergeCellHover.js

@@ -1,7 +1,5 @@
 import { features } from '@kdcloudjs/table';
-
 function mergeCellHover(pipeline) {
   pipeline.use(features.mergeCellHover());
 }
-
 export default mergeCellHover;

package/es/table/feature/rowDetail.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { features } from '@kdcloudjs/table';
-
 function useRowDetail(pipeline, rowDetail) {
   if (rowDetail) {
     pipeline.use(features.rowDetail(_extends({}, rowDetail)));
   }
 }
-
 export default useRowDetail;

package/es/table/feature/rowSelection.js

@@ -1,32 +1,24 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import { features } from '@kdcloudjs/table';
-
 function useRowSelection(pipeline, rowSelection) {
   if (rowSelection) {
     if (rowSelection.type === 'radio') {
       var column = rowSelection.column,
-          fixed = rowSelection.fixed,
-          _onChange = rowSelection.onChange,
-          value = rowSelection.value,
-          defaultValue = rowSelection.defaultValue,
-          clickArea = rowSelection.clickArea,
-          other = __rest(rowSelection, ["column", "fixed", "onChange", "value", "defaultValue", "clickArea"]);
-
+        fixed = rowSelection.fixed,
+        _onChange = rowSelection.onChange,
+        value = rowSelection.value,
+        defaultValue = rowSelection.defaultValue,
+        clickArea = rowSelection.clickArea,
+        other = __rest(rowSelection, ["column", "fixed", "onChange", "value", "defaultValue", "clickArea"]);
       pipeline.use(features.singleSelect(_extends({
         defaultValue: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0],
         value: value ? value.length === 0 ? '' : value[0] : undefined,
@@ -39,11 +31,10 @@ function useRowSelection(pipeline, rowSelection) {
       }, other)));
     } else {
       var _column = rowSelection.column,
-          _fixed = rowSelection.fixed,
-          _onChange2 = rowSelection.onChange,
-          _clickArea = rowSelection.clickArea,
-          _other = __rest(rowSelection, ["column", "fixed", "onChange", "clickArea"]);
-
+        _fixed = rowSelection.fixed,
+        _onChange2 = rowSelection.onChange,
+        _clickArea = rowSelection.clickArea,
+        _other = __rest(rowSelection, ["column", "fixed", "onChange", "clickArea"]);
       pipeline.use(features.multiSelect(_extends({
         checkboxColumn: _column,
         checkboxPlacement: _fixed,
@@ -55,5 +46,4 @@ function useRowSelection(pipeline, rowSelection) {
     }
   }
 }
-
 export default useRowSelection;

package/es/table/feature/sort.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import { features } from '@kdcloudjs/table';
-
 function useSort(pipeline, sort) {
   if (sort) {
     pipeline.use(_sortInstanceProperty(features).call(features, _extends({}, sort)));
   }
 }
-
 export default useSort;

package/es/table/feature/treeMode.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { features } from '@kdcloudjs/table';
-
 function useTreeMode(pipeline, treeMode) {
   if (treeMode) {
     pipeline.use(features.treeMode(_extends({}, treeMode)));
   }
 }
-
 export default useTreeMode;

package/es/table/feature/useFooterDataSource.js

@@ -1,5 +1,4 @@
 import { features } from '@kdcloudjs/table';
-
 function useFooterDataSource(pipeline, footerDataSource) {
   if (footerDataSource) {
     pipeline.use(features.footerDataSource({
@@ -7,5 +6,4 @@ function useFooterDataSource(pipeline, footerDataSource) {
     }));
   }
 }
-
 export default useFooterDataSource;

package/es/table/feature/useRangeSelection.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { features } from '@kdcloudjs/table';
-
 function useRangeSelection(pipeline, rangeSelection) {
   if (rangeSelection) {
     pipeline.use(features.rangeSelection(_extends({}, rangeSelection)));
   }
 }
-
 export default useRangeSelection;

package/es/table/interface.d.ts

@@ -15,6 +15,9 @@ export declare type TableApi = {
     getDataSource: () => any[];
     getFooterDataSource: () => any[];
     clearRangeSelection: () => void;
+    getHeightCache: () => number[];
+    ensureRowIndexVisible: (rowIndex: number, position?: string | undefined) => void;
+    ensureColumnVisible: (code: string) => void;
 };
 export declare type TableInstance = {
     api: TableApi;

package/es/table/table.js

@@ -22,45 +22,44 @@ import useＭergeCellHover from './feature/mergeCellHover';
 import devWarning from '../_utils/devwarning';
 import useFooterDataSource from './feature/useFooterDataSource';
 import usecolGroupExtendable from './feature/colGroupExtendable';
+import getApi from './api';
 var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var columns = props.columns,
-      dataSource = props.dataSource,
-      columnDrag = props.columnDrag,
-      columnResize = props.columnResize,
-      primaryKey = props.primaryKey,
-      rowSelection = props.rowSelection,
-      rowDetail = props.rowDetail,
-      filter = _filterInstanceProperty(props),
-      sort = _sortInstanceProperty(props),
-      autoRowSpan = props.autoRowSpan,
-      treeMode = props.treeMode,
-      customPrefixcls = props.prefixCls,
-      className = props.className,
-      style = props.style,
-      components = props.components,
-      isLoading = props.isLoading,
-      footerDataSource = props.footerDataSource,
-      useVirtual = props.useVirtual,
-      estimatedRowHeight = props.estimatedRowHeight,
-      emptyCellHeight = props.emptyCellHeight,
-      hasHeader = props.hasHeader,
-      useOuterBorder = props.useOuterBorder,
-      defaultColumnWidth = props.defaultColumnWidth,
-      getRowProps = props.getRowProps,
-      getTableProps = props.getTableProps,
-      contextMenu = props.contextMenu,
-      rangeSelection = props.rangeSelection,
-      cssVariables = props.cssVariables,
-      stickyScrollHeight = props.stickyScrollHeight,
-      scrollbarWidth = props.scrollbarWidth,
-      scrollLoad = props.scrollLoad,
-      _props$columnGroupExt = props.columnGroupExtend,
-      columnGroupExtend = _props$columnGroupExt === void 0 ? {} : _props$columnGroupExt;
-
+    dataSource = props.dataSource,
+    columnDrag = props.columnDrag,
+    columnResize = props.columnResize,
+    primaryKey = props.primaryKey,
+    rowSelection = props.rowSelection,
+    rowDetail = props.rowDetail,
+    filter = _filterInstanceProperty(props),
+    sort = _sortInstanceProperty(props),
+    autoRowSpan = props.autoRowSpan,
+    treeMode = props.treeMode,
+    customPrefixcls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    components = props.components,
+    isLoading = props.isLoading,
+    footerDataSource = props.footerDataSource,
+    useVirtual = props.useVirtual,
+    estimatedRowHeight = props.estimatedRowHeight,
+    emptyCellHeight = props.emptyCellHeight,
+    hasHeader = props.hasHeader,
+    useOuterBorder = props.useOuterBorder,
+    defaultColumnWidth = props.defaultColumnWidth,
+    getRowProps = props.getRowProps,
+    getTableProps = props.getTableProps,
+    contextMenu = props.contextMenu,
+    rangeSelection = props.rangeSelection,
+    cssVariables = props.cssVariables,
+    stickyScrollHeight = props.stickyScrollHeight,
+    scrollbarWidth = props.scrollbarWidth,
+    scrollLoad = props.scrollLoad,
+    _props$columnGroupExt = props.columnGroupExtend,
+    columnGroupExtend = _props$columnGroupExt === void 0 ? {} : _props$columnGroupExt;
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls;
-
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
   var tablePrefixCls = getPrefixCls(prefixCls, customPrefixcls);
   var tableCls = classNames(tablePrefixCls, className);
   var pipeline = useTablePipeline({
@@ -73,30 +72,20 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
     dataSource: dataSource
   });
   var pipelineRef = useRef(pipeline);
-  pipelineRef.current = pipeline; // if (footerDataSource) {
+  pipelineRef.current = pipeline;
+  // if (footerDataSource) {
   //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //   // @ts-ignore
   //   pipeline.footerDataSource(footerDataSource)
   // }
-
   useImperativeHandle(ref, function () {
-    var _a, _b, _c, _d;
-
     return {
-      api: {
-        getColumns: (_a = pipelineRef.current.getColumns) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current),
-        getDataSource: (_b = pipelineRef.current.getDataSource) === null || _b === void 0 ? void 0 : _b.bind(pipelineRef.current),
-        getFooterDataSource: (_c = pipelineRef.current.getFooterDataSource) === null || _c === void 0 ? void 0 : _c.bind(pipelineRef.current),
-        clearRangeSelection: (_d = pipelineRef.current.clearRangeSelection) === null || _d === void 0 ? void 0 : _d.bind(pipelineRef.current)
-      }
+      api: getApi(pipelineRef)
     };
   });
   /* -------------------------------------------------------------------------- */
-
   /* features                                                                   */
-
   /* -------------------------------------------------------------------------- */
-
   useRowSelection(pipeline, rowSelection);
   useRowDetail(pipeline, rowDetail);
   useFilter(pipeline, filter);
@@ -111,24 +100,19 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   useFooterDataSource(pipeline, footerDataSource);
   usecolGroupExtendable(pipeline, columnGroupExtend);
   /* -------------------------------------------------------------------------- */
-
   /* after useTablePipeline, merge pipeline.getProps result                     */
-
   /* -------------------------------------------------------------------------- */
-
   if (typeof getRowProps === 'function') {
     pipeline.appendRowPropsGetter(getRowProps);
   } else {
     devWarning(true, 'table', "parameter 'getRowProps' should be a function but here it is ".concat(getRowProps));
   }
-
   if (typeof getTableProps === 'function') {
     var tableProps = getTableProps();
     pipeline.addTableProps(tableProps);
   } else {
     devWarning(true, 'table', "parameter 'getTableProps' should be a function but here it is ".concat(getTableProps));
   }
-
   return /*#__PURE__*/React.createElement(BaseTable, _extends({}, pipeline.getProps(), {
     className: tableCls,
     style: style,

package/es/tabs/active-line.js

@@ -1,17 +1,16 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
-
 var Line = function Line(props) {
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls;
-
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
   var left = props.left,
-      width = props.width,
-      className = props.className;
+    width = props.width,
+    className = props.className;
   var activeLinePrefixCls = getPrefixCls(prefixCls, 'active-line');
-  var activeLineClasses = classNames(activeLinePrefixCls, className, {// [`${tabPanePrefixCls}-size-${size}`]: size, // 尺寸样式
+  var activeLineClasses = classNames(activeLinePrefixCls, className, {
+    // [`${tabPanePrefixCls}-size-${size}`]: size, // 尺寸样式
     // [`${tabPanePrefixCls}-disabled`]: disabled || loadingDisabled, // 禁用态样式
     // [`${tabPanePrefixCls}-loading`]: loading, // 加载中样式
   });
@@ -24,6 +23,5 @@ var Line = function Line(props) {
     style: activeLineStyle
   });
 };
-
 Line.displayName = 'Line';
 export default Line;

package/es/tabs/arrow-button.js

@@ -5,20 +5,16 @@ import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import TabsContext from './context';
 import Icon from '../icon';
-
 var ArrowButton = function ArrowButton(props) {
   var _context, _classNames;
-
   var context = useContext(TabsContext);
-
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls;
-
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
   var className = props.className,
-      direction = props.direction,
-      disabled = props.disabled,
-      onClick = props.onClick;
+    direction = props.direction,
+    disabled = props.disabled,
+    onClick = props.onClick;
   var arrowButtonPrefixCls = getPrefixCls(prefixCls, 'arrow-button');
   var arrowButtonClasses = classNames(arrowButtonPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(arrowButtonPrefixCls, "-dynamic"), (context === null || context === void 0 ? void 0 : context.type) === 'dynamic'), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(arrowButtonPrefixCls, "-")).call(_context, direction), direction), _defineProperty(_classNames, "".concat(arrowButtonPrefixCls, "-line"), (context === null || context === void 0 ? void 0 : context.type) === 'line'), _defineProperty(_classNames, "".concat(arrowButtonPrefixCls, "-disabled"), disabled), _classNames));
   return /*#__PURE__*/React.createElement("span", {
@@ -30,6 +26,5 @@ var ArrowButton = function ArrowButton(props) {
     type: "arrow-right"
   }));
 };
-
 ArrowButton.displayName = 'ArrowButton';
 export default ArrowButton;

package/es/tabs/index.js

@@ -1,6 +1,6 @@
 import ITabs from './tabs';
 import TabPane from './tab-pane';
 var Tabs = ITabs;
-Tabs.TabPane = TabPane; // export { TabPane };
-
+Tabs.TabPane = TabPane;
+// export { TabPane };
 export default Tabs;

package/es/tabs/tab-pane.js

@@ -8,26 +8,20 @@ import ConfigContext from '../config-provider/ConfigContext';
 import TabsContext from './context';
 import { tuple } from '../_utils/type';
 export var TabPaneTypes = tuple('line', 'card', 'grid', 'dynamic');
-
 var TabPane = function TabPane(props) {
   var _context, _context2, _context3, _classNames, _classNames2;
-
   var context = useContext(TabsContext);
   var tabPaneRef = useRef(null);
-
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls;
-
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
   var tab = props.tab,
-      id = props.id,
-      className = props.className,
-      disabled = props.disabled,
-      operations = props.operations,
-      onChange = props.onChange;
-
+    id = props.id,
+    className = props.className,
+    disabled = props.disabled,
+    operations = props.operations,
+    onChange = props.onChange;
   var tabPaneProps = _extends({}, props);
-
   if (context) {
     tabPaneProps.activeKey = context.activeKey;
     tabPaneProps.type = context.type;
@@ -35,45 +29,37 @@ var TabPane = function TabPane(props) {
     tabPaneProps.size = context.size;
     tabPaneProps.disabled = context.disabled || disabled;
   }
-
   var tabPanePrefixCls = getPrefixCls(prefixCls, 'tab-pane');
   var tabPaneBoxClasses = classNames(tabPanePrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(tabPanePrefixCls, "-box-active"), String(tabPaneProps.activeKey) === String(id) && !tabPaneProps.disabled), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(tabPanePrefixCls, "-type-")).call(_context, tabPaneProps.type), tabPaneProps.type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(tabPanePrefixCls, "-")).call(_context2, tabPaneProps.position), tabPaneProps.position), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(tabPanePrefixCls, "-")).call(_context3, tabPaneProps.size), tabPaneProps.size), _defineProperty(_classNames, "".concat(tabPanePrefixCls, "-disabled"), tabPaneProps.disabled), _classNames));
   var tabPaneTextClasses = classNames("".concat(tabPanePrefixCls, "-text"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(tabPanePrefixCls, "-text-active"), String(tabPaneProps.activeKey) === String(id) && !tabPaneProps.disabled), _defineProperty(_classNames2, "".concat(tabPanePrefixCls, "-text-disabled"), tabPaneProps.disabled), _classNames2));
   var operationsClasses = classNames("".concat(tabPanePrefixCls, "-operations"), _defineProperty({}, "".concat(tabPanePrefixCls, "-operations-active"), String(tabPaneProps.activeKey) === String(id) && !tabPaneProps.disabled));
-
   var handleClick = function handleClick(e) {
     if (tabPaneProps.disabled) return;
     onChange && onChange(id, e);
   };
-
   useEffect(function () {
     var _a, _b;
-
     if (String(tabPaneProps.activeKey) === String(id)) {
       context === null || context === void 0 ? void 0 : context.getActiveLinePosition(((_a = tabPaneRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) || 0, ((_b = tabPaneRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0);
     }
   }, [tabPaneRef, tabPaneProps.activeKey, id, context]);
-
   var renderOperations = function renderOperations() {
     if (!(operations === null || operations === void 0 ? void 0 : operations.length)) return null;
     return operations === null || operations === void 0 ? void 0 : _mapInstanceProperty(operations).call(operations, function (op, index) {
       var event = function event() {
         op.props.onClick && op.props.onClick(id);
       };
-
       return /*#__PURE__*/React.createElement("span", {
         key: index,
         onClick: event
       }, op);
     });
   };
-
   var handleContextMenu = function handleContextMenu(e) {
     if (tabPaneProps.type !== 'dynamic') return;
     e.preventDefault();
     context === null || context === void 0 ? void 0 : context.getTriggerKey(id);
   };
-
   if (tabPaneProps.type !== 'dynamic') {
     return /*#__PURE__*/React.createElement("span", {
       ref: tabPaneRef,
@@ -83,7 +69,6 @@ var TabPane = function TabPane(props) {
       className: tabPaneTextClasses
     }, tab));
   }
-
   return /*#__PURE__*/React.createElement("span", {
     className: tabPaneBoxClasses,
     onContextMenu: handleContextMenu
@@ -95,6 +80,5 @@ var TabPane = function TabPane(props) {
     className: operationsClasses
   }, renderOperations()));
 };
-
 TabPane.displayName = 'TabPane';
 export default TabPane;