@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.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +905 -346
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +10 -9
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/styles.d.ts +11 -2
- package/es/table/base/styles.js +19 -8
- package/es/table/base/table.d.ts +3 -1
- package/es/table/base/table.js +35 -56
- package/es/table/base/utils.d.ts +7 -0
- package/es/table/base/utils.js +36 -2
- package/es/table/common-views.js +1 -1
- package/es/table/pipeline/features/colGroupExtendable.d.ts +8 -0
- package/es/table/pipeline/features/colGroupExtendable.js +105 -0
- package/es/table/pipeline/features/columnDrag.js +5 -4
- package/es/table/pipeline/features/columnFilter.d.ts +8 -2
- package/es/table/pipeline/features/columnFilter.js +43 -19
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/contextMenu.d.ts +5 -1
- package/es/table/pipeline/features/contextMenu.js +18 -28
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +27 -7
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
- package/es/table/pipeline/features/filter/Filter.d.ts +5 -2
- package/es/table/pipeline/features/filter/Filter.js +65 -37
- package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/es/table/pipeline/features/filter/FilterPanel.js +40 -21
- package/es/table/pipeline/features/filter/util.js +4 -4
- package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/es/table/pipeline/features/footerDataSource.js +25 -0
- package/es/table/pipeline/features/index.d.ts +2 -0
- package/es/table/pipeline/features/index.js +3 -1
- package/es/table/pipeline/features/multiSelect.js +7 -2
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +180 -30
- package/es/table/pipeline/features/singleSelect.js +4 -0
- package/es/table/pipeline/features/treeMode.d.ts +2 -0
- package/es/table/pipeline/features/treeMode.js +20 -21
- package/es/table/pipeline/pipeline.d.ts +1 -1
- package/es/table/pipeline/pipeline.js +4 -9
- package/es/table/utils/element.d.ts +1 -0
- package/es/table/utils/element.js +4 -0
- package/es/table/utils/keyCode.d.ts +5 -0
- package/es/table/utils/keyCode.js +5 -0
- package/es/table/utils/mergeCellProps.js +2 -6
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +11 -2
- package/lib/table/base/styles.js +19 -8
- package/lib/table/base/table.d.ts +3 -1
- package/lib/table/base/table.js +35 -56
- package/lib/table/base/utils.d.ts +7 -0
- package/lib/table/base/utils.js +43 -2
- package/lib/table/common-views.js +1 -1
- package/lib/table/pipeline/features/colGroupExtendable.d.ts +8 -0
- package/lib/table/pipeline/features/colGroupExtendable.js +126 -0
- package/lib/table/pipeline/features/columnDrag.js +5 -4
- package/lib/table/pipeline/features/columnFilter.d.ts +8 -2
- package/lib/table/pipeline/features/columnFilter.js +41 -19
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/contextMenu.d.ts +5 -1
- package/lib/table/pipeline/features/contextMenu.js +17 -28
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +28 -6
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
- package/lib/table/pipeline/features/filter/Filter.d.ts +5 -2
- package/lib/table/pipeline/features/filter/Filter.js +68 -37
- package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/lib/table/pipeline/features/filter/FilterPanel.js +42 -20
- package/lib/table/pipeline/features/filter/util.js +4 -4
- package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/lib/table/pipeline/features/footerDataSource.js +41 -0
- package/lib/table/pipeline/features/index.d.ts +2 -0
- package/lib/table/pipeline/features/index.js +23 -1
- package/lib/table/pipeline/features/multiSelect.js +6 -1
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +183 -32
- package/lib/table/pipeline/features/singleSelect.js +4 -0
- package/lib/table/pipeline/features/treeMode.d.ts +2 -0
- package/lib/table/pipeline/features/treeMode.js +21 -23
- package/lib/table/pipeline/pipeline.d.ts +1 -1
- package/lib/table/pipeline/pipeline.js +4 -9
- package/lib/table/utils/element.d.ts +1 -0
- package/lib/table/utils/element.js +6 -0
- package/lib/table/utils/keyCode.d.ts +5 -0
- package/lib/table/utils/keyCode.js +12 -0
- package/lib/table/utils/mergeCellProps.js +2 -6
- 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
|
-
|
|
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
|
-
|
|
54
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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:
|
|
66
|
-
}, filterIcon || /*#__PURE__*/React.createElement(
|
|
67
|
-
width:
|
|
68
|
-
height:
|
|
69
|
-
|
|
70
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
};
|
|
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
|
|
37
|
+
if (!startDragCell || !draggingCell) return;
|
|
40
38
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
41
|
-
|
|
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:
|
|
44
|
-
endRow:
|
|
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(
|
|
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(
|
|
74
|
+
pipeline.setStateAtKey(lastClickCellKey, clickCell);
|
|
64
75
|
}
|
|
65
76
|
} else {
|
|
66
|
-
pipeline.setStateAtKey(
|
|
67
|
-
|
|
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
|
-
|
|
169
|
-
|
|
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
|
|
173
|
-
var
|
|
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 {};
|