@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+import { TablePipeline } from '../pipeline';
+interface expandIconProps extends React.SVGProps<SVGElement> {
+    expanded: boolean;
+}
+export interface RowDetailFeatureOptions {
+    /** 非受控用法：是否默认展开所有详情单元格 */
+    defaultOpenAll?: boolean;
+    /** 非受控用法：默认展开的 keys */
+    defaultOpenKeys?: string[];
+    /** 受控用法：当前展开的 keys */
+    openKeys?: string[];
+    /** 受控用法：openKeys 改变的回调 */
+    onChangeOpenKeys?(nextKeys: string[], key: string, action: 'expand' | 'collapse'): void;
+    /** 详情单元格的渲染方法 */
+    renderDetail?(row: any, rowIndex: number): ReactNode;
+    /** 是否包含详情单元格 */
+    hasDetail?(row: any, rowIndex: number): ReactNode;
+    /** 获取详情单元格所在行的 key，默认为 `(row) => row[primaryKey] + '_detail'` */
+    getDetailKey?(row: any, rowIndex: number): string;
+    /** 详情单元格 td 的额外样式 */
+    detailCellStyle?: React.CSSProperties;
+    /** 点击事件的响应区域 */
+    clickArea?: 'cell' | 'content' | 'icon';
+    /** 是否对触发展开/收拢的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+    /** 指定表格每一行元信息的记录字段 */
+    rowDetailMetaKey?: string | symbol;
+    /** 指定在哪一列设置展开按钮 */
+    expandColumnCode?: string;
+    /** 自定义展开图标 */
+    expandIcon?: (props: expandIconProps) => JSX.Element;
+}
+export declare function rowDetail(opts?: RowDetailFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};

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

@@ -0,0 +1,283 @@
+"use strict";
+
+var _flatMapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/flat-map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rowDetail = rowDetail;
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends4 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+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 _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _commonViews = require("../../common-views");
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _others = require("../../utils/others");
+
+var _console = _interopRequireDefault(require("../../utils/console"));
+
+var rowDetailSymbol = (0, _symbol.default)('row-detail');
+
+var fallbackRenderDetail = function fallbackRenderDetail() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: '8px 24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("b", {
+    style: {
+      color: 'indianred'
+    }
+  }, "\u8BBE\u7F6E ", /*#__PURE__*/_react.default.createElement("code", null, "rowDetail.renderDetail"), " \u6765\u81EA\u5B9A\u4E49\u8BE6\u60C5\u5185\u5BB9"));
+};
+
+function rowDetail() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function rowDetailStep(pipeline) {
+    var _context, _context2;
+
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+
+    var stateKey = 'rowDetail';
+    var primaryKey = pipeline.ensurePrimaryKey('rowDetail');
+
+    if (typeof primaryKey !== 'string') {
+      throw new Error('rowDetail 仅支持字符串作为 primaryKey');
+    }
+
+    var rowDetailMetaKey = (_a = opts.rowDetailMetaKey) !== null && _a !== void 0 ? _a : rowDetailSymbol;
+    var indents = pipeline.ctx.indents;
+    var textOffset = indents.iconIndent + indents.iconWidth + indents.iconGap;
+    var clickArea = (_b = opts.clickArea) !== null && _b !== void 0 ? _b : 'cell';
+    var getDetailKey = (_c = opts.getDetailKey) !== null && _c !== void 0 ? _c : function (row) {
+      return row[primaryKey] + '_detail';
+    };
+    var renderDetail = (_d = opts.renderDetail) !== null && _d !== void 0 ? _d : fallbackRenderDetail;
+    var hasDetail = (_e = opts.hasDetail) !== null && _e !== void 0 ? _e : (0, _others.always)(true);
+    var openKeys = (_h = (_g = (_f = opts.openKeys) !== null && _f !== void 0 ? _f : pipeline.getStateAtKey(stateKey)) !== null && _g !== void 0 ? _g : opts.defaultOpenAll ? (0, _map.default)(_context = (0, _filter.default)(_context2 = pipeline.getDataSource()).call(_context2, hasDetail)).call(_context, function (row) {
+      return row[primaryKey];
+    }) : opts.defaultOpenKeys) !== null && _h !== void 0 ? _h : [];
+
+    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 openKeySet = new _set.default(openKeys);
+
+    var toggle = function toggle(rowKey) {
+      var expanded = openKeySet.has(rowKey);
+
+      if (expanded) {
+        onChangeOpenKeys((0, _filter.default)(openKeys).call(openKeys, function (key) {
+          return key !== rowKey;
+        }), rowKey, 'collapse');
+      } else {
+        var _context3;
+
+        onChangeOpenKeys((0, _concat.default)(_context3 = []).call(_context3, (0, _toConsumableArray2.default)(openKeys), [rowKey]), rowKey, 'expand');
+      }
+    };
+
+    return pipeline.dataSource((0, _flatMapInstanceProperty(_others))(pipeline.getDataSource(), function (row, rowIndex) {
+      if (openKeySet.has(row[primaryKey])) {
+        return [row, (0, _extends4.default)((0, _extends4.default)((0, _defineProperty2.default)({}, rowDetailMetaKey, true), row), (0, _defineProperty2.default)({}, primaryKey, getDetailKey(row, rowIndex)))];
+      } else {
+        return [row];
+      }
+    })).columns(processColumns(pipeline.getColumns())).appendRowPropsGetter(function (row) {
+      if (row[rowDetailMetaKey]) {
+        return {
+          className: 'no-hover'
+        };
+      }
+    });
+
+    function processColumns(columns) {
+      if (columns.length === 0) {
+        return columns;
+      }
+
+      var expandColumnIndex = 0;
+
+      if (opts.expandColumnCode) {
+        expandColumnIndex = (0, _findIndex.default)(columns).call(columns, function (col) {
+          return col.code === opts.expandColumnCode;
+        });
+
+        if (expandColumnIndex < 0) {
+          _console.default.warn('没找到可展开的列，请检查设置的展开列code');
+
+          return columns;
+        }
+      }
+
+      var expandCol = columns[expandColumnIndex];
+      var tableColumns = (0, _toConsumableArray2.default)(columns);
+
+      var render = function render(value, row, rowIndex) {
+        if (row[rowDetailMetaKey]) {
+          return renderDetail(row, rowIndex);
+        }
+
+        var content = _internals.internals.safeRender(expandCol, row, rowIndex);
+
+        if (!hasDetail(row, rowIndex)) {
+          return /*#__PURE__*/_react.default.createElement(_commonViews.InlineFlexCell, {
+            style: {
+              marginLeft: textOffset
+            }
+          }, content);
+        }
+
+        var rowKey = row[primaryKey];
+        var expanded = openKeySet.has(rowKey);
+
+        var onClick = function onClick(e) {
+          if (opts.stopClickEventPropagation) {
+            e.stopPropagation();
+          }
+
+          toggle(rowKey);
+        };
+
+        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var ExpandIcon = opts.expandIcon;
+        return /*#__PURE__*/_react.default.createElement(_commonViews.ExpansionCell, {
+          className: (0, _classnames.default)('expansion-cell', expandCls),
+          style: {
+            cursor: clickArea === 'content' ? 'pointer' : undefined
+          },
+          onClick: clickArea === 'content' ? onClick : undefined
+        }, opts.expandIcon ? /*#__PURE__*/_react.default.createElement(ExpandIcon, {
+          expanded: expanded,
+          onClick: clickArea === 'icon' ? onClick : undefined
+        }) : /*#__PURE__*/_react.default.createElement(_commonViews.icons.CaretRight, {
+          style: {
+            cursor: clickArea === 'icon' ? 'pointer' : undefined,
+            marginLeft: indents.iconIndent,
+            marginRight: indents.iconGap
+          },
+          className: (0, _classnames.default)('expansion-icon', expandCls),
+          onClick: clickArea === 'icon' ? onClick : undefined
+        }), content);
+      };
+
+      var getCellProps = function getCellProps(value, row, rowIndex) {
+        var _a;
+
+        if (row[rowDetailMetaKey]) {
+          return {
+            style: (0, _extends4.default)({
+              '--cell-padding': '0',
+              overflow: 'hidden'
+            }, opts.detailCellStyle)
+          };
+        }
+
+        var prevProps = (_a = expandCol.getCellProps) === null || _a === void 0 ? void 0 : _a.call(expandCol, value, row, rowIndex);
+
+        if (!hasDetail(row, rowIndex)) {
+          return prevProps;
+        }
+
+        return (0, _utils.mergeCellProps)(prevProps, {
+          onClick: function onClick(e) {
+            if (opts.stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            toggle(row[primaryKey]);
+          },
+          style: {
+            cursor: 'pointer'
+          }
+        });
+      };
+
+      var _tableColumns = (0, _toArray2.default)(tableColumns),
+          firstCol = _tableColumns[0],
+          others = (0, _slice.default)(_tableColumns).call(_tableColumns, 1);
+
+      var firstColRender = function firstColRender(value, row, rowIndex) {
+        if (row[rowDetailMetaKey]) {
+          return renderDetail(row, rowIndex);
+        }
+
+        var content = _internals.internals.safeRender(firstCol, row, rowIndex);
+
+        return content;
+      };
+
+      tableColumns[0] = (0, _extends4.default)((0, _extends4.default)({}, firstCol), {
+        render: firstColRender,
+        getSpanRect: function getSpanRect(value, row, rowIndex) {
+          if (row[rowDetailMetaKey]) {
+            // detail 总是成一行
+            return {
+              top: rowIndex,
+              bottom: rowIndex + 1,
+              left: 0,
+              right: (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only').length
+            };
+          }
+        }
+      });
+      tableColumns[expandColumnIndex] = (0, _extends4.default)((0, _extends4.default)({}, expandCol), {
+        title: /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginLeft: textOffset
+          }
+        }, _internals.internals.safeRenderHeader(expandCol)),
+        render: render,
+        getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps,
+        getSpanRect: function getSpanRect(value, row, rowIndex) {
+          if (row[rowDetailMetaKey]) {
+            // detail 总是成一行
+            return {
+              top: rowIndex,
+              bottom: rowIndex + 1,
+              left: 0,
+              right: (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only').length
+            };
+          }
+        }
+      });
+      return tableColumns;
+    }
+  };
+}

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

@@ -0,0 +1,14 @@
+import { TablePipeline } from '../pipeline';
+export interface RowGroupingFeatureOptions {
+    /** 非受控用法：是否默认展开所有分组 */
+    defaultOpenAll?: boolean;
+    /** 非受控用法：默认展开的 keys */
+    defaultOpenKeys?: string[];
+    /** 受控用法：当前展开的 keys */
+    openKeys?: string[];
+    /** 受控用法：当前展开 keys 改变回调 */
+    onChangeOpenKeys?(nextKeys: string[], key: string, action: 'expand' | 'collapse'): void;
+    /** 是否对触发 onChangeOpenKeys 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+}
+export declare function rowGrouping(opts?: RowGroupingFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,227 @@
+"use strict";
+
+var _flatMapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/flat-map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rowGrouping = rowGrouping;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _commonViews = require("../../common-views");
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _others = require("../../utils/others");
+
+var groupingMetaSymbol = (0, _symbol.default)('row-grouping-meta');
+
+function attachGroupingMeta(row) {
+  return (0, _extends3.default)((0, _defineProperty2.default)({}, groupingMetaSymbol, {
+    expandable: !(0, _utils.isLeafNode)(row)
+  }), row);
+}
+
+function getGroupingMeta(row) {
+  if (row[groupingMetaSymbol] == null) {
+    return {
+      isGroupHeader: false,
+      expandable: false
+    };
+  }
+
+  return {
+    isGroupHeader: true,
+    expandable: row[groupingMetaSymbol].expandable
+  };
+}
+
+function rowGroupingRowPropsGetter(row) {
+  if (getGroupingMeta(row).isGroupHeader) {
+    return {
+      className: 'alternative'
+    };
+  }
+}
+
+function rowGrouping() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (pipeline) {
+    var _context;
+
+    var _a, _b, _c;
+
+    var stateKey = 'rowGrouping';
+    var indents = pipeline.ctx.indents;
+    var textOffset = indents.iconIndent + indents.iconWidth + indents.iconGap;
+    var primaryKey = pipeline.ensurePrimaryKey('rowGrouping');
+
+    if (typeof primaryKey !== 'string') {
+      throw new Error('rowGrouping 仅支持字符串作为 primaryKey');
+    }
+
+    var openKeys = (_c = (_b = (_a = opts.openKeys) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : opts.defaultOpenAll ? (0, _map.default)(_context = pipeline.getDataSource()).call(_context, function (row) {
+      return row[primaryKey];
+    }) : opts.defaultOpenKeys) !== null && _c !== void 0 ? _c : [];
+    var openKeySet = new _set.default(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
+      });
+    };
+
+    return pipeline.mapDataSource(processDataSource).mapColumns(processColumns).appendRowPropsGetter(rowGroupingRowPropsGetter);
+
+    function processDataSource(input) {
+      return (0, _flatMapInstanceProperty(_others))(input, function (row) {
+        var result = [attachGroupingMeta(row)];
+        var expanded = openKeySet.has(row[primaryKey]);
+
+        if (expanded) {
+          if (Array.isArray(row.children)) {
+            result = (0, _concat.default)(result).call(result, row.children);
+          }
+        }
+
+        return result;
+      });
+    }
+
+    function processColumns(columns) {
+      var _context3;
+
+      if (columns.length === 0) {
+        return columns;
+      }
+
+      var columnFlatCount = (0, _utils.collectNodes)(columns, 'leaf-only').length;
+
+      var _columns = (0, _toArray2.default)(columns),
+          firstCol = _columns[0],
+          others = (0, _slice.default)(_columns).call(_columns, 1);
+
+      var render = function render(value, row, rowIndex) {
+        var _a, _b;
+
+        var content = _internals.internals.safeRender(firstCol, row, rowIndex);
+
+        var meta = getGroupingMeta(row);
+
+        if (!meta.isGroupHeader || !meta.expandable) {
+          var marginLeft = textOffset + (meta.isGroupHeader ? 0 : indents.indentSize);
+          return /*#__PURE__*/_react.default.createElement(_commonViews.InlineFlexCell, {
+            style: {
+              marginLeft: marginLeft
+            }
+          }, meta.isGroupHeader ? (_a = row.groupTitle) !== null && _a !== void 0 ? _a : content : content);
+        }
+
+        var expanded = openKeySet.has(row[primaryKey]);
+        var expandCls = expanded ? 'expanded' : 'collapsed';
+        return /*#__PURE__*/_react.default.createElement(_commonViews.ExpansionCell, {
+          className: (0, _classnames.default)('expansion-cell', expandCls)
+        }, /*#__PURE__*/_react.default.createElement(_commonViews.icons.CaretRight, {
+          className: (0, _classnames.default)('expansion-icon', expandCls),
+          style: {
+            marginLeft: indents.iconIndent,
+            marginRight: indents.iconGap
+          }
+        }), (_b = row.groupTitle) !== null && _b !== void 0 ? _b : content);
+      };
+
+      var getCellProps = function getCellProps(value, row, rowIndex) {
+        var _a;
+
+        var meta = getGroupingMeta(row);
+
+        if (!meta.isGroupHeader) {
+          return;
+        }
+
+        var expandable = meta.expandable;
+        var rowKey = row[primaryKey];
+        var expanded = openKeySet.has(rowKey);
+        var onClick;
+
+        if (expandable) {
+          onClick = function onClick(e) {
+            if (opts.stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            if (expanded) {
+              onChangeOpenKeys((0, _filter.default)(openKeys).call(openKeys, function (key) {
+                return key !== rowKey;
+              }), rowKey, 'collapse');
+            } else {
+              var _context2;
+
+              onChangeOpenKeys((0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(openKeys), [rowKey]), rowKey, 'expand');
+            }
+          };
+        }
+
+        var prevProps = (_a = firstCol.getCellProps) === null || _a === void 0 ? void 0 : _a.call(firstCol, value, row, rowIndex);
+        return (0, _utils.mergeCellProps)(prevProps, {
+          onClick: onClick,
+          style: {
+            cursor: expandable ? 'pointer' : undefined
+          }
+        });
+      };
+
+      return (0, _concat.default)(_context3 = [(0, _extends3.default)((0, _extends3.default)({}, firstCol), {
+        title: /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: 'inline-block',
+            marginLeft: textOffset
+          }
+        }, _internals.internals.safeRenderHeader(firstCol)),
+        render: render,
+        getCellProps: getCellProps,
+        getSpanRect: function getSpanRect(value, row, rowIndex) {
+          if (getGroupingMeta(row).isGroupHeader) {
+            return {
+              top: rowIndex,
+              bottom: rowIndex + 1,
+              left: 0,
+              right: columnFlatCount
+            };
+          }
+        }
+      })]).call(_context3, (0, _toConsumableArray2.default)(others));
+    }
+  };
+}

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

@@ -0,0 +1,23 @@
+import { ArtColumn } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface SingleSelectFeatureOptions {
+    /** 是否高亮被选中的行 */
+    highlightRowWhenSelected?: boolean;
+    /** 非受控用法：默认选中的值 */
+    defaultValue?: string;
+    /** 受控用法：当前选中的值 */
+    value?: string;
+    /** 受控用法：选中值改变回调 */
+    onChange?: (next: string) => void;
+    /** 判断一行是否禁用 */
+    isDisabled?(row: any, rowIndex: number): boolean;
+    /** 点击事件的响应区域 */
+    clickArea?: 'radio' | 'cell' | 'row';
+    /** 单选框所在列的 column 配置，可指定 width，lock 等属性 */
+    radioColumn?: Partial<ArtColumn>;
+    /** 单选框所在列的位置 */
+    radioPlacement?: 'start' | 'end';
+    /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+}
+export declare function singleSelect(opts?: SingleSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;