@kdcloudjs/table 1.1.3-canary.1 → 1.1.3-canary.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +602 -205
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +6 -6
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/helpers/TableDOMUtils.d.ts +2 -0
  8. package/es/table/base/helpers/TableDOMUtils.js +48 -12
  9. package/es/table/base/helpers/getRichVisibleRectsStream.js +1 -1
  10. package/es/table/base/html-table.js +1 -1
  11. package/es/table/base/styles.d.ts +2 -0
  12. package/es/table/base/styles.js +4 -2
  13. package/es/table/base/table.d.ts +0 -1
  14. package/es/table/base/table.js +13 -27
  15. package/es/table/pipeline/features/columnDrag.js +27 -16
  16. package/es/table/pipeline/features/columnFilter.d.ts +2 -2
  17. package/es/table/pipeline/features/columnFilter.js +33 -12
  18. package/es/table/pipeline/features/contextMenu.js +1 -0
  19. package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  20. package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
  21. package/es/table/pipeline/features/filter/Filter.d.ts +1 -1
  22. package/es/table/pipeline/features/filter/Filter.js +16 -20
  23. package/es/table/pipeline/features/filter/FilterPanel.js +25 -16
  24. package/es/table/pipeline/features/filter/util.js +4 -4
  25. package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
  26. package/es/table/pipeline/features/footerDataSource.js +25 -0
  27. package/es/table/pipeline/features/index.d.ts +2 -0
  28. package/es/table/pipeline/features/index.js +3 -1
  29. package/es/table/pipeline/features/mergeCellHover.d.ts +2 -0
  30. package/es/table/pipeline/features/mergeCellHover.js +32 -0
  31. package/es/table/pipeline/features/multiSelect.js +7 -2
  32. package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
  33. package/es/table/pipeline/features/rangeSelection.js +156 -28
  34. package/es/table/pipeline/features/singleSelect.js +4 -0
  35. package/es/table/pipeline/features/treeMode.d.ts +2 -0
  36. package/es/table/pipeline/features/treeMode.js +18 -20
  37. package/es/table/pipeline/pipeline.d.ts +5 -1
  38. package/es/table/pipeline/pipeline.js +11 -10
  39. package/lib/table/base/helpers/TableDOMUtils.d.ts +2 -0
  40. package/lib/table/base/helpers/TableDOMUtils.js +51 -12
  41. package/lib/table/base/helpers/getRichVisibleRectsStream.js +1 -1
  42. package/lib/table/base/html-table.js +1 -1
  43. package/lib/table/base/styles.d.ts +2 -0
  44. package/lib/table/base/styles.js +4 -2
  45. package/lib/table/base/table.d.ts +0 -1
  46. package/lib/table/base/table.js +13 -27
  47. package/lib/table/pipeline/features/columnDrag.js +27 -16
  48. package/lib/table/pipeline/features/columnFilter.d.ts +2 -2
  49. package/lib/table/pipeline/features/columnFilter.js +31 -12
  50. package/lib/table/pipeline/features/contextMenu.js +1 -0
  51. package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  52. package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
  53. package/lib/table/pipeline/features/filter/Filter.d.ts +1 -1
  54. package/lib/table/pipeline/features/filter/Filter.js +17 -20
  55. package/lib/table/pipeline/features/filter/FilterPanel.js +25 -15
  56. package/lib/table/pipeline/features/filter/util.js +4 -4
  57. package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
  58. package/lib/table/pipeline/features/footerDataSource.js +41 -0
  59. package/lib/table/pipeline/features/index.d.ts +2 -0
  60. package/lib/table/pipeline/features/index.js +23 -1
  61. package/lib/table/pipeline/features/mergeCellHover.d.ts +2 -0
  62. package/lib/table/pipeline/features/mergeCellHover.js +43 -0
  63. package/lib/table/pipeline/features/multiSelect.js +6 -1
  64. package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
  65. package/lib/table/pipeline/features/rangeSelection.js +158 -30
  66. package/lib/table/pipeline/features/singleSelect.js +4 -0
  67. package/lib/table/pipeline/features/treeMode.d.ts +2 -0
  68. package/lib/table/pipeline/features/treeMode.js +19 -22
  69. package/lib/table/pipeline/pipeline.d.ts +5 -1
  70. package/lib/table/pipeline/pipeline.js +12 -10
  71. package/package.json +1 -1
@@ -4,19 +4,20 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
4
4
 
5
5
  var _templateObject;
6
6
 
7
- import React, { useEffect, useState } from 'react';
7
+ import React, { useEffect, useState, useRef } from 'react';
8
8
  import styled from 'styled-components';
9
9
  import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
10
- var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n color:#666;\n background-color: #fff;\n padding: 6px 16px 6px 16px;\n display: inline-block;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .popup-body {\n display: flex;\n }\n"])));
10
+ import DefaultFilterIcon from './DefaultFilterIcon';
11
+ var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .popup-body {\n display: flex;\n }\n"])));
11
12
 
12
13
  var useWindowEvents = function useWindowEvents(func, evens) {
13
14
  React.useEffect(function () {
14
15
  evens.forEach(function (event) {
15
- return window.addEventListener(event, func, true);
16
+ return window.addEventListener(event, func);
16
17
  });
17
18
  return function () {
18
19
  return evens.forEach(function (event) {
19
- return window.removeEventListener(event, func, true);
20
+ return window.removeEventListener(event, func);
20
21
  });
21
22
  };
22
23
  }, [evens, func]);
@@ -49,8 +50,22 @@ function FilterPanel(_ref) {
49
50
  setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
50
51
  setVisible(true);
51
52
  }, [position]);
53
+ var hasPopupMouseDown = useRef(false);
54
+ var mouseDownTimeout = useRef();
55
+
56
+ var handleMouseDown = function handleMouseDown(e) {
57
+ // 当弹出的过滤面板内部发生鼠标按下事件时,标记当前事件,并在下个周期清除标记,用来确定鼠标按下发生在过滤面板内部
58
+ // 利用了React.createPortal冒泡是根据React Tree的特性:
59
+ // https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
60
+ hasPopupMouseDown.current = true;
61
+ clearTimeout(mouseDownTimeout.current);
62
+ mouseDownTimeout.current = window.setTimeout(function () {
63
+ hasPopupMouseDown.current = false;
64
+ }, 0);
65
+ };
66
+
52
67
  useWindowEvents(function (e) {
53
- return !isContainPanel(e) && onClose();
68
+ !isContainPanel(e) && !hasPopupMouseDown.current && onClose();
54
69
  }, ['mousedown']);
55
70
  return /*#__PURE__*/React.createElement(FilterPanelStyle, {
56
71
  style: _extends(_extends({}, style), {
@@ -58,22 +73,16 @@ function FilterPanel(_ref) {
58
73
  top: visible ? perfectPosition.y : 0,
59
74
  opacity: visible ? 1 : 0
60
75
  }),
76
+ onMouseDown: handleMouseDown,
61
77
  ref: ref
62
78
  }, /*#__PURE__*/React.createElement("div", {
63
79
  className: 'popup-header'
64
80
  }, /*#__PURE__*/React.createElement("span", {
65
81
  className: 'popup-header-icon'
66
- }, filterIcon || /*#__PURE__*/React.createElement("svg", {
67
- width: 14,
68
- height: 14,
69
- viewBox: "64 64 896 896",
70
- focusable: "false",
71
- "data-icon": "filter",
72
- fill: "currentColor",
73
- "aria-hidden": "true"
74
- }, /*#__PURE__*/React.createElement("path", {
75
- d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
76
- })))), /*#__PURE__*/React.createElement("div", {
82
+ }, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
83
+ width: 12,
84
+ height: 12
85
+ }))), /*#__PURE__*/React.createElement("div", {
77
86
  className: "popup-body"
78
87
  }, children));
79
88
  }
@@ -12,7 +12,7 @@ var DEFAULT_FILTER_OPTIONS = [{
12
12
  data = data + '';
13
13
  }
14
14
 
15
- return _includesInstanceProperty(data).call(data, value);
15
+ return _includesInstanceProperty(data).call(data, value[0]);
16
16
  };
17
17
  }
18
18
  }, {
@@ -28,7 +28,7 @@ var DEFAULT_FILTER_OPTIONS = [{
28
28
  data = data + '';
29
29
  }
30
30
 
31
- return !_includesInstanceProperty(data).call(data, value);
31
+ return !_includesInstanceProperty(data).call(data, value[0]);
32
32
  };
33
33
  }
34
34
  }, {
@@ -36,7 +36,7 @@ var DEFAULT_FILTER_OPTIONS = [{
36
36
  key: 'equal',
37
37
  filter: function filter(value) {
38
38
  return function (data) {
39
- return value !== data;
39
+ return value[0] === data;
40
40
  };
41
41
  }
42
42
  }, {
@@ -44,7 +44,7 @@ var DEFAULT_FILTER_OPTIONS = [{
44
44
  key: 'notEqual',
45
45
  filter: function filter(value) {
46
46
  return function (data) {
47
- return value !== data;
47
+ return value[0] !== data;
48
48
  };
49
49
  }
50
50
  }, {
@@ -0,0 +1,9 @@
1
+ import { TablePipeline } from '../pipeline';
2
+ export interface FooterDataSourceFeatureOptions {
3
+ /** 指定表格页脚每一行元信息的记录字段 */
4
+ footerRowMetaKey?: string | symbol;
5
+ /** 表格页脚数据源 */
6
+ dataSource?: any[];
7
+ }
8
+ export declare const footerRowMetaSymbol: unique symbol;
9
+ export declare function footerDataSource(opts?: FooterDataSourceFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
@@ -0,0 +1,25 @@
1
+ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
2
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
3
+ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
4
+ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
5
+ export var footerRowMetaSymbol = _Symbol('footer-row');
6
+ export function footerDataSource() {
7
+ var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
8
+ return function footerDataSourceStep(pipeline) {
9
+ var _a, _b;
10
+
11
+ var footerDataSource = (_a = opts.dataSource) !== null && _a !== void 0 ? _a : pipeline.getFooterDataSource();
12
+ var footerRowMetaKey = (_b = opts.footerRowMetaKey) !== null && _b !== void 0 ? _b : footerRowMetaSymbol;
13
+ pipeline.setFeatureOptions('footerRowMetaKey', footerRowMetaKey);
14
+
15
+ if (footerDataSource) {
16
+ pipeline.footerDataSource(_mapInstanceProperty(footerDataSource).call(footerDataSource, function (row) {
17
+ return _extends(_defineProperty({}, footerRowMetaKey, true), row);
18
+ }));
19
+ } else {
20
+ console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源,设置方法有:pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
21
+ }
22
+
23
+ return pipeline;
24
+ };
25
+ }
@@ -15,3 +15,5 @@ export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
15
15
  export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
16
16
  export { filter, FilterFeatureOptions } from './columnFilter';
17
17
  export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
18
+ export { mergeCellHover } from './mergeCellHover';
19
+ export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
@@ -14,4 +14,6 @@ export { columnDrag } from './columnDrag';
14
14
  export { columnResize } from './columnResizeWidth';
15
15
  export { contextMenu } from './contextMenu';
16
16
  export { filter } from './columnFilter';
17
- export { rangeSelection } from './rangeSelection';
17
+ export { rangeSelection } from './rangeSelection';
18
+ export { mergeCellHover } from './mergeCellHover';
19
+ export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
@@ -0,0 +1,2 @@
1
+ import { TablePipeline } from '../pipeline';
2
+ export declare function mergeCellHover(): (pipeline: TablePipeline) => TablePipeline;
@@ -0,0 +1,32 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
2
+ import { isLeafNode, makeRecursiveMapper, mergeCellProps } from '../../utils';
3
+ export function mergeCellHover() {
4
+ return function (pipeline) {
5
+ return pipeline.mapColumns(makeRecursiveMapper(function (col) {
6
+ if (!isLeafNode(col)) {
7
+ return col;
8
+ }
9
+
10
+ var prevGetCellProps = col.getCellProps;
11
+ return _extends(_extends({}, col), {
12
+ getCellProps: function getCellProps(value, record, rowIndex) {
13
+ var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
14
+ return mergeCellProps(prevCellProps, {
15
+ onMouseEnter: function onMouseEnter(e) {
16
+ var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
17
+ InRangeRow.forEach(function (row) {
18
+ row.classList.add('row-hover');
19
+ });
20
+ },
21
+ onMouseLeave: function onMouseLeave(e) {
22
+ var InRangeRow = pipeline.ref.current.domHelper.getInRangeRowByCellEvent(e);
23
+ InRangeRow.forEach(function (row) {
24
+ row.classList.remove('row-hover');
25
+ });
26
+ }
27
+ });
28
+ }
29
+ });
30
+ }));
31
+ };
32
+ }
@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
5
5
  import React from 'react';
6
6
  import { internals } from '../../internals';
7
7
  import { always, arrayUtils } from '../../utils/others';
8
- import { mergeCellProps } from '../../utils';
8
+ import { collectNodes, mergeCellProps } from '../../utils';
9
9
  export function multiSelect() {
10
10
  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
11
11
  return function multiSelectStep(pipeline) {
@@ -44,7 +44,8 @@ export function multiSelect() {
44
44
  /** 所有有效的 keys(disable 状态为 false) */
45
45
 
46
46
  var allKeys = [];
47
- dataSource.forEach(function (row, rowIndex) {
47
+ var flatDataSource = collectNodes(dataSource);
48
+ flatDataSource.forEach(function (row, rowIndex) {
48
49
  var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
49
50
  fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
50
51
 
@@ -110,6 +111,10 @@ export function multiSelect() {
110
111
  return mergeCellProps(preCellProps, checkboxCellProps);
111
112
  },
112
113
  render: function render(_, row, rowIndex) {
114
+ if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
115
+ return null;
116
+ }
117
+
113
118
  var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
114
119
  var checked = set.has(key);
115
120
  return /*#__PURE__*/React.createElement(Checkbox, {
@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
6
6
  preventkDefaultOfKeyDownEvent?: boolean;
7
7
  }
8
8
  export declare const rangeSelectionKey = "rangeSelection";
9
- export declare const lastClickCell = "lastClickCell";
9
+ export declare const lastClickCellKey = "lastClickCell";
10
10
  export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
@@ -10,40 +10,42 @@ import { map, takeUntil } from 'rxjs/operators';
10
10
  import { Classes } from '../../base/styles';
11
11
  import cx from 'classnames';
12
12
  export var rangeSelectionKey = 'rangeSelection';
13
- export var lastClickCell = 'lastClickCell';
13
+ export var lastClickCellKey = 'lastClickCell';
14
14
  export function rangeSelection(opts) {
15
15
  return function step(pipeline) {
16
16
  var SCROLL_SIZE = 30;
17
17
  var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
18
+ var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
18
19
 
19
20
  if (!tableBody) {
20
21
  return pipeline;
21
22
  }
22
23
 
23
24
  var columns = pipeline.getColumns();
25
+ var dataSource = pipeline.getDataSource();
24
26
 
25
27
  var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
26
28
  var _a;
27
29
 
28
30
  pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
29
31
  (_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
30
- }; // if (!pipeline.getFeatureOptions(rangeSelectionKey)) {
31
- // pipeline.setFeatureOptions(rangeSelectionKey, {
32
- // optionKey: rangeSelectionKey,
33
- // rangeSelectedChange: rangeSelectedChange
34
- // })
35
- // }
36
-
32
+ };
37
33
 
38
34
  var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
39
- if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
35
+ if (!startDragCell || !draggingCell) return;
40
36
  var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
41
- var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
37
+
38
+ var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
39
+ startRow = _getRangeSelectionRow.startRow,
40
+ endRow = _getRangeSelectionRow.endRow,
41
+ footerRowRange = _getRangeSelectionRow.footerRowRange;
42
+
42
43
  var rangeSelection = {
43
- startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
44
- endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
44
+ startRow: startRow,
45
+ endRow: endRow,
45
46
  columns: rangeColumns,
46
- startColumn: startDragCell.column
47
+ startColumn: startDragCell.column,
48
+ footerRowRange: footerRowRange
47
49
  };
48
50
  rangeSelectedChange(rangeSelection);
49
51
  };
@@ -54,23 +56,23 @@ export function rangeSelection(opts) {
54
56
 
55
57
  if (clickCell) {
56
58
  if (event.shiftKey) {
57
- var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
59
+ var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
58
60
 
59
61
  if (_lastClickCell) {
60
62
  setRangeSelection(_lastClickCell, clickCell);
61
63
  } else {
62
64
  // 第一次进来就按住shift键,这时候要记住点击的单元格
63
- pipeline.setStateAtKey(lastClickCell, clickCell);
65
+ pipeline.setStateAtKey(lastClickCellKey, clickCell);
64
66
  }
65
67
  } else {
66
- pipeline.setStateAtKey(lastClickCell, clickCell);
67
- rangeSelectedChange(null);
68
+ pipeline.setStateAtKey(lastClickCellKey, clickCell);
69
+ setRangeSelection(clickCell, clickCell);
68
70
  }
69
71
  }
70
72
  };
71
73
 
72
74
  var onMouseDown = function onMouseDown(mouseDownEvent) {
73
- if (mouseDownEvent.button !== 0 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
75
+ if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
74
76
  // shift + 点击选中
75
77
 
76
78
  shiftKeySelect(mouseDownEvent);
@@ -126,10 +128,11 @@ export function rangeSelection(opts) {
126
128
  };
127
129
 
128
130
  var onKeyDown = function onKeyDown(e) {
129
- if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
131
+ if (!(isElementInEventPath(tableBody, e.nativeEvent) || isElementInEventPath(tableFooter, e.nativeEvent))) return;
130
132
 
131
133
  if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
132
134
  var rowLen = pipeline.getDataSource().length;
135
+ var footerDataSource = pipeline.getFooterDataSource() || [];
133
136
 
134
137
  if (columns.length && rowLen) {
135
138
  opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
@@ -137,7 +140,11 @@ export function rangeSelection(opts) {
137
140
  startRow: 0,
138
141
  endRow: rowLen - 1,
139
142
  columns: columns,
140
- startColumn: columns[0]
143
+ startColumn: columns[0],
144
+ footerRowRange: footerDataSource.length > 0 ? {
145
+ startRow: 0,
146
+ endRow: footerDataSource.length - 1
147
+ } : null
141
148
  });
142
149
  }
143
150
  }
@@ -146,7 +153,8 @@ export function rangeSelection(opts) {
146
153
  pipeline.addTableProps({
147
154
  onMouseDown: onMouseDown,
148
155
  onKeyDown: onKeyDown,
149
- tabIndex: -1
156
+ tabIndex: -1,
157
+ className: cx([Classes.rangeSelection])
150
158
  }); // todo: 后面可以把mousedown放到一个流里面
151
159
 
152
160
  return pipeline.mapColumns(makeRecursiveMapper(function (col) {
@@ -162,15 +170,29 @@ export function rangeSelection(opts) {
162
170
  var _cx;
163
171
 
164
172
  var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
173
+ var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
165
174
  var startRow = rangeSelection.startRow,
166
175
  endRow = rangeSelection.endRow,
167
- columns = rangeSelection.columns;
168
- var startIndex = startRow < endRow ? startRow : endRow;
169
- var endIndex = startRow < endRow ? endRow : startRow;
176
+ columns = rangeSelection.columns,
177
+ footerRowRange = rangeSelection.footerRowRange;
178
+
179
+ var _getRowIndex = getRowIndex(startRow, endRow),
180
+ startRowIndex = _getRowIndex.startRowIndex,
181
+ endRowIndex = _getRowIndex.endRowIndex;
182
+
183
+ var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
184
+ footerStartRowIndex = _getFooterRowIndex.startRowIndex,
185
+ footerEndRowIndex = _getFooterRowIndex.endRowIndex;
186
+
170
187
  var startCol = columns[0];
171
188
  var endCol = columns[columns.length - 1];
172
- var match = rowIndex >= startIndex && rowIndex <= endIndex;
173
- var className = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSelected, match), _defineProperty(_cx, Classes.tableCellRangeTop, rowIndex === startIndex), _defineProperty(_cx, Classes.tableCellRangeLeft, col.code === startCol.code && match), _defineProperty(_cx, Classes.tableCellRangeBottom, rowIndex === endIndex), _defineProperty(_cx, Classes.tableCellRangeRight, col.code === endCol.code && match), _cx));
189
+ var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
190
+ var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
191
+ var match = footerMatch || bodyMatch;
192
+ var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
193
+
194
+ var showCellRangeStyle = match && !matchSingleCell;
195
+ var className = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSingleCell, matchSingleCell), _defineProperty(_cx, Classes.tableCellRangeSelected, showCellRangeStyle), _defineProperty(_cx, Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), _defineProperty(_cx, Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), _defineProperty(_cx, Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), _defineProperty(_cx, Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
174
196
  return mergeCellProps(prevCellProps, {
175
197
  className: className
176
198
  });
@@ -196,7 +218,8 @@ function getTargetCell(target, columns) {
196
218
  rowIndex: parseInt(target.getAttribute('data-rowindex')),
197
219
  rowSpan: parseInt(target.getAttribute('rowspan') || 1),
198
220
  code: columnCode,
199
- column: column
221
+ column: column,
222
+ isInFooter: isEleInFooter(target)
200
223
  }
201
224
  };
202
225
  }();
@@ -211,7 +234,19 @@ function getTargetCell(target, columns) {
211
234
  }
212
235
 
213
236
  function isSameCell(cell1, cell2) {
214
- return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
237
+ return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
238
+ }
239
+
240
+ function isEleInFooter(target) {
241
+ while (target && !target.classList.contains(Classes.artTable)) {
242
+ if (target.classList.contains(Classes.tableFooter)) {
243
+ return true;
244
+ }
245
+
246
+ target = target.parentElement;
247
+ }
248
+
249
+ return false;
215
250
  }
216
251
 
217
252
  function getRangeColumns(startCell, endCell, columns) {
@@ -230,4 +265,97 @@ function getRangeColumns(startCell, endCell, columns) {
230
265
  } else {
231
266
  return _sliceInstanceProperty(flatColumns).call(flatColumns, endIndex, startIndex + 1);
232
267
  }
268
+ }
269
+
270
+ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
271
+ var footerRowRange = null;
272
+ var startRow = -1;
273
+ var endRow = -1;
274
+
275
+ var _getCellRangeRow = getCellRangeRow(startCell, endCell),
276
+ _startRow = _getCellRangeRow.startRow,
277
+ _endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
278
+
279
+
280
+ if (!startCell.isInFooter && !endCell.isInFooter) {
281
+ startRow = _startRow;
282
+ endRow = _endRow;
283
+ } else if (startCell.isInFooter && endCell.isInFooter) {
284
+ // 两个单元格都在表底
285
+ footerRowRange = {
286
+ startRow: _startRow,
287
+ endRow: _endRow
288
+ };
289
+ } else {
290
+ // 一个单元格在表体,一个在表底
291
+ if (startCell.isInFooter) {
292
+ startRow = dataSource.length - 1;
293
+ endRow = endCell.rowIndex;
294
+ footerRowRange = {
295
+ startRow: startCell.rowIndex,
296
+ endRow: 0
297
+ };
298
+ } else {
299
+ startRow = startCell.rowIndex;
300
+ endRow = dataSource.length - 1;
301
+ footerRowRange = {
302
+ startRow: 0,
303
+ endRow: endCell.rowIndex
304
+ };
305
+ }
306
+ }
307
+
308
+ return {
309
+ startRow: startRow,
310
+ endRow: endRow,
311
+ footerRowRange: footerRowRange
312
+ };
313
+ }
314
+
315
+ function getCellRangeRow(startCell, endCell) {
316
+ if (isSameCell(startCell, endCell)) {
317
+ return {
318
+ startRow: startCell.rowIndex,
319
+ endRow: startCell.rowIndex
320
+ };
321
+ }
322
+
323
+ var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
324
+ var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
325
+ var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
326
+ return {
327
+ startRow: startRow,
328
+ endRow: endRow
329
+ };
330
+ }
331
+
332
+ function isCellRangeSingleCell(rangeSelection) {
333
+ var startRow = rangeSelection.startRow,
334
+ endRow = rangeSelection.endRow,
335
+ columns = rangeSelection.columns,
336
+ footerRowRange = rangeSelection.footerRowRange;
337
+ var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
338
+ var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
339
+ return isBodySingleCell || isFooterSingleCell;
340
+ }
341
+
342
+ function getRowIndex(startRow, endRow) {
343
+ var isReverse = startRow > endRow;
344
+ var startRowIndex = isReverse ? endRow : startRow;
345
+ var endRowIndex = isReverse ? startRow : endRow;
346
+ return {
347
+ startRowIndex: startRowIndex,
348
+ endRowIndex: endRowIndex
349
+ };
350
+ }
351
+
352
+ function getFooterRowIndex(footerRowRange) {
353
+ if (footerRowRange) {
354
+ return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
355
+ }
356
+
357
+ return {
358
+ startRowIndex: -1,
359
+ endRowIndex: -1
360
+ };
233
361
  }
@@ -60,6 +60,10 @@ export function singleSelect() {
60
60
  return preCellProps;
61
61
  },
62
62
  render: function render(_, row, rowIndex) {
63
+ if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
64
+ return null;
65
+ }
66
+
63
67
  var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
64
68
  return /*#__PURE__*/React.createElement(Radio, {
65
69
  checked: value === rowKey,
@@ -32,6 +32,8 @@ export interface TreeModeFeatureOptions {
32
32
  stopClickEventPropagation?: boolean;
33
33
  /** 指定表格每一行元信息的记录字段 */
34
34
  treeMetaKey?: string | symbol;
35
+ /** 指定展开列 */
36
+ expandColCode?: string;
35
37
  }
36
38
  export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
37
39
  export {};
@@ -1,13 +1,13 @@
1
+ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
1
2
  import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
2
3
  import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
3
- import _toArray from "@babel/runtime-corejs3/helpers/toArray";
4
4
  import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
5
5
  import _extends from "@babel/runtime-corejs3/helpers/extends";
6
6
  import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
7
7
 
8
8
  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { 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 = it.call(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; } } }; }
9
9
 
10
- 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); }
10
+ function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 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); }
11
11
 
12
12
  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; }
13
13
 
@@ -15,7 +15,7 @@ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
15
15
  import _Set from "@babel/runtime-corejs3/core-js-stable/set";
16
16
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
17
17
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
18
- import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
18
+ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
19
19
  import cx from 'classnames';
20
20
  import React from 'react';
21
21
  import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
@@ -31,11 +31,6 @@ export function treeMode() {
31
31
  var stateKey = 'treeMode';
32
32
  var ctx = pipeline.ctx;
33
33
  var primaryKey = pipeline.ensurePrimaryKey('treeMode');
34
-
35
- if (typeof primaryKey !== 'string') {
36
- throw new Error('treeMode 仅支持字符串作为 primaryKey');
37
- }
38
-
39
34
  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 : [];
40
35
  var openKeySet = new _Set(openKeys);
41
36
 
@@ -90,7 +85,7 @@ export function treeMode() {
90
85
  try {
91
86
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
92
87
  var node = _step.value;
93
- var rowKey = node[primaryKey];
88
+ var rowKey = internals.safeGetRowKey(primaryKey, node, -1);
94
89
  var expanded = openKeySet.has(rowKey);
95
90
  var isLeaf = isLeafNode(node, {
96
91
  depth: depth,
@@ -120,18 +115,20 @@ export function treeMode() {
120
115
  }
121
116
 
122
117
  function processColumns(columns) {
123
- var _context2;
124
-
125
118
  if (columns.length === 0) {
126
119
  return columns;
127
120
  }
128
121
 
129
- var _columns = _toArray(columns),
130
- firstCol = _columns[0],
131
- others = _sliceInstanceProperty(_columns).call(_columns, 1);
122
+ var expandColIndex = _findIndexInstanceProperty(columns).call(columns, function (_ref) {
123
+ var code = _ref.code;
124
+ return code && opts.expandColCode === code;
125
+ });
126
+
127
+ expandColIndex = expandColIndex === -1 ? 0 : expandColIndex;
128
+ var expandCol = columns[expandColIndex];
132
129
 
133
130
  var render = function render(value, record, recordIndex) {
134
- var content = internals.safeRender(firstCol, record, recordIndex);
131
+ var content = internals.safeRender(expandCol, record, recordIndex);
135
132
 
136
133
  if (record[treeMetaKey] == null) {
137
134
  // 没有 treeMeta 信息的话,就返回原先的渲染结果
@@ -191,7 +188,7 @@ export function treeMode() {
191
188
  };
192
189
 
193
190
  var getCellProps = function getCellProps(value, record, rowIndex) {
194
- var prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);
191
+ var prevProps = internals.safeGetCellProps(expandCol, record, rowIndex);
195
192
 
196
193
  if (record[treeMetaKey] == null) {
197
194
  // 没有 treeMeta 信息的话,就返回原先的 cellProps
@@ -220,15 +217,16 @@ export function treeMode() {
220
217
  });
221
218
  };
222
219
 
223
- return _concatInstanceProperty(_context2 = [_extends(_extends({}, firstCol), {
220
+ columns[expandColIndex] = _extends(_extends({}, expandCol), {
224
221
  title: /*#__PURE__*/React.createElement("span", {
225
222
  style: {
226
223
  marginLeft: iconIndent + iconWidth + iconGap
227
224
  }
228
- }, internals.safeRenderHeader(firstCol)),
225
+ }, internals.safeRenderHeader(expandCol)),
229
226
  render: render,
230
- getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps
231
- })]).call(_context2, _toConsumableArray(others));
227
+ getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps
228
+ });
229
+ return _toConsumableArray(columns);
232
230
  }
233
231
  };
234
232
  }