@kdcloudjs/table 1.0.0

package/es/table/pipeline/features/treeSelect.d.ts

@@ -0,0 +1,38 @@
+import { ArtColumn } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface TreeSelectFeatureOptions {
+    /** 完整的树 */
+    tree: any[];
+    /** 虚拟的根节点值；该参数非空时，treeSelect 将会在 tree 参数之上再添加一个父节点 */
+    rootKey?: string;
+    /** 父子节点选中状态是否不再关联。设置为 true 之后，父节点和子节点的 value 独立管理，不再联动 */
+    checkStrictly?: boolean;
+    /**
+     * 定义选中时回填的方式，可选值:
+     * - 'all'(返回所有选中的节点)
+     * - 'parent'(父子节点都选中时只返回父节点)
+     * - 'child'(父子节点都选中时只返回子节点)
+     */
+    checkedStrategy?: 'all' | 'parent' | 'child';
+    /** 复选框所在列的位置 */
+    checkboxPlacement?: 'start' | 'end';
+    /** 复选框所在列的 column 配置，可指定 width，lock, title, align, features 等属性 */
+    checkboxColumn?: Partial<ArtColumn>;
+    /** 受控用法：当前选中的值 */
+    value?: string[];
+    /** 非受控用法：默认选中的值 */
+    defaultValue?: string[];
+    /** 受控用法：状态改变回调 */
+    onChange?(nextValue: string[]): void;
+    /** 点击事件的响应区域 */
+    clickArea?: 'checkbox' | 'cell' | 'row';
+    /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+    /** 被选中时是否高亮整行 */
+    highlightRowWhenSelected?: boolean;
+    /** 是否禁用该节点的交互 */
+    isDisabled?(row: any): boolean;
+    /** 是否让该节点对应的子树 与其父节点脱离联动 */
+    idDetached?(row: any): boolean;
+}
+export declare function treeSelect(opts: TreeSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import React from 'react';
+import { always } from '../../utils/others';
+import StrictTreeDataHelper from '../../utils/tree-data-helpers/StrictTreeDataHelper';
+import TreeDataHelper from '../../utils/tree-data-helpers/TreeDataHelper';
+var STATE_KEY = 'treeSelect';
+export function treeSelect(opts) {
+  return function treeSelectStep(pipeline) {
+    var _ref, _context;
+
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+
+    var Checkbox = pipeline.ctx.components.Checkbox;
+
+    if (Checkbox == null) {
+      throw new Error('使用 treeSelect 之前需要通过 pipeline context 设置 components.Checkbox');
+    }
+
+    var primaryKey = pipeline.ensurePrimaryKey('treeSelect');
+
+    if (typeof primaryKey !== 'string') {
+      throw new Error('treeSelect 仅支持字符串作为 primaryKey');
+    }
+
+    var clickArea = (_a = opts.clickArea) !== null && _a !== void 0 ? _a : 'checkbox';
+    var isDisabled = (_b = opts.isDisabled) !== null && _b !== void 0 ? _b : always(false);
+    var isDetached = (_c = opts.idDetached) !== null && _c !== void 0 ? _c : always(false);
+    var value = (_f = (_e = (_d = opts.value) !== null && _d !== void 0 ? _d : pipeline.getStateAtKey(STATE_KEY)) !== null && _e !== void 0 ? _e : opts.defaultValue) !== null && _f !== void 0 ? _f : [];
+    var tree = opts.rootKey != null ? [(_ref = {}, _defineProperty(_ref, primaryKey, opts.rootKey), _defineProperty(_ref, "children", opts.tree), _ref)] : opts.tree;
+
+    var getNodeValue = function getNodeValue(node) {
+      return node[primaryKey];
+    };
+
+    var treeDataHelper = opts.checkStrictly ? new StrictTreeDataHelper({
+      value: value,
+      getNodeValue: getNodeValue,
+      tree: tree
+    }) : new TreeDataHelper({
+      value: value,
+      getNodeValue: getNodeValue,
+      isDetached: isDetached,
+      tree: tree,
+      checkedStrategy: (_g = opts.checkedStrategy) !== null && _g !== void 0 ? _g : 'parent'
+    });
+
+    var onToggleKey = function onToggleKey(key) {
+      var _a;
+
+      var nextValue = treeDataHelper.getValueAfterToggle(key);
+      pipeline.setStateAtKey(STATE_KEY, nextValue);
+      (_a = opts.onChange) === null || _a === void 0 ? void 0 : _a.call(opts, nextValue);
+    };
+
+    var makeCheckbox = function makeCheckbox(key, root, row) {
+      return /*#__PURE__*/React.createElement(Checkbox, {
+        checked: treeDataHelper.isChecked(key),
+        indeterminate: treeDataHelper.isIndeterminate(key),
+        disabled: !root && isDisabled(row),
+        onChange: clickArea === 'checkbox' || root ? function () {
+          return onToggleKey(key);
+        } : undefined
+      });
+    };
+
+    var checkboxColumn = _extends(_extends({
+      name: '',
+      width: 50,
+      align: 'center',
+      title: opts.rootKey != null ? makeCheckbox(opts.rootKey, true) : undefined
+    }, opts.checkboxColumn), {
+      render: function render(value, record) {
+        return makeCheckbox(record[primaryKey], false, record);
+      },
+      getCellProps: function getCellProps(value, row) {
+        var rowKey = row[primaryKey];
+
+        if (clickArea !== 'cell') {
+          return;
+        }
+
+        var disabled = isDisabled(row);
+
+        if (disabled) {
+          return {
+            style: {
+              cursor: 'not-allowed'
+            }
+          };
+        }
+
+        return {
+          style: {
+            cursor: 'pointer'
+          },
+          onClick: function onClick(e) {
+            if (opts.stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            onToggleKey(rowKey);
+          }
+        };
+      }
+    });
+
+    var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
+
+    var checkboxPlacement = (_h = opts.checkboxPlacement) !== null && _h !== void 0 ? _h : 'start';
+
+    if (checkboxPlacement === 'start') {
+      nextColumns.unshift(checkboxColumn);
+    } else {
+      nextColumns.push(checkboxColumn);
+    }
+
+    pipeline.columns(nextColumns);
+
+    if (clickArea === 'row') {
+      pipeline.appendRowPropsGetter(function (row) {
+        var disabled = isDisabled(row);
+
+        if (!disabled) {
+          return {
+            style: {
+              cursor: 'pointer'
+            },
+            onClick: function onClick(e) {
+              if (opts.stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              onToggleKey(row[primaryKey]);
+            }
+          };
+        }
+      });
+    }
+
+    if (opts.highlightRowWhenSelected) {
+      pipeline.appendRowPropsGetter(function (row) {
+        if (treeDataHelper.isChecked(row[primaryKey])) {
+          return {
+            className: 'highlight'
+          };
+        }
+      });
+    }
+
+    return pipeline;
+  };
+}

package/es/table/pipeline/index.d.ts

@@ -0,0 +1,3 @@
+import * as features from './features';
+export { TablePipeline, useTablePipeline } from './pipeline';
+export { features };

package/es/table/pipeline/index.js

@@ -0,0 +1,3 @@
+import * as features from './features';
+export { TablePipeline, useTablePipeline } from './pipeline';
+export { features };

package/es/table/pipeline/pipeline.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import { TableProps, PrimaryKey } from '../base';
+import { ArtColumn, TableTransform, Transform } from '../interfaces';
+declare type RowPropsGetter = TableProps['getRowProps'];
+export interface TablePipelineIndentsConfig {
+    iconIndent: number;
+    iconWidth: 16;
+    iconGap: number;
+    indentSize: number;
+}
+export interface TablePipelineCtx {
+    primaryKey?: PrimaryKey;
+    components: {
+        [name: string]: any;
+    };
+    indents: TablePipelineIndentsConfig;
+    [key: string]: any;
+}
+/**
+ * 表格数据处理流水线。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 来读取保存的状态
+ * */
+export declare class TablePipeline {
+    ref?: React.MutableRefObject<any>;
+    private readonly _snapshots;
+    private readonly _rowPropsGetters;
+    private _tableProps;
+    private _dataSource;
+    private _columns;
+    static defaultIndents: TablePipelineIndentsConfig;
+    readonly ctx: TablePipelineCtx;
+    private readonly state;
+    private readonly setState;
+    constructor({ state, setState, ctx, ref }: {
+        state: any;
+        setState: TablePipeline['setState'];
+        ctx: Partial<TablePipelineCtx>;
+        ref?: React.MutableRefObject<any>;
+    });
+    guid(): string;
+    appendRowPropsGetter(getter: RowPropsGetter): this;
+    addTableProps(props: React.HTMLAttributes<HTMLTableElement>): void;
+    getDataSource(name?: string): any[];
+    getColumns(name?: string): any[];
+    getStateAtKey<T = any>(stateKey: string, defaultValue?: T): T;
+    /** 将 stateKey 对应的状态设置为 partialState  */
+    setStateAtKey(stateKey: string, partialState: any, extraInfo?: any): void;
+    /** 确保 primaryKey 已被设置，并返回 primaryKey  */
+    ensurePrimaryKey(hint?: string): PrimaryKey;
+    /** 设置流水线的输入数据 */
+    input(input: {
+        dataSource: any[];
+        columns: ArtColumn[];
+    }): this;
+    /** 设置 dataSource */
+    dataSource(rows: any[]): this;
+    /** 设置 columns */
+    columns(cols: ArtColumn[]): this;
+    /** 设置主键 */
+    primaryKey(key: PrimaryKey): this;
+    /** 保存快照 */
+    snapshot(name: string): this;
+    /** @deprecated
+     *  应用一个 kd-table Table transform */
+    useTransform(transform: TableTransform): this;
+    /** 使用 pipeline 功能拓展 */
+    use(step: (pipeline: this) => this): this;
+    /** 转换 dataSource */
+    mapDataSource(mapper: Transform<any[]>): this;
+    /** 转换 columns */
+    mapColumns(mapper: Transform<ArtColumn[]>): this;
+    /** 获取 BaseTable 的 props，结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
+    getProps(this: TablePipeline): TableProps;
+}
+export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
+export {};

package/es/table/pipeline/pipeline.js

@@ -0,0 +1,272 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import { useState, useRef } from 'react';
+import { mergeCellProps } from '../utils';
+import { autoFillTableWidth, tableWidthKey } from './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 来读取保存的状态
+ * */
+
+export var TablePipeline = /*#__PURE__*/function () {
+  function TablePipeline(_ref) {
+    var state = _ref.state,
+        setState = _ref.setState,
+        ctx = _ref.ctx,
+        ref = _ref.ref;
+
+    _classCallCheck(this, TablePipeline);
+
+    this._snapshots = {};
+    this._rowPropsGetters = [];
+    this._tableProps = {};
+    this.ctx = {
+      components: {},
+      indents: TablePipeline.defaultIndents
+    };
+    this.state = state;
+    this.setState = setState;
+    this.ref = ref;
+
+    _extends(this.ctx, ctx);
+  } // Generate a pseudo-GUID by concatenating random hexadecimal.
+
+
+  _createClass(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 = _extends(_extends({}, 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 _extends(_extends({}, prev), _defineProperty({}, 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 = _mapInstanceProperty(_context = _input.columns).call(_context, function (col) {
+        return _extends(_extends({}, 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: _sliceInstanceProperty(_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(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 _reduceInstanceProperty(_context3 = _this2._rowPropsGetters).call(_context3, function (res, get) {
+            return mergeCellProps(res, get(row, rowIndex));
+          }, {});
+        };
+      }
+
+      result.getTableProps = function () {
+        return _this2._tableProps;
+      };
+
+      result.setTableWidth = function (tableWidth) {
+        var preTableWidth = _this2.getStateAtKey(tableWidthKey);
+
+        if (preTableWidth !== tableWidth) {
+          _this2.setStateAtKey(tableWidthKey, tableWidth);
+        }
+      };
+
+      return result;
+    }
+  }]);
+
+  return TablePipeline;
+}();
+TablePipeline.defaultIndents = {
+  iconIndent: -8,
+  iconWidth: 16,
+  iconGap: 0,
+  indentSize: 16
+};
+export function useTablePipeline(ctx) {
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var ref = useRef({});
+  return new TablePipeline({
+    state: state,
+    setState: setState,
+    ctx: ctx,
+    ref: ref
+  });
+}

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