@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,332 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+
+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 = _sliceInstanceProperty(_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; }
+
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import React from 'react';
+import styled from 'styled-components';
+import cx from 'classnames';
+import { internals } from '../../internals';
+import { collectNodes, isLeafNode, layeredSort, mergeCellProps, smartCompare, console } from '../../utils';
+import { Classes } from '../../base/styles';
+
+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.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.createElement("path", {
+    fill: order === 'asc' ? 'currentColor' : '#bfbfbf',
+    transform: "translate(0, 4)",
+    d: "M8 8L16 0 24 8z"
+  }), /*#__PURE__*/React.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.createElement(TableHeaderCell, {
+    onClick: onToggle,
+    style: {
+      justifyContent: justifyContent
+    }
+  }, children, /*#__PURE__*/React.createElement(SortIcon, {
+    style: {
+      userSelect: 'none',
+      marginLeft: 2,
+      flexShrink: 0
+    },
+    className: cx((_cx = {}, _defineProperty(_cx, Classes.tableSortIcon, true), _defineProperty(_cx, "active", sortOrder === 'desc' || sortOrder === 'asc'), _cx)),
+    size: 16,
+    order: sortOrder
+  }), sortOptions.mode === 'multiple' && sortIndex !== -1 && /*#__PURE__*/React.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) || !isLeafNode(col) && hasAnySortableColumns(col.children);
+  });
+}
+
+var TableHeaderCell = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
+var stateKey = 'sort';
+export 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 = _filterInstanceProperty(inputSorts).call(inputSorts, function (s) {
+      return s.order !== 'none';
+    }); // 单字段排序的情况下 sorts 中只有第一个排序字段才会生效
+
+
+    var sorts = mode === 'multiple' ? activeSorts : _sliceInstanceProperty(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(_sliceInstanceProperty(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(_mapInstanceProperty(sorts).call(sorts, function (sort, index) {
+      return [sort.code, _extends({
+        index: index
+      }, sort)];
+    }));
+    var dataSource = pipeline.getDataSource();
+    var columns = pipeline.getColumns();
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!hasAnySortableColumns(columns)) {
+        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(_mapInstanceProperty(_context = _filterInstanceProperty(_context2 = 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 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 : smartCompare;
+            var xValue = internals.safeGetValue(column, x, -1);
+            var yValue = 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(_concatInstanceProperty(sorts).call(sorts, [currentSort]), currentSort);
+      } else {
+        var index = _findIndexInstanceProperty(sorts).call(sorts, function (s) {
+          return s.code === code;
+        });
+
+        var nextSorts = _sliceInstanceProperty(sorts).call(sorts, 0, index + 1);
+
+        var nextOrder = getNextOrder(sort.order);
+        currentSort = {
+          code: code,
+          order: nextOrder
+        };
+
+        if (nextOrder === 'none') {
+          nextSorts.pop();
+        } else {
+          nextSorts[index] = _extends(_extends({}, nextSorts[index]), {
+            order: nextOrder
+          });
+        }
+
+        onChangeSorts(nextSorts, currentSort);
+      }
+    }
+
+    function processColumns(columns) {
+      return _mapInstanceProperty(columns).call(columns, dfs);
+
+      function dfs(col) {
+        var _a;
+
+        var result = _extends({}, 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 = mergeCellProps(col.headerCellProps, {
+                style: {
+                  background: 'var(--header-highlight-bgcolor)'
+                }
+              });
+
+              result.getCellProps = function (value, row, rowIndex) {
+                var prevCellProps = internals.safeGetCellProps(col, row, rowIndex);
+                return mergeCellProps(prevCellProps, {
+                  style: {
+                    background: 'var(--highlight-bgcolor)'
+                  }
+                });
+              };
+            }
+          }
+
+          var sortNode = /*#__PURE__*/React.createElement(SortHeaderCell, {
+            onToggle: function onToggle(e) {
+              if (stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              toggle(col.code);
+            },
+            sortOrder: sortOrder,
+            column: col,
+            sortIndex: sortIndex,
+            sortOptions: sortOptions
+          }, internals.safeRenderHeader(_extends(_extends({}, 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 (!isLeafNode(col)) {
+          var _context3;
+
+          result.children = _mapInstanceProperty(_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/es/table/pipeline/features/tips.d.ts

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

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

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from 'react';
+import styled from 'styled-components';
+import { icons } from '../../common-views';
+import { internals } from '../../internals';
+import { makeRecursiveMapper } from '../../utils';
+var HeaderCellWithTips = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+export 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(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 _extends(_extends({}, col), {
+        title: /*#__PURE__*/React.createElement(HeaderCellWithTips, {
+          style: {
+            justifyContent: justifyContent
+          }
+        }, internals.safeRenderHeader(col), Balloon ?
+        /*#__PURE__*/
+        // fusion/hippo
+        React.createElement(Balloon, {
+          closable: false,
+          trigger: /*#__PURE__*/React.createElement("div", {
+            className: "tip-icon-wrapper"
+          }, /*#__PURE__*/React.createElement(icons.Info, {
+            className: "tip-icon"
+          }))
+        }, col.features.tips) :
+        /*#__PURE__*/
+        // antd
+        React.createElement(Tooltip, {
+          title: col.features.tips
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "tip-icon-wrapper"
+        }, /*#__PURE__*/React.createElement(icons.Info, {
+          className: "tip-icon"
+        }))))
+      });
+    }));
+  };
+}

package/es/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 {};

package/es/table/pipeline/features/treeMode.js

@@ -0,0 +1,234 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
+import _toArray from "@babel/runtime-corejs3/helpers/toArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+
+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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { var _context3; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context3 = Object.prototype.toString.call(o)).call(_context3, 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; }
+
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import cx from 'classnames';
+import React from 'react';
+import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
+import { internals } from '../../internals';
+import { isLeafNode as standardIsLeafNode, mergeCellProps } from '../../utils';
+export var treeMetaSymbol = _Symbol('treeMetaSymbol');
+export function treeMode() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function treeModeStep(pipeline) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
+    var stateKey = 'treeMode';
+    var ctx = pipeline.ctx;
+    var primaryKey = pipeline.ensurePrimaryKey('treeMode');
+
+    if (typeof primaryKey !== 'string') {
+      throw new Error('treeMode 仅支持字符串作为 primaryKey');
+    }
+
+    var openKeys = (_c = (_b = (_a = opts.openKeys) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultOpenKeys) !== null && _c !== void 0 ? _c : [];
+    var openKeySet = new _Set(openKeys);
+
+    var onChangeOpenKeys = function onChangeOpenKeys(nextKeys, key, action) {
+      var _a;
+
+      (_a = opts.onChangeOpenKeys) === null || _a === void 0 ? void 0 : _a.call(opts, nextKeys, key, action);
+      pipeline.setStateAtKey(stateKey, nextKeys, {
+        key: key,
+        action: action
+      });
+    };
+
+    var toggle = function toggle(rowKey) {
+      var expanded = openKeySet.has(rowKey);
+
+      if (expanded) {
+        onChangeOpenKeys(_filterInstanceProperty(openKeys).call(openKeys, function (key) {
+          return key !== rowKey;
+        }), rowKey, 'collapse');
+      } else {
+        var _context;
+
+        onChangeOpenKeys(_concatInstanceProperty(_context = []).call(_context, _toConsumableArray(openKeys), [rowKey]), rowKey, 'expand');
+      }
+    };
+
+    var isLeafNode = (_d = opts.isLeafNode) !== null && _d !== void 0 ? _d : standardIsLeafNode;
+    var clickArea = (_e = opts.clickArea) !== null && _e !== void 0 ? _e : 'cell';
+    var treeMetaKey = (_f = opts.treeMetaKey) !== null && _f !== void 0 ? _f : treeMetaSymbol;
+    var stopClickEventPropagation = Boolean(opts.stopClickEventPropagation); // indents
+
+    var iconWidth = ctx.indents.iconWidth;
+    var iconIndent = (_g = opts.iconIndent) !== null && _g !== void 0 ? _g : ctx.indents.iconIndent;
+    var iconGap = (_h = opts.iconGap) !== null && _h !== void 0 ? _h : ctx.indents.iconGap;
+    var indentSize = (_j = opts.indentSize) !== null && _j !== void 0 ? _j : ctx.indents.indentSize;
+    var Icon = opts.icon;
+    return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
+
+    function processDataSource(input) {
+      var result = [];
+      dfs(input, 0);
+
+      function dfs(nodes, depth) {
+        if (nodes == null) {
+          return;
+        }
+
+        var _iterator = _createForOfIteratorHelper(nodes),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var node = _step.value;
+            var rowKey = node[primaryKey];
+            var expanded = openKeySet.has(rowKey);
+            var isLeaf = isLeafNode(node, {
+              depth: depth,
+              expanded: expanded,
+              rowKey: rowKey
+            });
+            var treeMeta = {
+              depth: depth,
+              isLeaf: isLeaf,
+              expanded: expanded,
+              rowKey: rowKey
+            };
+            result.push(_extends(_defineProperty({}, treeMetaKey, treeMeta), node));
+
+            if (!isLeaf && expanded) {
+              dfs(node.children, depth + 1);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+
+      return result;
+    }
+
+    function processColumns(columns) {
+      var _context2;
+
+      if (columns.length === 0) {
+        return columns;
+      }
+
+      var _columns = _toArray(columns),
+          firstCol = _columns[0],
+          others = _sliceInstanceProperty(_columns).call(_columns, 1);
+
+      var render = function render(value, record, recordIndex) {
+        var content = internals.safeRender(firstCol, record, recordIndex);
+
+        if (record[treeMetaKey] == null) {
+          // 没有 treeMeta 信息的话，就返回原先的渲染结果
+          return content;
+        }
+
+        var _record$treeMetaKey = record[treeMetaKey],
+            rowKey = _record$treeMetaKey.rowKey,
+            depth = _record$treeMetaKey.depth,
+            isLeaf = _record$treeMetaKey.isLeaf,
+            expanded = _record$treeMetaKey.expanded;
+        var indent = iconIndent + depth * indentSize;
+
+        if (isLeaf) {
+          return /*#__PURE__*/React.createElement(InlineFlexCell, {
+            className: "expansion-cell leaf"
+          }, /*#__PURE__*/React.createElement("span", {
+            style: {
+              marginLeft: indent + iconWidth + iconGap
+            }
+          }, content));
+        }
+
+        var onClick = function onClick(e) {
+          if (stopClickEventPropagation) {
+            e.stopPropagation();
+          }
+
+          toggle(rowKey);
+        };
+
+        var expandCls = expanded ? 'expanded' : 'collapsed';
+        return /*#__PURE__*/React.createElement(ExpansionCell, {
+          className: cx('expansion-cell', expandCls),
+          style: {
+            cursor: clickArea === 'content' ? 'pointer' : undefined
+          },
+          onClick: clickArea === 'content' ? onClick : undefined
+        }, Icon ? /*#__PURE__*/React.createElement(Icon, {
+          expanded: expanded,
+          style: {
+            cursor: clickArea === 'icon' ? 'pointer' : undefined,
+            marginLeft: indent,
+            marginRight: iconGap,
+            width: iconWidth
+          },
+          onClick: clickArea === 'icon' ? onClick : undefined
+        }) : /*#__PURE__*/React.createElement(icons.CaretRight, {
+          className: cx('expansion-icon', expandCls),
+          style: {
+            cursor: clickArea === 'icon' ? 'pointer' : undefined,
+            marginLeft: indent,
+            marginRight: iconGap
+          },
+          onClick: clickArea === 'icon' ? onClick : undefined
+        }), content);
+      };
+
+      var getCellProps = function getCellProps(value, record, rowIndex) {
+        var prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);
+
+        if (record[treeMetaKey] == null) {
+          // 没有 treeMeta 信息的话，就返回原先的 cellProps
+          return prevProps;
+        }
+
+        var _record$treeMetaKey2 = record[treeMetaKey],
+            isLeaf = _record$treeMetaKey2.isLeaf,
+            rowKey = _record$treeMetaKey2.rowKey;
+
+        if (isLeaf) {
+          return prevProps;
+        }
+
+        return mergeCellProps(prevProps, {
+          onClick: function onClick(e) {
+            if (stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            toggle(rowKey);
+          },
+          style: {
+            cursor: 'pointer'
+          }
+        });
+      };
+
+      return _concatInstanceProperty(_context2 = [_extends(_extends({}, firstCol), {
+        title: /*#__PURE__*/React.createElement("span", {
+          style: {
+            marginLeft: iconIndent + iconWidth + iconGap
+          }
+        }, internals.safeRenderHeader(firstCol)),
+        render: render,
+        getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps
+      })]).call(_context2, _toConsumableArray(others));
+    }
+  };
+}