@kdcloudjs/table 1.1.4 → 1.1.5-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 (89) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +905 -346
  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 +10 -9
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/html-table.js +1 -1
  8. package/es/table/base/styles.d.ts +11 -2
  9. package/es/table/base/styles.js +19 -8
  10. package/es/table/base/table.d.ts +3 -1
  11. package/es/table/base/table.js +35 -56
  12. package/es/table/base/utils.d.ts +7 -0
  13. package/es/table/base/utils.js +36 -2
  14. package/es/table/common-views.js +1 -1
  15. package/es/table/pipeline/features/colGroupExtendable.d.ts +8 -0
  16. package/es/table/pipeline/features/colGroupExtendable.js +105 -0
  17. package/es/table/pipeline/features/columnDrag.js +5 -4
  18. package/es/table/pipeline/features/columnFilter.d.ts +8 -2
  19. package/es/table/pipeline/features/columnFilter.js +43 -19
  20. package/es/table/pipeline/features/columnResizeWidth.js +1 -1
  21. package/es/table/pipeline/features/contextMenu.d.ts +5 -1
  22. package/es/table/pipeline/features/contextMenu.js +18 -28
  23. package/es/table/pipeline/features/filter/DefaultFilterContent.js +27 -7
  24. package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  25. package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
  26. package/es/table/pipeline/features/filter/Filter.d.ts +5 -2
  27. package/es/table/pipeline/features/filter/Filter.js +65 -37
  28. package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  29. package/es/table/pipeline/features/filter/FilterPanel.js +40 -21
  30. package/es/table/pipeline/features/filter/util.js +4 -4
  31. package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
  32. package/es/table/pipeline/features/footerDataSource.js +25 -0
  33. package/es/table/pipeline/features/index.d.ts +2 -0
  34. package/es/table/pipeline/features/index.js +3 -1
  35. package/es/table/pipeline/features/multiSelect.js +7 -2
  36. package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
  37. package/es/table/pipeline/features/rangeSelection.js +180 -30
  38. package/es/table/pipeline/features/singleSelect.js +4 -0
  39. package/es/table/pipeline/features/treeMode.d.ts +2 -0
  40. package/es/table/pipeline/features/treeMode.js +20 -21
  41. package/es/table/pipeline/pipeline.d.ts +1 -1
  42. package/es/table/pipeline/pipeline.js +4 -9
  43. package/es/table/utils/element.d.ts +1 -0
  44. package/es/table/utils/element.js +4 -0
  45. package/es/table/utils/keyCode.d.ts +5 -0
  46. package/es/table/utils/keyCode.js +5 -0
  47. package/es/table/utils/mergeCellProps.js +2 -6
  48. package/lib/table/base/html-table.js +1 -1
  49. package/lib/table/base/styles.d.ts +11 -2
  50. package/lib/table/base/styles.js +19 -8
  51. package/lib/table/base/table.d.ts +3 -1
  52. package/lib/table/base/table.js +35 -56
  53. package/lib/table/base/utils.d.ts +7 -0
  54. package/lib/table/base/utils.js +43 -2
  55. package/lib/table/common-views.js +1 -1
  56. package/lib/table/pipeline/features/colGroupExtendable.d.ts +8 -0
  57. package/lib/table/pipeline/features/colGroupExtendable.js +126 -0
  58. package/lib/table/pipeline/features/columnDrag.js +5 -4
  59. package/lib/table/pipeline/features/columnFilter.d.ts +8 -2
  60. package/lib/table/pipeline/features/columnFilter.js +41 -19
  61. package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
  62. package/lib/table/pipeline/features/contextMenu.d.ts +5 -1
  63. package/lib/table/pipeline/features/contextMenu.js +17 -28
  64. package/lib/table/pipeline/features/filter/DefaultFilterContent.js +28 -6
  65. package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  66. package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
  67. package/lib/table/pipeline/features/filter/Filter.d.ts +5 -2
  68. package/lib/table/pipeline/features/filter/Filter.js +68 -37
  69. package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  70. package/lib/table/pipeline/features/filter/FilterPanel.js +42 -20
  71. package/lib/table/pipeline/features/filter/util.js +4 -4
  72. package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
  73. package/lib/table/pipeline/features/footerDataSource.js +41 -0
  74. package/lib/table/pipeline/features/index.d.ts +2 -0
  75. package/lib/table/pipeline/features/index.js +23 -1
  76. package/lib/table/pipeline/features/multiSelect.js +6 -1
  77. package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
  78. package/lib/table/pipeline/features/rangeSelection.js +183 -32
  79. package/lib/table/pipeline/features/singleSelect.js +4 -0
  80. package/lib/table/pipeline/features/treeMode.d.ts +2 -0
  81. package/lib/table/pipeline/features/treeMode.js +21 -23
  82. package/lib/table/pipeline/pipeline.d.ts +1 -1
  83. package/lib/table/pipeline/pipeline.js +4 -9
  84. package/lib/table/utils/element.d.ts +1 -0
  85. package/lib/table/utils/element.js +6 -0
  86. package/lib/table/utils/keyCode.d.ts +5 -0
  87. package/lib/table/utils/keyCode.js +12 -0
  88. package/lib/table/utils/mergeCellProps.js +2 -6
  89. package/package.json +3 -3
@@ -4,10 +4,13 @@ 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
+ import { Classes } from '../../../base/styles';
12
+ import KeyCode from '../../../utils/keyCode';
13
+ 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 .", " {\n display: flex;\n background-color: #ebedf1;\n\n .", " {\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 .", " {\n display: flex;\n }\n"])), Classes.popupHeader, Classes.filterIcon, Classes.popupBody);
11
14
 
12
15
  var useWindowEvents = function useWindowEvents(func, evens) {
13
16
  React.useEffect(function () {
@@ -27,7 +30,8 @@ function FilterPanel(_ref) {
27
30
  children = _ref.children,
28
31
  position = _ref.position,
29
32
  filterIcon = _ref.filterIcon,
30
- onClose = _ref.onClose;
33
+ onClose = _ref.onClose,
34
+ hideFilterPopupHeader = _ref.hideFilterPopupHeader;
31
35
 
32
36
  var _useState = useState(position),
33
37
  _useState2 = _slicedToArray(_useState, 2),
@@ -49,32 +53,47 @@ function FilterPanel(_ref) {
49
53
  setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
50
54
  setVisible(true);
51
55
  }, [position]);
56
+ var hasPopupMouseEvent = useRef(false);
57
+
58
+ var handleMouseEvent = function handleMouseEvent() {
59
+ // 当弹出的过滤面板内部发生鼠标按下、抬起事件时,标记当前事件,并在click捕获期清除标记,用来确定鼠标按下、抬起发生在过滤面板内部
60
+ // 利用了React.createPortal冒泡是根据React Tree的特性:
61
+ // https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
62
+ hasPopupMouseEvent.current = true;
63
+ };
64
+
52
65
  useWindowEvents(function (e) {
53
- return !isContainPanel(e) && onClose();
54
- }, ['mousedown']);
66
+ !isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
67
+ hasPopupMouseEvent.current = false;
68
+ }, ['click']);
69
+
70
+ var handleKeyDown = function handleKeyDown(e) {
71
+ if (e.currentTarget.contains(e.target) && e.keyCode === KeyCode.ESC) {
72
+ onClose();
73
+ }
74
+ };
75
+
55
76
  return /*#__PURE__*/React.createElement(FilterPanelStyle, {
77
+ className: Classes.popup,
56
78
  style: _extends(_extends({}, style), {
57
79
  left: visible ? perfectPosition.x : 0,
58
80
  top: visible ? perfectPosition.y : 0,
59
81
  opacity: visible ? 1 : 0
60
82
  }),
61
- ref: ref
62
- }, /*#__PURE__*/React.createElement("div", {
63
- className: 'popup-header'
83
+ onMouseDown: handleMouseEvent,
84
+ onMouseUp: handleMouseEvent,
85
+ onKeyDown: handleKeyDown,
86
+ ref: ref,
87
+ tabIndex: -1
88
+ }, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
89
+ className: Classes.popupHeader
64
90
  }, /*#__PURE__*/React.createElement("span", {
65
- 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", {
77
- className: "popup-body"
91
+ className: Classes.filterIcon
92
+ }, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
93
+ width: 12,
94
+ height: 12
95
+ }))) : null, /*#__PURE__*/React.createElement("div", {
96
+ className: Classes.popupBody
78
97
  }, children));
79
98
  }
80
99
 
@@ -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
+ }
@@ -16,3 +16,5 @@ export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
16
16
  export { filter, FilterFeatureOptions } from './columnFilter';
17
17
  export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
18
18
  export { mergeCellHover } from './mergeCellHover';
19
+ export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
20
+ export { colGroupExtendable, colGroupExtendOption } from './colGroupExtendable';
@@ -15,4 +15,6 @@ export { columnResize } from './columnResizeWidth';
15
15
  export { contextMenu } from './contextMenu';
16
16
  export { filter } from './columnFilter';
17
17
  export { rangeSelection } from './rangeSelection';
18
- export { mergeCellHover } from './mergeCellHover';
18
+ export { mergeCellHover } from './mergeCellHover';
19
+ export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
20
+ export { colGroupExtendable } from './colGroupExtendable';
@@ -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;
@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
3
3
  import _extends from "@babel/runtime-corejs3/helpers/extends";
4
4
  import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
5
5
  import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
6
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
6
7
  import { mergeCellProps, makeRecursiveMapper, isElementInEventPath, collectNodes } from '../../utils';
7
8
  import { findByTree } from '../../utils/others';
8
9
  import { fromEvent } from 'rxjs';
@@ -10,41 +11,51 @@ import { map, takeUntil } from 'rxjs/operators';
10
11
  import { Classes } from '../../base/styles';
11
12
  import cx from 'classnames';
12
13
  export var rangeSelectionKey = 'rangeSelection';
13
- export var lastClickCell = 'lastClickCell';
14
+ export var lastClickCellKey = 'lastClickCell';
14
15
  export function rangeSelection(opts) {
15
16
  return function step(pipeline) {
16
17
  var SCROLL_SIZE = 30;
17
18
  var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
19
+ var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
20
+ var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
18
21
 
19
22
  if (!tableBody) {
20
23
  return pipeline;
21
24
  }
22
25
 
23
26
  var columns = pipeline.getColumns();
27
+ var dataSource = pipeline.getDataSource();
24
28
 
25
29
  var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
26
30
  var _a;
27
31
 
28
32
  pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
29
33
  (_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
-
34
+ };
37
35
 
38
36
  var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
39
- if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
37
+ if (!startDragCell || !draggingCell) return;
40
38
  var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
41
- var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
39
+
40
+ var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
41
+ startRow = _getRangeSelectionRow.startRow,
42
+ endRow = _getRangeSelectionRow.endRow,
43
+ footerRowRange = _getRangeSelectionRow.footerRowRange;
44
+
42
45
  var rangeSelection = {
43
- startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
44
- endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
46
+ startRow: startRow,
47
+ endRow: endRow,
45
48
  columns: rangeColumns,
46
- startColumn: startDragCell.column
49
+ startColumn: startDragCell.column,
50
+ footerRowRange: footerRowRange
47
51
  };
52
+
53
+ if (isCellRangeSingleCell(rangeSelection)) {
54
+ artTable.classList.remove(cx(Classes.rangeSelection));
55
+ } else {
56
+ artTable.classList.add(cx(Classes.rangeSelection));
57
+ }
58
+
48
59
  rangeSelectedChange(rangeSelection);
49
60
  };
50
61
 
@@ -54,26 +65,27 @@ export function rangeSelection(opts) {
54
65
 
55
66
  if (clickCell) {
56
67
  if (event.shiftKey) {
57
- var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
68
+ var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
58
69
 
59
70
  if (_lastClickCell) {
60
71
  setRangeSelection(_lastClickCell, clickCell);
61
72
  } else {
62
73
  // 第一次进来就按住shift键,这时候要记住点击的单元格
63
- pipeline.setStateAtKey(lastClickCell, clickCell);
74
+ pipeline.setStateAtKey(lastClickCellKey, clickCell);
64
75
  }
65
76
  } else {
66
- pipeline.setStateAtKey(lastClickCell, clickCell);
67
- rangeSelectedChange(null);
77
+ pipeline.setStateAtKey(lastClickCellKey, clickCell);
78
+ setRangeSelection(clickCell, clickCell);
68
79
  }
69
80
  }
70
81
  };
71
82
 
72
83
  var onMouseDown = function onMouseDown(mouseDownEvent) {
73
- if (mouseDownEvent.button !== 0 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
84
+ if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
74
85
  // shift + 点击选中
75
86
 
76
87
  shiftKeySelect(mouseDownEvent);
88
+ if (mouseDownEvent.shiftKey) return;
77
89
  var target = mouseDownEvent.target;
78
90
  var startDragCell = getTargetCell(target, columns);
79
91
  var mousemove$ = fromEvent(window, 'mousemove');
@@ -126,18 +138,24 @@ export function rangeSelection(opts) {
126
138
  };
127
139
 
128
140
  var onKeyDown = function onKeyDown(e) {
129
- if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
141
+ if (!(isElementInEventPath(tableBody, e.nativeEvent) || isElementInEventPath(tableFooter, e.nativeEvent))) return;
130
142
 
131
143
  if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
132
144
  var rowLen = pipeline.getDataSource().length;
145
+ var footerDataSource = pipeline.getFooterDataSource() || []; // 焦点位于可编辑的单元格内不做全选
133
146
 
134
- if (columns.length && rowLen) {
147
+ if (columns.length && rowLen && !getElementEditable(e.target)) {
135
148
  opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
149
+ artTable.classList.add(cx(Classes.rangeSelection));
136
150
  rangeSelectedChange({
137
151
  startRow: 0,
138
152
  endRow: rowLen - 1,
139
- columns: columns,
140
- startColumn: columns[0]
153
+ columns: collectNodes(columns, 'leaf-only'),
154
+ startColumn: columns[0],
155
+ footerRowRange: footerDataSource.length > 0 ? {
156
+ startRow: 0,
157
+ endRow: footerDataSource.length - 1
158
+ } : null
141
159
  });
142
160
  }
143
161
  }
@@ -146,7 +164,8 @@ export function rangeSelection(opts) {
146
164
  pipeline.addTableProps({
147
165
  onMouseDown: onMouseDown,
148
166
  onKeyDown: onKeyDown,
149
- tabIndex: -1
167
+ tabIndex: -1,
168
+ className: cx([Classes.rangeSelection])
150
169
  }); // todo: 后面可以把mousedown放到一个流里面
151
170
 
152
171
  return pipeline.mapColumns(makeRecursiveMapper(function (col) {
@@ -162,15 +181,29 @@ export function rangeSelection(opts) {
162
181
  var _cx;
163
182
 
164
183
  var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
184
+ var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
165
185
  var startRow = rangeSelection.startRow,
166
186
  endRow = rangeSelection.endRow,
167
- columns = rangeSelection.columns;
168
- var startIndex = startRow < endRow ? startRow : endRow;
169
- var endIndex = startRow < endRow ? endRow : startRow;
187
+ columns = rangeSelection.columns,
188
+ footerRowRange = rangeSelection.footerRowRange;
189
+
190
+ var _getRowIndex = getRowIndex(startRow, endRow),
191
+ startRowIndex = _getRowIndex.startRowIndex,
192
+ endRowIndex = _getRowIndex.endRowIndex;
193
+
194
+ var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
195
+ footerStartRowIndex = _getFooterRowIndex.startRowIndex,
196
+ footerEndRowIndex = _getFooterRowIndex.endRowIndex;
197
+
170
198
  var startCol = columns[0];
171
199
  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));
200
+ var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
201
+ var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
202
+ var match = footerMatch || bodyMatch;
203
+ var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
204
+
205
+ var showCellRangeStyle = match && !matchSingleCell;
206
+ 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
207
  return mergeCellProps(prevCellProps, {
175
208
  className: className
176
209
  });
@@ -196,7 +229,8 @@ function getTargetCell(target, columns) {
196
229
  rowIndex: parseInt(target.getAttribute('data-rowindex')),
197
230
  rowSpan: parseInt(target.getAttribute('rowspan') || 1),
198
231
  code: columnCode,
199
- column: column
232
+ column: column,
233
+ isInFooter: isEleInFooter(target)
200
234
  }
201
235
  };
202
236
  }();
@@ -211,7 +245,19 @@ function getTargetCell(target, columns) {
211
245
  }
212
246
 
213
247
  function isSameCell(cell1, cell2) {
214
- return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
248
+ return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
249
+ }
250
+
251
+ function isEleInFooter(target) {
252
+ while (target && !target.classList.contains(Classes.artTable)) {
253
+ if (target.classList.contains(Classes.tableFooter)) {
254
+ return true;
255
+ }
256
+
257
+ target = target.parentElement;
258
+ }
259
+
260
+ return false;
215
261
  }
216
262
 
217
263
  function getRangeColumns(startCell, endCell, columns) {
@@ -230,4 +276,108 @@ function getRangeColumns(startCell, endCell, columns) {
230
276
  } else {
231
277
  return _sliceInstanceProperty(flatColumns).call(flatColumns, endIndex, startIndex + 1);
232
278
  }
279
+ }
280
+
281
+ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
282
+ var footerRowRange = null;
283
+ var startRow = -1;
284
+ var endRow = -1;
285
+
286
+ var _getCellRangeRow = getCellRangeRow(startCell, endCell),
287
+ _startRow = _getCellRangeRow.startRow,
288
+ _endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
289
+
290
+
291
+ if (!startCell.isInFooter && !endCell.isInFooter) {
292
+ startRow = _startRow;
293
+ endRow = _endRow;
294
+ } else if (startCell.isInFooter && endCell.isInFooter) {
295
+ // 两个单元格都在表底
296
+ footerRowRange = {
297
+ startRow: _startRow,
298
+ endRow: _endRow
299
+ };
300
+ } else {
301
+ // 一个单元格在表体,一个在表底
302
+ if (startCell.isInFooter) {
303
+ startRow = dataSource.length - 1;
304
+ endRow = endCell.rowIndex;
305
+ footerRowRange = {
306
+ startRow: startCell.rowIndex,
307
+ endRow: 0
308
+ };
309
+ } else {
310
+ startRow = startCell.rowIndex;
311
+ endRow = dataSource.length - 1;
312
+ footerRowRange = {
313
+ startRow: 0,
314
+ endRow: endCell.rowIndex
315
+ };
316
+ }
317
+ }
318
+
319
+ return {
320
+ startRow: startRow,
321
+ endRow: endRow,
322
+ footerRowRange: footerRowRange
323
+ };
324
+ }
325
+
326
+ function getCellRangeRow(startCell, endCell) {
327
+ if (isSameCell(startCell, endCell)) {
328
+ return {
329
+ startRow: startCell.rowIndex,
330
+ endRow: startCell.rowIndex
331
+ };
332
+ }
333
+
334
+ var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
335
+ var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
336
+ var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
337
+ return {
338
+ startRow: startRow,
339
+ endRow: endRow
340
+ };
341
+ }
342
+
343
+ function isCellRangeSingleCell(rangeSelection) {
344
+ var startRow = rangeSelection.startRow,
345
+ endRow = rangeSelection.endRow,
346
+ columns = rangeSelection.columns,
347
+ footerRowRange = rangeSelection.footerRowRange;
348
+ var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
349
+ var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
350
+ return isBodySingleCell || isFooterSingleCell;
351
+ }
352
+
353
+ function getRowIndex(startRow, endRow) {
354
+ var isReverse = startRow > endRow;
355
+ var startRowIndex = isReverse ? endRow : startRow;
356
+ var endRowIndex = isReverse ? startRow : endRow;
357
+ return {
358
+ startRowIndex: startRowIndex,
359
+ endRowIndex: endRowIndex
360
+ };
361
+ }
362
+
363
+ function getFooterRowIndex(footerRowRange) {
364
+ if (footerRowRange) {
365
+ return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
366
+ }
367
+
368
+ return {
369
+ startRowIndex: -1,
370
+ endRowIndex: -1
371
+ };
372
+ }
373
+
374
+ function getElementEditable(target) {
375
+ var _context2;
376
+
377
+ if (!target) return;
378
+
379
+ if (_includesInstanceProperty(_context2 = ['input', 'textarea']).call(_context2, target.tagName.toLowerCase())) {
380
+ if (target.type === 'checkbox') return;
381
+ return !target.disabled && !target.readOnly;
382
+ }
233
383
  }
@@ -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 {};