@kdcloudjs/table 1.0.0

package/lib/table/pipeline/pipeline.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTablePipeline = useTablePipeline;
+exports.TablePipeline = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _react = require("react");
+
+var _utils = require("../utils");
+
+var _autoFill = require("./features/autoFill");
+
+/**
+ * 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法，包括……
+ *
+ * 1. ctx：上下文环境对象，step（流水线上的一步）可以对 ctx 中的字段进行读写。
+ * ctx 中部分字段名称有特定的含义（例如 primaryKey 表示行的主键），使用自定义的上下文信息时注意避开这些名称。
+ *
+ * 2. rowPropsGetters：getRowProps 回调队列，step 可以通过 pipeline.appendRowPropsGetter 向队列中追加回调函数，
+ *   在调用 pipeline.props() 队列中的所有函数会组合形成最终的 getRowProps
+ *
+ * 3. 当前流水线的状态，包括 dataSource, columns, rowPropsGetters 三个部分
+ *
+ * 4. snapshots，调用 pipeline.snapshot(name) 可以记录当前的状态，后续可以通过 name 来读取保存的状态
+ * */
+var TablePipeline = /*#__PURE__*/function () {
+  function TablePipeline(_ref) {
+    var state = _ref.state,
+        setState = _ref.setState,
+        ctx = _ref.ctx,
+        ref = _ref.ref;
+    (0, _classCallCheck2.default)(this, TablePipeline);
+    this._snapshots = {};
+    this._rowPropsGetters = [];
+    this._tableProps = {};
+    this.ctx = {
+      components: {},
+      indents: TablePipeline.defaultIndents
+    };
+    this.state = state;
+    this.setState = setState;
+    this.ref = ref;
+    (0, _extends3.default)(this.ctx, ctx);
+  } // Generate a pseudo-GUID by concatenating random hexadecimal.
+
+
+  (0, _createClass2.default)(TablePipeline, [{
+    key: "guid",
+    value: function guid() {
+      function S4() {
+        return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+      }
+
+      return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
+    }
+  }, {
+    key: "appendRowPropsGetter",
+    value: function appendRowPropsGetter(getter) {
+      this._rowPropsGetters.push(getter);
+
+      return this;
+    }
+  }, {
+    key: "addTableProps",
+    value: function addTableProps(props) {
+      this._tableProps = (0, _extends3.default)((0, _extends3.default)({}, this._tableProps), props);
+    }
+  }, {
+    key: "getDataSource",
+    value: function getDataSource(name) {
+      if (name == null) {
+        return this._dataSource;
+      } else {
+        return this._snapshots[name].dataSource;
+      }
+    }
+  }, {
+    key: "getColumns",
+    value: function getColumns(name) {
+      if (name == null) {
+        return this._columns;
+      } else {
+        return this._snapshots[name].columns;
+      }
+    }
+  }, {
+    key: "getStateAtKey",
+    value: function getStateAtKey(stateKey, defaultValue) {
+      var _a;
+
+      return (_a = this.state[stateKey]) !== null && _a !== void 0 ? _a : defaultValue;
+    }
+    /** 将 stateKey 对应的状态设置为 partialState  */
+
+  }, {
+    key: "setStateAtKey",
+    value: function setStateAtKey(stateKey, partialState, extraInfo) {
+      this.setState(function (prev) {
+        return (0, _extends3.default)((0, _extends3.default)({}, prev), (0, _defineProperty2.default)({}, stateKey, partialState));
+      }, stateKey, partialState, extraInfo);
+    }
+    /** 确保 primaryKey 已被设置，并返回 primaryKey  */
+
+  }, {
+    key: "ensurePrimaryKey",
+    value: function ensurePrimaryKey(hint) {
+      if (this.ctx.primaryKey == null) {
+        throw new Error(hint ? "\u4F7F\u7528 ".concat(hint, " \u4E4B\u524D\u5FC5\u987B\u5148\u8BBE\u7F6E primaryKey") : '必须先设置 primaryKey');
+      }
+
+      return this.ctx.primaryKey;
+    }
+    /** 设置流水线的输入数据 */
+
+  }, {
+    key: "input",
+    value: function input(_input) {
+      var _context,
+          _this = this;
+
+      if (this._dataSource != null || this._columns != null) {
+        throw new Error('input 不能调用两次');
+      }
+
+      this._dataSource = _input.dataSource;
+      this._columns = (0, _map.default)(_context = _input.columns).call(_context, function (col) {
+        return (0, _extends3.default)((0, _extends3.default)({}, col), {
+          key: _this.guid()
+        });
+      });
+      this.snapshot('input');
+      return this;
+    }
+    /** 设置 dataSource */
+
+  }, {
+    key: "dataSource",
+    value: function dataSource(rows) {
+      this._dataSource = rows;
+      return this;
+    }
+    /** 设置 columns */
+
+  }, {
+    key: "columns",
+    value: function columns(cols) {
+      this._columns = cols;
+      return this;
+    }
+    /** 设置主键 */
+
+  }, {
+    key: "primaryKey",
+    value: function primaryKey(key) {
+      this.ctx.primaryKey = key;
+      return this;
+    }
+    /** 保存快照 */
+
+  }, {
+    key: "snapshot",
+    value: function snapshot(name) {
+      var _context2;
+
+      this._snapshots[name] = {
+        dataSource: this._dataSource,
+        columns: this._columns,
+        rowPropsGetters: (0, _slice.default)(_context2 = this._rowPropsGetters).call(_context2)
+      };
+      return this;
+    }
+    /** @deprecated
+     *  应用一个 kd-table Table transform */
+
+  }, {
+    key: "useTransform",
+    value: function useTransform(transform) {
+      var next = transform({
+        dataSource: this.getDataSource(),
+        columns: this.getColumns()
+      });
+      return this.dataSource(next.dataSource).columns(next.columns);
+    }
+    /** 使用 pipeline 功能拓展 */
+
+  }, {
+    key: "use",
+    value: function use(step) {
+      return step(this);
+    }
+    /** 转换 dataSource */
+
+  }, {
+    key: "mapDataSource",
+    value: function mapDataSource(mapper) {
+      return this.dataSource(mapper(this.getDataSource()));
+    }
+    /** 转换 columns */
+
+  }, {
+    key: "mapColumns",
+    value: function mapColumns(mapper) {
+      return this.columns(mapper(this.getColumns()));
+    }
+    /** 获取 BaseTable 的 props，结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
+
+  }, {
+    key: "getProps",
+    value: function getProps() {
+      var _this2 = this;
+
+      this.use((0, _autoFill.autoFillTableWidth)());
+      var result = {
+        dataSource: this._dataSource,
+        columns: this._columns
+      };
+
+      if (this.ctx.primaryKey) {
+        result.primaryKey = this.ctx.primaryKey;
+      }
+
+      if (this._rowPropsGetters.length > 0) {
+        result.getRowProps = function (row, rowIndex) {
+          var _context3;
+
+          return (0, _reduce.default)(_context3 = _this2._rowPropsGetters).call(_context3, function (res, get) {
+            return (0, _utils.mergeCellProps)(res, get(row, rowIndex));
+          }, {});
+        };
+      }
+
+      result.getTableProps = function () {
+        return _this2._tableProps;
+      };
+
+      result.setTableWidth = function (tableWidth) {
+        var preTableWidth = _this2.getStateAtKey(_autoFill.tableWidthKey);
+
+        if (preTableWidth !== tableWidth) {
+          _this2.setStateAtKey(_autoFill.tableWidthKey, tableWidth);
+        }
+      };
+
+      return result;
+    }
+  }]);
+  return TablePipeline;
+}();
+
+exports.TablePipeline = TablePipeline;
+TablePipeline.defaultIndents = {
+  iconIndent: -8,
+  iconWidth: 16,
+  iconGap: 0,
+  indentSize: 16
+};
+
+function useTablePipeline(ctx) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var ref = (0, _react.useRef)({});
+  return new TablePipeline({
+    state: state,
+    setState: setState,
+    ctx: ctx,
+    ref: ref
+  });
+}

package/lib/table/pivot/cross-table/buildCrossTable.d.ts

@@ -0,0 +1,14 @@
+import { TableProps } from '../../base';
+import { CrossTableProps } from './cross-table';
+import { CrossTableLeftMetaColumn, LeftCrossTreeNode, TopCrossTreeNode } from './interfaces';
+export interface BuildCrossTableOptions {
+    leftTree: LeftCrossTreeNode[];
+    topTree: TopCrossTreeNode[];
+    leftTotalNode?: LeftCrossTreeNode;
+    topTotalNode?: TopCrossTreeNode;
+    leftMetaColumns: CrossTableLeftMetaColumn[];
+    getValue: CrossTableProps['getValue'];
+    render?: CrossTableProps['render'];
+    getCellProps?: CrossTableProps['getCellProps'];
+}
+export default function buildCrossTable(options: BuildCrossTableOptions): Pick<TableProps, 'columns' | 'dataSource'>;

package/lib/table/pivot/cross-table/buildCrossTable.js

@@ -0,0 +1,313 @@
+"use strict";
+
+var _sliceInstanceProperty = 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.default = buildCrossTable;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _utils = require("../../utils");
+
+var _constants = require("./constants");
+
+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; }
+
+var __rest = void 0 && (void 0).__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];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(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;
+};
+
+function buildCrossTable(options) {
+  var _a, _b, _c;
+
+  var leftTotalNode = options.leftTotalNode,
+      topTotalNode = options.topTotalNode; // 有的时候 leftTree/topTree 是通过 node.children 传入的
+  // 此时 leftTree/topTree 等于 null 和等于空数组是等价的
+  // 故在这里兼容 leftTree/topTree 为空的情况
+
+  var leftTree = (_a = options.leftTree) !== null && _a !== void 0 ? _a : [];
+  var topTree = (_b = options.topTree) !== null && _b !== void 0 ? _b : [];
+  var leftMetaColumns = (_c = options.leftMetaColumns) !== null && _c !== void 0 ? _c : [];
+  var leftHeaderWidth = Math.max(leftMetaColumns.length, (0, _utils.getTreeDepth)(leftTree) + 1);
+  return {
+    columns: getColumns(),
+    dataSource: getDataSource()
+  };
+  /** 获取表格的列配置 */
+
+  function getColumns() {
+    var _context;
+
+    return (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(getLeftPartColumns()), (0, _toConsumableArray2.default)(getDataPartColumns()));
+
+    function getLeftPartColumns() {
+      var _a;
+
+      var leftPartColumns = [];
+
+      for (var index = 0; index < leftHeaderWidth; index++) {
+        var metaCol = (_a = leftMetaColumns[index]) !== null && _a !== void 0 ? _a : {};
+
+        var getCellProps = metaCol.getCellProps,
+            render = metaCol.render,
+            staticMetaColConfig = __rest(metaCol, ["getCellProps", "render"]);
+
+        leftPartColumns.push((0, _extends2.default)((0, _extends2.default)({
+          columnType: 'left',
+          lock: true
+        }, staticMetaColConfig), {
+          getCellProps: leftHeaderGetCellPropsFactory(metaCol, index),
+          getSpanRect: leftHeaderGetSpanRectFactory(metaCol, index),
+          getValue: leftHeaderGetValueFactory(metaCol, index),
+          render: leftHeaderRenderFactory(metaCol, index)
+        }));
+      }
+
+      return leftPartColumns;
+
+      function leftHeaderGetCellPropsFactory(metaCol, colIndex) {
+        return function (_value, row, rowIndex) {
+          var _a;
+
+          var node = row.nodes[colIndex];
+          return (_a = metaCol.getCellProps) === null || _a === void 0 ? void 0 : _a.call(metaCol, node, colIndex);
+        };
+      }
+
+      function leftHeaderGetSpanRectFactory(metaCol, colIndex) {
+        return function (_value, row) {
+          return row.rects[colIndex];
+        };
+      }
+
+      function leftHeaderGetValueFactory(metaCol, colIndex) {
+        return function (row, rowIndex) {
+          var node = row.nodes[colIndex];
+          return node.value;
+        };
+      }
+
+      function leftHeaderRenderFactory(metaCol, colIndex) {
+        return function (v, row, rowIndex) {
+          var _a;
+
+          var node = row.nodes[colIndex];
+
+          if (metaCol.render) {
+            return metaCol.render(node, colIndex);
+          }
+
+          return (_a = node.title) !== null && _a !== void 0 ? _a : node.value;
+        };
+      }
+    }
+    /** 获取表格数据部分的列配置 */
+
+
+    function getDataPartColumns() {
+      if (topTree.length > 0) {
+        return dfs(topTree, {
+          valuePath: [],
+          depth: 0
+        });
+      } else if (topTotalNode) {
+        return dfs([topTotalNode], {
+          valuePath: [],
+          depth: 0
+        });
+      } else {
+        return [];
+      }
+
+      function dfs(nodes, ctx) {
+        var result = [];
+
+        var _iterator = _createForOfIteratorHelper(nodes),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var node = _step.value;
+            ctx.valuePath.push(node.value);
+
+            if ((0, _utils.isLeafNode)(node)) {
+              // 叶子节点
+              result.push(getDataColumn(node, ctx.depth));
+            } else {
+              var key = node.key,
+                  value = node.value,
+                  children = node.children,
+                  others = __rest(node // 强制展开的节点
+              , ["key", "value", "children"]); // 强制展开的节点
+
+
+              result.push((0, _extends2.default)((0, _extends2.default)({
+                columnType: 'data-parent'
+              }, others), {
+                name: value,
+                children: dfs(children, {
+                  valuePath: ctx.valuePath,
+                  depth: ctx.depth + 1
+                })
+              }));
+            }
+
+            ctx.valuePath.pop();
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        return result;
+      }
+    }
+
+    function getDataColumn(topNode, topDepth) {
+      var columnGetValue = function columnGetValue(row) {
+        var leftDepth = row.nodes.length - 1;
+        var leftNode = row.nodes[leftDepth];
+        return options.getValue(leftNode, topNode, leftDepth, topDepth);
+      };
+
+      var key = topNode.key,
+          value = topNode.value,
+          children = topNode.children,
+          others = __rest(topNode, ["key", "value", "children"]);
+
+      return (0, _extends2.default)((0, _extends2.default)({
+        columnType: 'data'
+      }, others), {
+        getValue: columnGetValue,
+        name: value,
+        children: null,
+        render: function render(value, row) {
+          if (options.render) {
+            var leftDepth = row.nodes.length - 1;
+            var leftNode = row.nodes[leftDepth];
+            return options.render(value, leftNode, topNode, leftDepth, topDepth);
+          }
+
+          return value;
+        },
+        getCellProps: function getCellProps(value, row) {
+          if (options.getCellProps) {
+            var leftDepth = row.nodes.length - 1;
+            var leftNode = row.nodes[leftDepth];
+            return options.getCellProps(value, leftNode, topNode, leftDepth, topDepth);
+          }
+        }
+      });
+    }
+  }
+
+  function getDataSource() {
+    var flatRows = [];
+    var ctx = {
+      depth: 0,
+      nodes: [],
+      rects: [],
+      rowIndex: 0
+    };
+
+    if (leftTree.length > 0) {
+      dfs(leftTree, ctx);
+    } else if (leftTotalNode) {
+      dfs([leftTotalNode], ctx);
+    } // else 表格没有行，展示空表格
+
+
+    return flatRows;
+
+    function dfs(nodes, ctx) {
+      var count = 0;
+
+      var _iterator2 = _createForOfIteratorHelper(nodes),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _context2, _context3, _row;
+
+          var node = _step2.value;
+
+          if (node.hidden) {
+            // 跳过被隐藏的节点
+            continue;
+          }
+
+          var rect = {
+            top: ctx.rowIndex + count,
+            bottom: -1,
+            left: ctx.depth,
+            right: -1
+          };
+          var row = (_row = {}, (0, _defineProperty2.default)(_row, _constants.ROW_KEY, node.key), (0, _defineProperty2.default)(_row, "rects", (0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(ctx.rects), [rect])), (0, _defineProperty2.default)(_row, "nodes", (0, _concat.default)(_context3 = []).call(_context3, (0, _toConsumableArray2.default)(ctx.nodes), [node])), _row);
+
+          if ((0, _utils.isLeafNode)(node)) {
+            rect.right = leftHeaderWidth;
+            rect.bottom = rect.top + 1;
+            flatRows.push(row);
+            count += 1;
+          } else {
+            ctx.rects.push(rect);
+            ctx.nodes.push(node);
+            var ret = dfs(node.children, {
+              nodes: ctx.nodes,
+              rects: ctx.rects,
+              depth: ctx.depth + 1,
+              rowIndex: ctx.rowIndex + count
+            });
+            ctx.rects.pop();
+            ctx.nodes.pop();
+            count += ret.count;
+            rect.right = rect.left + 1;
+            rect.bottom = rect.top + ret.count;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+
+      return {
+        count: count
+      };
+    }
+  }
+}

package/lib/table/pivot/cross-table/constants.d.ts

@@ -0,0 +1 @@
+export declare const ROW_KEY = "rowKey";

package/lib/table/pivot/cross-table/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ROW_KEY = void 0;
+var ROW_KEY = 'rowKey';
+exports.ROW_KEY = ROW_KEY;

package/lib/table/pivot/cross-table/cross-table.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Table, TableProps } from '../../base';
+import { CellProps } from '../../interfaces';
+import { CrossTableLeftMetaColumn, LeftCrossTreeNode, TopCrossTreeNode } from './interfaces';
+export interface CrossTableProps extends Omit<TableProps, 'dataSource' | 'columns' | 'primaryKey'> {
+    BaseTableComponent?: any;
+    baseTableRef?: React.Ref<Table>;
+    leftTree: LeftCrossTreeNode[];
+    topTree: TopCrossTreeNode[];
+    leftTotalNode?: LeftCrossTreeNode;
+    topTotalNode?: TopCrossTreeNode;
+    leftMetaColumns?: CrossTableLeftMetaColumn[];
+    getValue(leftNode: LeftCrossTreeNode, topNode: TopCrossTreeNode, leftDepth: number, topDepth: number): any;
+    render?(value: any, leftNode: LeftCrossTreeNode, topNode: TopCrossTreeNode, leftDepth: number, topDepth: number): React.ReactNode;
+    getCellProps?(value: any, leftNode: LeftCrossTreeNode, topNode: TopCrossTreeNode, leftDepth: number, topDepth: number): CellProps;
+}
+declare const _default: ({ BaseTableComponent, leftTree, leftTotalNode, topTree, topTotalNode, getValue, getCellProps, leftMetaColumns, render, baseTableRef, ...others }: CrossTableProps) => JSX.Element;
+export default _default;