@kdcloudjs/table 1.1.4-canary.1 → 1.1.4
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 +260 -582
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +9 -10
- 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 +2 -7
- package/es/table/base/styles.js +6 -13
- package/es/table/base/table.d.ts +0 -2
- package/es/table/base/table.js +53 -31
- package/es/table/base/utils.d.ts +0 -7
- package/es/table/base/utils.js +1 -29
- package/es/table/pipeline/features/columnDrag.js +4 -5
- package/es/table/pipeline/features/columnFilter.d.ts +2 -2
- package/es/table/pipeline/features/columnFilter.js +15 -35
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +2 -22
- package/es/table/pipeline/features/filter/Filter.d.ts +1 -1
- package/es/table/pipeline/features/filter/Filter.js +20 -16
- package/es/table/pipeline/features/filter/FilterPanel.js +15 -21
- package/es/table/pipeline/features/filter/util.js +4 -4
- package/es/table/pipeline/features/index.d.ts +0 -1
- package/es/table/pipeline/features/index.js +1 -2
- package/es/table/pipeline/features/multiSelect.js +2 -7
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +28 -156
- package/es/table/pipeline/features/singleSelect.js +0 -4
- package/es/table/pipeline/features/treeMode.d.ts +0 -2
- package/es/table/pipeline/features/treeMode.js +20 -18
- package/es/table/pipeline/pipeline.d.ts +1 -5
- package/es/table/pipeline/pipeline.js +10 -11
- package/es/table/utils/mergeCellProps.js +6 -2
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +2 -7
- package/lib/table/base/styles.js +6 -13
- package/lib/table/base/table.d.ts +0 -2
- package/lib/table/base/table.js +53 -31
- package/lib/table/base/utils.d.ts +0 -7
- package/lib/table/base/utils.js +1 -35
- package/lib/table/pipeline/features/columnDrag.js +4 -5
- package/lib/table/pipeline/features/columnFilter.d.ts +2 -2
- package/lib/table/pipeline/features/columnFilter.js +15 -33
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +1 -23
- package/lib/table/pipeline/features/filter/Filter.d.ts +1 -1
- package/lib/table/pipeline/features/filter/Filter.js +20 -17
- package/lib/table/pipeline/features/filter/FilterPanel.js +14 -21
- package/lib/table/pipeline/features/filter/util.js +4 -4
- package/lib/table/pipeline/features/index.d.ts +0 -1
- package/lib/table/pipeline/features/index.js +1 -15
- package/lib/table/pipeline/features/multiSelect.js +1 -6
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +30 -158
- package/lib/table/pipeline/features/singleSelect.js +0 -4
- package/lib/table/pipeline/features/treeMode.d.ts +0 -2
- package/lib/table/pipeline/features/treeMode.js +22 -19
- package/lib/table/pipeline/pipeline.d.ts +1 -5
- package/lib/table/pipeline/pipeline.js +10 -12
- package/lib/table/utils/mergeCellProps.js +6 -2
- package/package.json +3 -3
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +0 -20
- package/es/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/es/table/pipeline/features/footerDataSource.js +0 -25
- package/es/table/utils/keyCode.d.ts +0 -4
- package/es/table/utils/keyCode.js +0 -4
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +0 -30
- package/lib/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/lib/table/pipeline/features/footerDataSource.js +0 -41
- package/lib/table/utils/keyCode.d.ts +0 -4
- package/lib/table/utils/keyCode.js +0 -11
|
@@ -10,11 +10,10 @@ import styled from 'styled-components';
|
|
|
10
10
|
import { Classes } from '../../../base/styles';
|
|
11
11
|
import FilterPanel from './FilterPanel';
|
|
12
12
|
import DefaultFilterContent from './DefaultFilterContent';
|
|
13
|
-
import DefaultFilterIcon from './DefaultFilterIcon';
|
|
14
13
|
import { calculatePopupRelative } from '../../../utils';
|
|
15
14
|
import { addResizeObserver } from '../../../base/utils';
|
|
16
15
|
import cx from 'classnames';
|
|
17
|
-
var HEADER_ICON_OFFSET_Y =
|
|
16
|
+
var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
|
|
18
17
|
|
|
19
18
|
var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
|
|
20
19
|
|
|
@@ -89,6 +88,10 @@ function Filter(_ref2) {
|
|
|
89
88
|
return setShowPanel(false);
|
|
90
89
|
};
|
|
91
90
|
|
|
91
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
92
|
+
e.stopPropagation(); // 阻止触发拖拽
|
|
93
|
+
};
|
|
94
|
+
|
|
92
95
|
var renderPanelContent = function renderPanelContent() {
|
|
93
96
|
if (FilterPanelContent) {
|
|
94
97
|
return /*#__PURE__*/React.createElement(FilterPanelContent, {
|
|
@@ -108,12 +111,6 @@ function Filter(_ref2) {
|
|
|
108
111
|
};
|
|
109
112
|
|
|
110
113
|
var handleIconClick = function handleIconClick(e) {
|
|
111
|
-
// 只有当icon区域点击会触发面板展开
|
|
112
|
-
// 防止 createPortal 区域的点击触发该事件
|
|
113
|
-
if (!e.currentTarget.contains(e.target)) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
114
|
if (stopClickEventPropagation) {
|
|
118
115
|
e.stopPropagation();
|
|
119
116
|
}
|
|
@@ -122,20 +119,27 @@ function Filter(_ref2) {
|
|
|
122
119
|
};
|
|
123
120
|
|
|
124
121
|
var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
|
|
125
|
-
var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
|
|
126
122
|
return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
|
|
127
123
|
style: style,
|
|
128
124
|
className: iconClassName,
|
|
129
|
-
|
|
125
|
+
onMouseDown: handleMouseDown,
|
|
126
|
+
ref: iconRef
|
|
130
127
|
}, /*#__PURE__*/React.createElement("span", {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
},
|
|
128
|
+
className: Classes.filterIcon,
|
|
129
|
+
onClick: handleIconClick
|
|
130
|
+
}, filterIcon || /*#__PURE__*/React.createElement("svg", {
|
|
134
131
|
width: size,
|
|
135
|
-
height: size
|
|
136
|
-
|
|
132
|
+
height: size,
|
|
133
|
+
viewBox: "64 64 896 896",
|
|
134
|
+
focusable: "false",
|
|
135
|
+
"data-icon": "filter",
|
|
136
|
+
fill: "currentColor",
|
|
137
|
+
"aria-hidden": "true"
|
|
138
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
139
|
+
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"
|
|
140
|
+
}))), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
|
|
137
141
|
ele: iconRef.current,
|
|
138
|
-
filterIcon:
|
|
142
|
+
filterIcon: filterIcon,
|
|
139
143
|
hidePanel: hidePanel,
|
|
140
144
|
renderPanelContent: renderPanelContent
|
|
141
145
|
}), document.body));
|
|
@@ -4,11 +4,10 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
|
|
|
4
4
|
|
|
5
5
|
var _templateObject;
|
|
6
6
|
|
|
7
|
-
import React, { useEffect, useState
|
|
7
|
+
import React, { useEffect, useState } from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
|
|
10
|
-
|
|
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"])));
|
|
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"])));
|
|
12
11
|
|
|
13
12
|
var useWindowEvents = function useWindowEvents(func, evens) {
|
|
14
13
|
React.useEffect(function () {
|
|
@@ -50,36 +49,31 @@ function FilterPanel(_ref) {
|
|
|
50
49
|
setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
|
|
51
50
|
setVisible(true);
|
|
52
51
|
}, [position]);
|
|
53
|
-
var hasPopupMouseEvent = useRef(false);
|
|
54
|
-
|
|
55
|
-
var handleMouseEvent = function handleMouseEvent() {
|
|
56
|
-
// 当弹出的过滤面板内部发生鼠标按下、抬起事件时,标记当前事件,并在click捕获期清除标记,用来确定鼠标按下、抬起发生在过滤面板内部
|
|
57
|
-
// 利用了React.createPortal冒泡是根据React Tree的特性:
|
|
58
|
-
// https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
|
|
59
|
-
hasPopupMouseEvent.current = true;
|
|
60
|
-
};
|
|
61
|
-
|
|
62
52
|
useWindowEvents(function (e) {
|
|
63
|
-
!isContainPanel(e) &&
|
|
64
|
-
|
|
65
|
-
}, ['click']);
|
|
53
|
+
return !isContainPanel(e) && onClose();
|
|
54
|
+
}, ['mousedown']);
|
|
66
55
|
return /*#__PURE__*/React.createElement(FilterPanelStyle, {
|
|
67
56
|
style: _extends(_extends({}, style), {
|
|
68
57
|
left: visible ? perfectPosition.x : 0,
|
|
69
58
|
top: visible ? perfectPosition.y : 0,
|
|
70
59
|
opacity: visible ? 1 : 0
|
|
71
60
|
}),
|
|
72
|
-
onMouseDown: handleMouseEvent,
|
|
73
|
-
onMouseUp: handleMouseEvent,
|
|
74
61
|
ref: ref
|
|
75
62
|
}, /*#__PURE__*/React.createElement("div", {
|
|
76
63
|
className: 'popup-header'
|
|
77
64
|
}, /*#__PURE__*/React.createElement("span", {
|
|
78
65
|
className: 'popup-header-icon'
|
|
79
|
-
}, filterIcon || /*#__PURE__*/React.createElement(
|
|
80
|
-
width:
|
|
81
|
-
height:
|
|
82
|
-
|
|
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", {
|
|
83
77
|
className: "popup-body"
|
|
84
78
|
}, children));
|
|
85
79
|
}
|
|
@@ -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);
|
|
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);
|
|
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 !== 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
|
|
47
|
+
return value !== data;
|
|
48
48
|
};
|
|
49
49
|
}
|
|
50
50
|
}, {
|
|
@@ -16,4 +16,3 @@ 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';
|
|
@@ -15,5 +15,4 @@ 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';
|
|
19
|
-
export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
|
|
18
|
+
export { mergeCellHover } from './mergeCellHover';
|
|
@@ -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 {
|
|
8
|
+
import { 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,8 +44,7 @@ export function multiSelect() {
|
|
|
44
44
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
45
45
|
|
|
46
46
|
var allKeys = [];
|
|
47
|
-
|
|
48
|
-
flatDataSource.forEach(function (row, rowIndex) {
|
|
47
|
+
dataSource.forEach(function (row, rowIndex) {
|
|
49
48
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
50
49
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
51
50
|
|
|
@@ -111,10 +110,6 @@ export function multiSelect() {
|
|
|
111
110
|
return mergeCellProps(preCellProps, checkboxCellProps);
|
|
112
111
|
},
|
|
113
112
|
render: function render(_, row, rowIndex) {
|
|
114
|
-
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
115
|
-
return null;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
113
|
var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
119
114
|
var checked = set.has(key);
|
|
120
115
|
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 lastClickCell = "lastClickCell";
|
|
10
10
|
export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -10,42 +10,40 @@ 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
|
|
13
|
+
export var lastClickCell = '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;
|
|
19
18
|
|
|
20
19
|
if (!tableBody) {
|
|
21
20
|
return pipeline;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
var columns = pipeline.getColumns();
|
|
25
|
-
var dataSource = pipeline.getDataSource();
|
|
26
24
|
|
|
27
25
|
var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
|
|
28
26
|
var _a;
|
|
29
27
|
|
|
30
28
|
pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
|
|
31
29
|
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
|
|
32
|
-
};
|
|
30
|
+
}; // if (!pipeline.getFeatureOptions(rangeSelectionKey)) {
|
|
31
|
+
// pipeline.setFeatureOptions(rangeSelectionKey, {
|
|
32
|
+
// optionKey: rangeSelectionKey,
|
|
33
|
+
// rangeSelectedChange: rangeSelectedChange
|
|
34
|
+
// })
|
|
35
|
+
// }
|
|
36
|
+
|
|
33
37
|
|
|
34
38
|
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
|
|
35
|
-
if (!startDragCell || !draggingCell) return;
|
|
39
|
+
if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
|
|
36
40
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
37
|
-
|
|
38
|
-
var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
|
|
39
|
-
startRow = _getRangeSelectionRow.startRow,
|
|
40
|
-
endRow = _getRangeSelectionRow.endRow,
|
|
41
|
-
footerRowRange = _getRangeSelectionRow.footerRowRange;
|
|
42
|
-
|
|
41
|
+
var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
|
|
43
42
|
var rangeSelection = {
|
|
44
|
-
startRow:
|
|
45
|
-
endRow:
|
|
43
|
+
startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
|
|
44
|
+
endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
|
|
46
45
|
columns: rangeColumns,
|
|
47
|
-
startColumn: startDragCell.column
|
|
48
|
-
footerRowRange: footerRowRange
|
|
46
|
+
startColumn: startDragCell.column
|
|
49
47
|
};
|
|
50
48
|
rangeSelectedChange(rangeSelection);
|
|
51
49
|
};
|
|
@@ -56,23 +54,23 @@ export function rangeSelection(opts) {
|
|
|
56
54
|
|
|
57
55
|
if (clickCell) {
|
|
58
56
|
if (event.shiftKey) {
|
|
59
|
-
var _lastClickCell = pipeline.getStateAtKey(
|
|
57
|
+
var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
|
|
60
58
|
|
|
61
59
|
if (_lastClickCell) {
|
|
62
60
|
setRangeSelection(_lastClickCell, clickCell);
|
|
63
61
|
} else {
|
|
64
62
|
// 第一次进来就按住shift键,这时候要记住点击的单元格
|
|
65
|
-
pipeline.setStateAtKey(
|
|
63
|
+
pipeline.setStateAtKey(lastClickCell, clickCell);
|
|
66
64
|
}
|
|
67
65
|
} else {
|
|
68
|
-
pipeline.setStateAtKey(
|
|
69
|
-
|
|
66
|
+
pipeline.setStateAtKey(lastClickCell, clickCell);
|
|
67
|
+
rangeSelectedChange(null);
|
|
70
68
|
}
|
|
71
69
|
}
|
|
72
70
|
};
|
|
73
71
|
|
|
74
72
|
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
75
|
-
if (mouseDownEvent.button !== 0 || !
|
|
73
|
+
if (mouseDownEvent.button !== 0 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
|
|
76
74
|
// shift + 点击选中
|
|
77
75
|
|
|
78
76
|
shiftKeySelect(mouseDownEvent);
|
|
@@ -128,11 +126,10 @@ export function rangeSelection(opts) {
|
|
|
128
126
|
};
|
|
129
127
|
|
|
130
128
|
var onKeyDown = function onKeyDown(e) {
|
|
131
|
-
if (!
|
|
129
|
+
if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
|
|
132
130
|
|
|
133
131
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
134
132
|
var rowLen = pipeline.getDataSource().length;
|
|
135
|
-
var footerDataSource = pipeline.getFooterDataSource() || [];
|
|
136
133
|
|
|
137
134
|
if (columns.length && rowLen) {
|
|
138
135
|
opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
|
|
@@ -140,11 +137,7 @@ export function rangeSelection(opts) {
|
|
|
140
137
|
startRow: 0,
|
|
141
138
|
endRow: rowLen - 1,
|
|
142
139
|
columns: columns,
|
|
143
|
-
startColumn: columns[0]
|
|
144
|
-
footerRowRange: footerDataSource.length > 0 ? {
|
|
145
|
-
startRow: 0,
|
|
146
|
-
endRow: footerDataSource.length - 1
|
|
147
|
-
} : null
|
|
140
|
+
startColumn: columns[0]
|
|
148
141
|
});
|
|
149
142
|
}
|
|
150
143
|
}
|
|
@@ -153,8 +146,7 @@ export function rangeSelection(opts) {
|
|
|
153
146
|
pipeline.addTableProps({
|
|
154
147
|
onMouseDown: onMouseDown,
|
|
155
148
|
onKeyDown: onKeyDown,
|
|
156
|
-
tabIndex: -1
|
|
157
|
-
className: cx([Classes.rangeSelection])
|
|
149
|
+
tabIndex: -1
|
|
158
150
|
}); // todo: 后面可以把mousedown放到一个流里面
|
|
159
151
|
|
|
160
152
|
return pipeline.mapColumns(makeRecursiveMapper(function (col) {
|
|
@@ -170,29 +162,15 @@ export function rangeSelection(opts) {
|
|
|
170
162
|
var _cx;
|
|
171
163
|
|
|
172
164
|
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
173
|
-
var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
174
165
|
var startRow = rangeSelection.startRow,
|
|
175
166
|
endRow = rangeSelection.endRow,
|
|
176
|
-
columns = rangeSelection.columns
|
|
177
|
-
|
|
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
|
-
|
|
167
|
+
columns = rangeSelection.columns;
|
|
168
|
+
var startIndex = startRow < endRow ? startRow : endRow;
|
|
169
|
+
var endIndex = startRow < endRow ? endRow : startRow;
|
|
187
170
|
var startCol = columns[0];
|
|
188
171
|
var endCol = columns[columns.length - 1];
|
|
189
|
-
var
|
|
190
|
-
var
|
|
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));
|
|
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));
|
|
196
174
|
return mergeCellProps(prevCellProps, {
|
|
197
175
|
className: className
|
|
198
176
|
});
|
|
@@ -218,8 +196,7 @@ function getTargetCell(target, columns) {
|
|
|
218
196
|
rowIndex: parseInt(target.getAttribute('data-rowindex')),
|
|
219
197
|
rowSpan: parseInt(target.getAttribute('rowspan') || 1),
|
|
220
198
|
code: columnCode,
|
|
221
|
-
column: column
|
|
222
|
-
isInFooter: isEleInFooter(target)
|
|
199
|
+
column: column
|
|
223
200
|
}
|
|
224
201
|
};
|
|
225
202
|
}();
|
|
@@ -234,19 +211,7 @@ function getTargetCell(target, columns) {
|
|
|
234
211
|
}
|
|
235
212
|
|
|
236
213
|
function isSameCell(cell1, cell2) {
|
|
237
|
-
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code
|
|
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;
|
|
214
|
+
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
|
|
250
215
|
}
|
|
251
216
|
|
|
252
217
|
function getRangeColumns(startCell, endCell, columns) {
|
|
@@ -265,97 +230,4 @@ function getRangeColumns(startCell, endCell, columns) {
|
|
|
265
230
|
} else {
|
|
266
231
|
return _sliceInstanceProperty(flatColumns).call(flatColumns, endIndex, startIndex + 1);
|
|
267
232
|
}
|
|
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
|
-
};
|
|
361
233
|
}
|
|
@@ -60,10 +60,6 @@ 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
|
-
|
|
67
63
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
68
64
|
return /*#__PURE__*/React.createElement(Radio, {
|
|
69
65
|
checked: value === rowKey,
|
|
@@ -32,8 +32,6 @@ export interface TreeModeFeatureOptions {
|
|
|
32
32
|
stopClickEventPropagation?: boolean;
|
|
33
33
|
/** 指定表格每一行元信息的记录字段 */
|
|
34
34
|
treeMetaKey?: string | symbol;
|
|
35
|
-
/** 指定展开列 */
|
|
36
|
-
expandColCode?: string;
|
|
37
35
|
}
|
|
38
36
|
export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
39
37
|
export {};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
2
1
|
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
|
3
2
|
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
|
|
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); }
|
|
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
|
|
18
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
19
19
|
import cx from 'classnames';
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
|
|
@@ -31,6 +31,11 @@ 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
|
+
|
|
34
39
|
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 : [];
|
|
35
40
|
var openKeySet = new _Set(openKeys);
|
|
36
41
|
|
|
@@ -85,7 +90,7 @@ export function treeMode() {
|
|
|
85
90
|
try {
|
|
86
91
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
87
92
|
var node = _step.value;
|
|
88
|
-
var rowKey =
|
|
93
|
+
var rowKey = node[primaryKey];
|
|
89
94
|
var expanded = openKeySet.has(rowKey);
|
|
90
95
|
var isLeaf = isLeafNode(node, {
|
|
91
96
|
depth: depth,
|
|
@@ -115,20 +120,18 @@ export function treeMode() {
|
|
|
115
120
|
}
|
|
116
121
|
|
|
117
122
|
function processColumns(columns) {
|
|
123
|
+
var _context2;
|
|
124
|
+
|
|
118
125
|
if (columns.length === 0) {
|
|
119
126
|
return columns;
|
|
120
127
|
}
|
|
121
128
|
|
|
122
|
-
var
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
expandColIndex = expandColIndex === -1 ? 0 : expandColIndex;
|
|
128
|
-
var expandCol = columns[expandColIndex];
|
|
129
|
+
var _columns = _toArray(columns),
|
|
130
|
+
firstCol = _columns[0],
|
|
131
|
+
others = _sliceInstanceProperty(_columns).call(_columns, 1);
|
|
129
132
|
|
|
130
133
|
var render = function render(value, record, recordIndex) {
|
|
131
|
-
var content = internals.safeRender(
|
|
134
|
+
var content = internals.safeRender(firstCol, record, recordIndex);
|
|
132
135
|
|
|
133
136
|
if (record[treeMetaKey] == null) {
|
|
134
137
|
// 没有 treeMeta 信息的话,就返回原先的渲染结果
|
|
@@ -188,7 +191,7 @@ export function treeMode() {
|
|
|
188
191
|
};
|
|
189
192
|
|
|
190
193
|
var getCellProps = function getCellProps(value, record, rowIndex) {
|
|
191
|
-
var prevProps = internals.safeGetCellProps(
|
|
194
|
+
var prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);
|
|
192
195
|
|
|
193
196
|
if (record[treeMetaKey] == null) {
|
|
194
197
|
// 没有 treeMeta 信息的话,就返回原先的 cellProps
|
|
@@ -217,16 +220,15 @@ export function treeMode() {
|
|
|
217
220
|
});
|
|
218
221
|
};
|
|
219
222
|
|
|
220
|
-
|
|
223
|
+
return _concatInstanceProperty(_context2 = [_extends(_extends({}, firstCol), {
|
|
221
224
|
title: /*#__PURE__*/React.createElement("span", {
|
|
222
225
|
style: {
|
|
223
226
|
marginLeft: iconIndent + iconWidth + iconGap
|
|
224
227
|
}
|
|
225
|
-
}, internals.safeRenderHeader(
|
|
228
|
+
}, internals.safeRenderHeader(firstCol)),
|
|
226
229
|
render: render,
|
|
227
|
-
getCellProps: clickArea === 'cell' ? getCellProps :
|
|
228
|
-
});
|
|
229
|
-
return _toConsumableArray(columns);
|
|
230
|
+
getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps
|
|
231
|
+
})]).call(_context2, _toConsumableArray(others));
|
|
230
232
|
}
|
|
231
233
|
};
|
|
232
234
|
}
|
|
@@ -36,7 +36,7 @@ export declare class TablePipeline {
|
|
|
36
36
|
private _tableProps;
|
|
37
37
|
private _dataSource;
|
|
38
38
|
private _columns;
|
|
39
|
-
private _footerDataSource
|
|
39
|
+
private _footerDataSource;
|
|
40
40
|
static defaultIndents: TablePipelineIndentsConfig;
|
|
41
41
|
readonly ctx: TablePipelineCtx;
|
|
42
42
|
private readonly state;
|
|
@@ -88,10 +88,6 @@ export declare class TablePipeline {
|
|
|
88
88
|
setFeatureOptions(optionKey: string, value: any): void;
|
|
89
89
|
/** 获取 BaseTable 的 props,结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
|
|
90
90
|
getProps(this: TablePipeline): TableProps;
|
|
91
|
-
/**
|
|
92
|
-
* 清除范围选中内容
|
|
93
|
-
*/
|
|
94
|
-
clearRangeSelection(): void;
|
|
95
91
|
}
|
|
96
92
|
export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
|
|
97
93
|
export {};
|