@kdcloudjs/table 1.0.0

package/lib/table/pipeline/features/singleSelect.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.singleSelect = singleSelect;
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _internals = require("../../internals");
+
+var _others = require("../../utils/others");
+
+var _utils = require("../../utils");
+
+function singleSelect() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function singleSelectStep(pipeline) {
+    var _context;
+
+    var _a, _b, _c, _d, _e;
+
+    var Radio = pipeline.ctx.components.Radio;
+
+    if (Radio == null) {
+      throw new Error('使用 singleSelect 之前需要通过 pipeline context 设置 components.Radio');
+    }
+
+    var stateKey = 'singleSelect';
+    var clickArea = (_a = opts.clickArea) !== null && _a !== void 0 ? _a : 'radio';
+    var isDisabled = (_b = opts.isDisabled) !== null && _b !== void 0 ? _b : (0, _others.always)(false);
+    var primaryKey = pipeline.ensurePrimaryKey('singleSelect');
+    var value = (_d = (_c = opts.value) !== null && _c !== void 0 ? _c : pipeline.getStateAtKey(stateKey)) !== null && _d !== void 0 ? _d : opts.defaultValue;
+
+    var onChange = function onChange(rowKey) {
+      var _a;
+
+      (_a = opts.onChange) === null || _a === void 0 ? void 0 : _a.call(opts, rowKey);
+      pipeline.setStateAtKey(stateKey, rowKey);
+    };
+
+    var radioColumn = (0, _extends2.default)((0, _extends2.default)({
+      name: '',
+      width: 50,
+      align: 'center'
+    }, opts.radioColumn), {
+      getCellProps: function getCellProps(value, row, rowIndex) {
+        var _a, _b;
+
+        if (clickArea === 'cell') {
+          var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+          var disabled = isDisabled(row, rowIndex);
+          var preCellProps = (_b = (_a = opts.radioColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+          return (0, _utils.mergeCellProps)(preCellProps, {
+            style: {
+              cursor: disabled ? 'not-allowed' : 'pointer'
+            },
+            onClick: disabled ? undefined : function (e) {
+              if (opts.stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              onChange(rowKey);
+            }
+          });
+        }
+      },
+      render: function render(_, row, rowIndex) {
+        var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+        return /*#__PURE__*/_react.default.createElement(Radio, {
+          checked: value === rowKey,
+          disabled: isDisabled(row, rowIndex),
+          onChange: clickArea === 'radio' ? function (arg1, arg2) {
+            var _a;
+
+            var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1 === null || arg1 === void 0 ? void 0 : arg1.nativeEvent;
+
+            if (nativeEvent && opts.stopClickEventPropagation) {
+              nativeEvent.stopPropagation();
+            }
+
+            onChange(rowKey);
+          } : undefined
+        });
+      }
+    });
+    var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
+    var radioPlacement = (_e = opts.radioPlacement) !== null && _e !== void 0 ? _e : 'start';
+
+    if (radioPlacement === 'start') {
+      nextColumns.unshift(radioColumn);
+    } else {
+      nextColumns.push(radioColumn);
+    }
+
+    pipeline.columns(nextColumns);
+    pipeline.appendRowPropsGetter(function (row, rowIndex) {
+      var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+      var style = {};
+      var className;
+      var onClick;
+
+      if (opts.highlightRowWhenSelected) {
+        if (value === rowKey) {
+          className = 'highlight';
+        }
+      }
+
+      if (clickArea === 'row' && !isDisabled(row, rowIndex)) {
+        style.cursor = 'pointer';
+
+        onClick = function onClick(e) {
+          if (opts.stopClickEventPropagation) {
+            e.stopPropagation();
+          }
+
+          onChange(rowKey);
+        };
+      }
+
+      return {
+        className: className,
+        style: style,
+        onClick: onClick
+      };
+    });
+    return pipeline;
+  };
+}

package/lib/table/pipeline/features/sort.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import { ArtColumn, SortItem, SortOrder } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface SortHeaderCellProps {
+    /** 调用 makeSortTransform(...) 时的参数 */
+    sortOptions: Required<Omit<SortFeatureOptions, 'SortHeaderCell' | 'defaultSorts'>>;
+    /** 在添加排序相关的内容之前 表头原有的渲染内容 */
+    children: ReactNode;
+    /** 当前排序 */
+    sortOrder: SortOrder;
+    /** 多列排序下，sortIndex 指明了当前排序字段起作用的顺序. 当 sortOrder 为 none 时，sortIndex 固定为 -1 */
+    sortIndex: number;
+    /** 当前列的配置 */
+    column: ArtColumn;
+    /** 切换排序的回调 */
+    onToggle(e: React.MouseEvent): void;
+}
+export interface SortFeatureOptions {
+    /** (非受控用法) 默认的排序字段列表 */
+    defaultSorts?: SortItem[];
+    /** (受控用法) 排序字段列表 */
+    sorts?: SortItem[];
+    /** 更新排序字段列表的回调函数 */
+    onChangeSorts?(nextSorts: SortItem[], currentSort: SortItem): void;
+    /** 排序切换顺序 */
+    orders?: SortOrder[];
+    /** 排序模式。单选 single，多选 multiple，默认为多选 */
+    mode?: 'single' | 'multiple';
+    /** 自定义排序表头 */
+    SortHeaderCell?: React.ComponentType<SortHeaderCellProps>;
+    /** 是否保持 dataSource 不变 */
+    keepDataSource?: boolean;
+    /** 排序激活时 是否高亮这一列的单元格 */
+    highlightColumnWhenActive?: boolean;
+    /** 是否对触发 onChangeOpenKeys 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+    /** sort icon 是否 hover 之后显示 */
+    sortIconHoverShow?: boolean;
+}
+export declare function sort(opts?: SortFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/sort.js

@@ -0,0 +1,361 @@
+"use strict";
+
+var _sliceInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
+
+var _Array$from = require("@babel/runtime-corejs3/core-js-stable/array/from");
+
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
+
+var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
+
+var _getIterator = require("@babel/runtime-corejs3/core-js/get-iterator");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sort = sort;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _styles = require("../../base/styles");
+
+var _templateObject;
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { var _context4; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty2(_context4 = Object.prototype.toString.call(o)).call(_context4, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function SortIcon(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      style = _ref.style,
+      className = _ref.className,
+      order = _ref.order;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    style: style,
+    className: className,
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    width: size,
+    height: size,
+    viewBox: "0 0 32 32",
+    "aria-hidden": "true",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: order === 'asc' ? 'currentColor' : '#bfbfbf',
+    transform: "translate(0, 4)",
+    d: "M8 8L16 0 24 8z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: order === 'desc' ? 'currentColor' : '#bfbfbf',
+    transform: "translate(0, -4)",
+    d: "M24 24L16 32 8 24z "
+  }));
+}
+
+function DefaultSortHeaderCell(_ref2) {
+  var _cx;
+
+  var children = _ref2.children,
+      column = _ref2.column,
+      onToggle = _ref2.onToggle,
+      sortOrder = _ref2.sortOrder,
+      sortIndex = _ref2.sortIndex,
+      sortOptions = _ref2.sortOptions;
+  // 通过 justify-content 来与 col.align 保持对齐方向一致
+  var justifyContent = column.align === 'right' ? 'flex-end' : column.align === 'center' ? 'center' : 'flex-start';
+  return /*#__PURE__*/_react.default.createElement(TableHeaderCell, {
+    onClick: onToggle,
+    style: {
+      justifyContent: justifyContent
+    }
+  }, children, /*#__PURE__*/_react.default.createElement(SortIcon, {
+    style: {
+      userSelect: 'none',
+      marginLeft: 2,
+      flexShrink: 0
+    },
+    className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableSortIcon, true), (0, _defineProperty2.default)(_cx, "active", sortOrder === 'desc' || sortOrder === 'asc'), _cx)),
+    size: 16,
+    order: sortOrder
+  }), sortOptions.mode === 'multiple' && sortIndex !== -1 && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      userSelect: 'none',
+      marginLeft: 2,
+      color: '#666',
+      flex: '0 0 auto',
+      fontSize: 10,
+      fontFamily: 'monospace'
+    }
+  }, sortIndex + 1));
+}
+
+function hasAnySortableColumns(cols) {
+  return cols.some(function (col) {
+    var _a;
+
+    return Boolean((_a = col.features) === null || _a === void 0 ? void 0 : _a.sortable) || !(0, _utils.isLeafNode)(col) && hasAnySortableColumns(col.children);
+  });
+}
+
+var TableHeaderCell = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
+
+var stateKey = 'sort';
+
+function sort() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function sortStep(pipeline) {
+    var _a, _b, _c;
+
+    var _opts$orders = opts.orders,
+        orders = _opts$orders === void 0 ? ['desc', 'asc', 'none'] : _opts$orders,
+        _opts$mode = opts.mode,
+        mode = _opts$mode === void 0 ? 'multiple' : _opts$mode,
+        _opts$SortHeaderCell = opts.SortHeaderCell,
+        SortHeaderCell = _opts$SortHeaderCell === void 0 ? DefaultSortHeaderCell : _opts$SortHeaderCell,
+        keepDataSource = opts.keepDataSource,
+        highlightColumnWhenActive = opts.highlightColumnWhenActive,
+        stopClickEventPropagation = opts.stopClickEventPropagation,
+        sortIconHoverShow = opts.sortIconHoverShow;
+    var inputSorts = (_c = (_b = (_a = opts.sorts) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultSorts) !== null && _c !== void 0 ? _c : [];
+    var activeSorts = (0, _filter.default)(inputSorts).call(inputSorts, function (s) {
+      return s.order !== 'none';
+    }); // 单字段排序的情况下 sorts 中只有第一个排序字段才会生效
+
+    var sorts = mode === 'multiple' ? activeSorts : (0, _slice.default)(activeSorts).call(activeSorts, 0, 1);
+
+    var onChangeSortsInMultipleMode = function onChangeSortsInMultipleMode(nextSorts, currentSort) {
+      var _a;
+
+      (_a = opts.onChangeSorts) === null || _a === void 0 ? void 0 : _a.call(opts, nextSorts, currentSort);
+      pipeline.setStateAtKey(stateKey, nextSorts);
+    };
+
+    var onChangeSorts = mode === 'multiple' ? onChangeSortsInMultipleMode : function (nextSorts, currentSort) {
+      // 单字段排序的情况下，nextSorts 中只有最后一个排序字段才会生效
+      var len = nextSorts.length;
+      onChangeSortsInMultipleMode((0, _slice.default)(nextSorts).call(nextSorts, len - 1), currentSort);
+    };
+    var sortOptions = {
+      sorts: sorts,
+      onChangeSorts: onChangeSorts,
+      orders: orders,
+      mode: mode,
+      keepDataSource: keepDataSource,
+      highlightColumnWhenActive: highlightColumnWhenActive,
+      stopClickEventPropagation: stopClickEventPropagation,
+      sortIconHoverShow: sortIconHoverShow
+    };
+    var sortMap = new _map.default((0, _map2.default)(sorts).call(sorts, function (sort, index) {
+      return [sort.code, (0, _extends2.default)({
+        index: index
+      }, sort)];
+    }));
+    var dataSource = pipeline.getDataSource();
+    var columns = pipeline.getColumns();
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!hasAnySortableColumns(columns)) {
+        _utils.console.warn('commonTransform.sort 缺少可排序的列，请通过 column.features.sortable 来指定哪些列可排序', columns);
+      }
+    }
+
+    pipeline.dataSource(processDataSource(dataSource));
+    pipeline.columns(processColumns(columns));
+    return pipeline;
+
+    function processDataSource(dataSource) {
+      var _context, _context2;
+
+      if (keepDataSource) {
+        return dataSource;
+      }
+
+      var sortColumnsMap = new _map.default((0, _map2.default)(_context = (0, _filter.default)(_context2 = (0, _utils.collectNodes)(columns, 'leaf-only')).call(_context2, function (col) {
+        var _a, _b;
+
+        return ((_a = col.features) === null || _a === void 0 ? void 0 : _a.sortable) !== false && ((_b = col.features) === null || _b === void 0 ? void 0 : _b.sortable) != null;
+      })).call(_context, function (col) {
+        return [col.code, col];
+      }));
+      return (0, _utils.layeredSort)(dataSource, function (x, y) {
+        var _iterator = _createForOfIteratorHelper(sorts),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = _step.value,
+                code = _step$value.code,
+                order = _step$value.order;
+            var column = sortColumnsMap.get(code); // 如果 code 对应的 column 不可排序，我们跳过该 code
+
+            if (column == null) {
+              continue;
+            }
+
+            var sortable = column.features.sortable;
+            var compareFn = typeof sortable === 'function' ? sortable : _utils.smartCompare;
+
+            var xValue = _internals.internals.safeGetValue(column, x, -1);
+
+            var yValue = _internals.internals.safeGetValue(column, y, -1);
+
+            var cmp = compareFn(xValue, yValue, x, y);
+
+            if (cmp !== 0) {
+              return cmp * (order === 'asc' ? 1 : -1);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        return 0;
+      });
+    } // 在「升序 - 降序 - 不排序」之间不断切换
+
+
+    function toggle(code) {
+      var sort = sortMap.get(code);
+      var currentSort;
+
+      if (sort == null) {
+        currentSort = {
+          code: code,
+          order: orders[0]
+        };
+        onChangeSorts((0, _concat.default)(sorts).call(sorts, [currentSort]), currentSort);
+      } else {
+        var index = (0, _findIndex.default)(sorts).call(sorts, function (s) {
+          return s.code === code;
+        });
+        var nextSorts = (0, _slice.default)(sorts).call(sorts, 0, index + 1);
+        var nextOrder = getNextOrder(sort.order);
+        currentSort = {
+          code: code,
+          order: nextOrder
+        };
+
+        if (nextOrder === 'none') {
+          nextSorts.pop();
+        } else {
+          nextSorts[index] = (0, _extends2.default)((0, _extends2.default)({}, nextSorts[index]), {
+            order: nextOrder
+          });
+        }
+
+        onChangeSorts(nextSorts, currentSort);
+      }
+    }
+
+    function processColumns(columns) {
+      return (0, _map2.default)(columns).call(columns, dfs);
+
+      function dfs(col) {
+        var _a;
+
+        var result = (0, _extends2.default)({}, col);
+        var sortable = col.code && (((_a = col.features) === null || _a === void 0 ? void 0 : _a.sortable) || sortMap.has(col.code));
+        var active = sortable && sortMap.has(col.code);
+
+        if (sortable) {
+          var sortIndex = -1;
+          var sortOrder = 'none';
+
+          if (active) {
+            var _sortMap$get = sortMap.get(col.code),
+                order = _sortMap$get.order,
+                index = _sortMap$get.index;
+
+            sortOrder = order;
+            sortIndex = index;
+
+            if (highlightColumnWhenActive) {
+              result.headerCellProps = (0, _utils.mergeCellProps)(col.headerCellProps, {
+                style: {
+                  background: 'var(--header-highlight-bgcolor)'
+                }
+              });
+
+              result.getCellProps = function (value, row, rowIndex) {
+                var prevCellProps = _internals.internals.safeGetCellProps(col, row, rowIndex);
+
+                return (0, _utils.mergeCellProps)(prevCellProps, {
+                  style: {
+                    background: 'var(--highlight-bgcolor)'
+                  }
+                });
+              };
+            }
+          }
+
+          var sortNode = /*#__PURE__*/_react.default.createElement(SortHeaderCell, {
+            onToggle: function onToggle(e) {
+              if (stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              toggle(col.code);
+            },
+            sortOrder: sortOrder,
+            column: col,
+            sortIndex: sortIndex,
+            sortOptions: sortOptions
+          }, _internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
+            title: col.title && col.title[0] ? col.title[0] : col.title
+          })));
+
+          if (result.title && result.title[0]) {
+            result.title[0] = sortNode;
+          } else {
+            result.title = sortNode;
+          }
+        }
+
+        if (!(0, _utils.isLeafNode)(col)) {
+          var _context3;
+
+          result.children = (0, _map2.default)(_context3 = col.children).call(_context3, dfs);
+        }
+
+        return result;
+      }
+    }
+
+    function getNextOrder(order) {
+      var idx = orders.indexOf(order);
+      return orders[idx === orders.length - 1 ? 0 : idx + 1];
+    }
+  };
+}

package/lib/table/pipeline/features/tips.d.ts

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function tips(): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/tips.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tips = tips;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _commonViews = require("../../common-views");
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _templateObject;
+
+var HeaderCellWithTips = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  .tip-icon-wrapper {\n    margin-left: 2px;\n  }\n\n  .tip-icon {\n    display: flex;\n    fill: currentColor;\n  }\n"])));
+
+function tips() {
+  return function tipsSteap(pipeline) {
+    var Balloon = pipeline.ctx.components.Balloon;
+    var Tooltip = pipeline.ctx.components.Tooltip;
+
+    if (Balloon == null && Tooltip == null) {
+      throw new Error('使用 tips 之前需要通过 pipeline context 设置 components.Balloon / components.Tooltip');
+    }
+
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+      var _a;
+
+      if (!((_a = col.features) === null || _a === void 0 ? void 0 : _a.tips)) {
+        return col;
+      }
+
+      var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        title: /*#__PURE__*/_react.default.createElement(HeaderCellWithTips, {
+          style: {
+            justifyContent: justifyContent
+          }
+        }, _internals.internals.safeRenderHeader(col), Balloon ?
+        /*#__PURE__*/
+        // fusion/hippo
+        _react.default.createElement(Balloon, {
+          closable: false,
+          trigger: /*#__PURE__*/_react.default.createElement("div", {
+            className: "tip-icon-wrapper"
+          }, /*#__PURE__*/_react.default.createElement(_commonViews.icons.Info, {
+            className: "tip-icon"
+          }))
+        }, col.features.tips) :
+        /*#__PURE__*/
+        // antd
+        _react.default.createElement(Tooltip, {
+          title: col.features.tips
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "tip-icon-wrapper"
+        }, /*#__PURE__*/_react.default.createElement(_commonViews.icons.Info, {
+          className: "tip-icon"
+        }))))
+      });
+    }));
+  };
+}

package/lib/table/pipeline/features/treeMode.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TablePipeline } from '../pipeline';
+export declare const treeMetaSymbol: unique symbol;
+interface ExpandIconProps extends React.DOMAttributes<Element> {
+    expanded: boolean;
+    style: React.CSSProperties;
+}
+export interface TreeModeFeatureOptions {
+    /** 非受控用法：默认展开的 keys */
+    defaultOpenKeys?: string[];
+    /** 受控用法：当前展开的 keys */
+    openKeys?: string[];
+    /** 受控用法：展开 keys 改变的回调 */
+    onChangeOpenKeys?(nextKeys: string[], key: string, action: 'expand' | 'collapse'): void;
+    /** 自定义叶子节点的判定逻辑 */
+    isLeafNode?(node: any, nodeMeta: {
+        depth: number;
+        expanded: boolean;
+        rowKey: string;
+    }): boolean;
+    /** 展开折叠图标 */
+    icon?(props: ExpandIconProps): JSX.Element;
+    /** icon 的缩进值。一般为负数，此时 icon 将向左偏移，默认从 pipeline.ctx.indents 中获取 */
+    iconIndent?: number;
+    /** icon 与右侧文本的距离，默认从 pipeline.ctx.indents 中获取 */
+    iconGap?: number;
+    /** 每一级缩进产生的距离，默认从 pipeline.ctx.indents 中获取 */
+    indentSize?: number;
+    /** 点击事件的响应区域 */
+    clickArea?: 'cell' | 'content' | 'icon';
+    /** 是否对触发展开/收拢的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+    /** 指定表格每一行元信息的记录字段 */
+    treeMetaKey?: string | symbol;
+}
+export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};