@kdcloudjs/table 1.2.0-canary.9 → 1.2.0
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 +599 -119
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +8 -8
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/header.d.ts +2 -1
- package/es/table/base/header.js +4 -2
- package/es/table/base/helpers/TableDOMUtils.js +3 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/renderTemplates.js +24 -10
- package/es/table/base/styles.d.ts +7 -0
- package/es/table/base/styles.js +9 -2
- package/es/table/base/table.d.ts +2 -1
- package/es/table/base/table.js +73 -46
- package/es/table/pipeline/features/autoFill.js +3 -1
- package/es/table/pipeline/features/columnDrag.js +11 -7
- package/es/table/pipeline/features/columnFilter.js +1 -1
- package/es/table/pipeline/features/index.d.ts +1 -0
- package/es/table/pipeline/features/index.js +2 -1
- package/es/table/pipeline/features/multiSelect.js +18 -35
- package/es/table/pipeline/features/rangeSelection.js +3 -2
- package/es/table/pipeline/features/rowDrag.d.ts +30 -0
- package/es/table/pipeline/features/rowDrag.js +349 -0
- package/es/table/pipeline/features/singleSelect.js +6 -4
- package/es/table/pipeline/features/treeMode.js +6 -0
- package/es/table/pipeline/pipeline.d.ts +2 -0
- package/es/table/pipeline/pipeline.js +9 -1
- package/es/table/utils/index.d.ts +1 -0
- package/es/table/utils/index.js +2 -1
- package/es/table/utils/selectColumn.d.ts +4 -0
- package/es/table/utils/selectColumn.js +6 -0
- package/lib/table/base/header.d.ts +2 -1
- package/lib/table/base/header.js +4 -2
- package/lib/table/base/helpers/TableDOMUtils.js +3 -1
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/renderTemplates.js +24 -10
- package/lib/table/base/styles.d.ts +7 -0
- package/lib/table/base/styles.js +9 -2
- package/lib/table/base/table.d.ts +2 -1
- package/lib/table/base/table.js +73 -46
- package/lib/table/pipeline/features/autoFill.js +3 -1
- package/lib/table/pipeline/features/columnDrag.js +10 -6
- package/lib/table/pipeline/features/columnFilter.js +1 -1
- package/lib/table/pipeline/features/index.d.ts +1 -0
- package/lib/table/pipeline/features/index.js +9 -1
- package/lib/table/pipeline/features/multiSelect.js +20 -38
- package/lib/table/pipeline/features/rangeSelection.js +3 -2
- package/lib/table/pipeline/features/rowDrag.d.ts +30 -0
- package/lib/table/pipeline/features/rowDrag.js +371 -0
- package/lib/table/pipeline/features/singleSelect.js +8 -5
- package/lib/table/pipeline/features/treeMode.js +6 -0
- package/lib/table/pipeline/pipeline.d.ts +2 -0
- package/lib/table/pipeline/pipeline.js +9 -1
- package/lib/table/utils/index.d.ts +1 -0
- package/lib/table/utils/index.js +21 -1
- package/lib/table/utils/selectColumn.d.ts +4 -0
- package/lib/table/utils/selectColumn.js +16 -0
- package/package.json +3 -3
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
2
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
3
4
|
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
4
5
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
5
6
|
import React from 'react';
|
|
6
7
|
import { internals } from '../../internals';
|
|
7
8
|
import { always, arrayUtils } from '../../utils/others';
|
|
8
|
-
import { collectNodes, mergeCellProps } from '../../utils';
|
|
9
|
-
var fullRowsSetKey = 'fullRowsSetKey';
|
|
10
|
-
var allEnableKeys = 'allEnableKeys';
|
|
11
|
-
var selectValueSetKey = 'selectValueSetKey';
|
|
9
|
+
import { collectNodes, mergeCellProps, MULTI_SELECT_MARK_PROPNAME } from '../../utils';
|
|
12
10
|
export function multiSelect() {
|
|
13
11
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
14
12
|
return function multiSelectStep(pipeline) {
|
|
15
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
13
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
16
14
|
|
|
17
15
|
var stateKey = 'multiSelect';
|
|
18
16
|
var Checkbox = pipeline.ctx.components.Checkbox;
|
|
@@ -39,8 +37,9 @@ export function multiSelect() {
|
|
|
39
37
|
action: action
|
|
40
38
|
});
|
|
41
39
|
};
|
|
42
|
-
/** dataSource 中包含的所有 keys */
|
|
43
40
|
|
|
41
|
+
var dataSource = pipeline.getDataSource();
|
|
42
|
+
/** dataSource 中包含的所有 keys */
|
|
44
43
|
|
|
45
44
|
var fullKeySet = new _Set();
|
|
46
45
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
@@ -50,7 +49,7 @@ export function multiSelect() {
|
|
|
50
49
|
var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
|
|
51
50
|
|
|
52
51
|
var isAnyChecked = false;
|
|
53
|
-
var flatDataSource = collectNodes(
|
|
52
|
+
var flatDataSource = collectNodes(dataSource);
|
|
54
53
|
flatDataSource.forEach(function (row, rowIndex) {
|
|
55
54
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
56
55
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
@@ -78,8 +77,6 @@ export function multiSelect() {
|
|
|
78
77
|
checked: isAllChecked,
|
|
79
78
|
indeterminate: !isAllChecked && isAnyChecked,
|
|
80
79
|
onChange: function onChange(_) {
|
|
81
|
-
var allKeys = pipeline.getFeatureOptions(allEnableKeys);
|
|
82
|
-
|
|
83
80
|
if (isAllChecked) {
|
|
84
81
|
_onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
|
|
85
82
|
} else {
|
|
@@ -100,11 +97,9 @@ export function multiSelect() {
|
|
|
100
97
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
101
98
|
var checkboxCellProps = {};
|
|
102
99
|
var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
|
|
103
|
-
var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
|
|
104
|
-
var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
|
|
105
100
|
|
|
106
|
-
if (
|
|
107
|
-
var prevChecked =
|
|
101
|
+
if (fullKeySet.has(rowKey) && clickArea === 'cell') {
|
|
102
|
+
var prevChecked = set.has(rowKey);
|
|
108
103
|
var disabled = isDisabled(row, rowIndex);
|
|
109
104
|
checkboxCellProps = {
|
|
110
105
|
style: {
|
|
@@ -128,8 +123,7 @@ export function multiSelect() {
|
|
|
128
123
|
}
|
|
129
124
|
|
|
130
125
|
var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
131
|
-
var
|
|
132
|
-
var checked = selectValueSet.has(key);
|
|
126
|
+
var checked = set.has(key);
|
|
133
127
|
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
134
128
|
checked: checked,
|
|
135
129
|
disabled: isDisabled(row, rowIndex),
|
|
@@ -150,12 +144,13 @@ export function multiSelect() {
|
|
|
150
144
|
}
|
|
151
145
|
} : undefined
|
|
152
146
|
});
|
|
153
|
-
}
|
|
147
|
+
},
|
|
148
|
+
features: _extends(_extends({}, (_l = opts.checkboxColumn) === null || _l === void 0 ? void 0 : _l.features), _defineProperty({}, MULTI_SELECT_MARK_PROPNAME, true))
|
|
154
149
|
});
|
|
155
150
|
|
|
156
151
|
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
157
152
|
|
|
158
|
-
var checkboxPlacement = (
|
|
153
|
+
var checkboxPlacement = (_m = opts.checkboxPlacement) !== null && _m !== void 0 ? _m : 'start';
|
|
159
154
|
|
|
160
155
|
if (checkboxPlacement === 'start') {
|
|
161
156
|
nextColumns.unshift(checkboxColumn);
|
|
@@ -168,9 +163,8 @@ export function multiSelect() {
|
|
|
168
163
|
|
|
169
164
|
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
170
165
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
171
|
-
var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
|
|
172
166
|
|
|
173
|
-
if (!
|
|
167
|
+
if (!fullKeySet.has(rowKey)) {
|
|
174
168
|
// rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的,multiSelect 不对之后生成的行进行处理
|
|
175
169
|
return;
|
|
176
170
|
}
|
|
@@ -178,8 +172,7 @@ export function multiSelect() {
|
|
|
178
172
|
var style = {};
|
|
179
173
|
var className;
|
|
180
174
|
var onClick;
|
|
181
|
-
var
|
|
182
|
-
var checked = selectValueSet.has(rowKey);
|
|
175
|
+
var checked = set.has(rowKey);
|
|
183
176
|
|
|
184
177
|
if (opts.highlightRowWhenSelected && checked) {
|
|
185
178
|
className = 'highlight';
|
|
@@ -206,32 +199,22 @@ export function multiSelect() {
|
|
|
206
199
|
style: style,
|
|
207
200
|
onClick: onClick
|
|
208
201
|
};
|
|
209
|
-
});
|
|
210
|
-
|
|
211
|
-
pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
|
|
212
|
-
pipeline.setFeatureOptions(allEnableKeys, allKeys);
|
|
213
|
-
pipeline.setFeatureOptions(selectValueSetKey, set);
|
|
214
|
-
fullKeySet = null;
|
|
215
|
-
allKeys = null;
|
|
216
|
-
set = null;
|
|
202
|
+
});
|
|
217
203
|
return pipeline;
|
|
218
204
|
|
|
219
205
|
function onCheckboxChange(prevChecked, key, batch) {
|
|
220
206
|
var batchKeys = [key];
|
|
221
207
|
|
|
222
208
|
if (batch && lastKey) {
|
|
223
|
-
var
|
|
224
|
-
|
|
225
|
-
var lastIdx = _allKeys.indexOf(lastKey);
|
|
226
|
-
|
|
227
|
-
var cntIdx = _allKeys.indexOf(key);
|
|
209
|
+
var lastIdx = allKeys.indexOf(lastKey);
|
|
210
|
+
var cntIdx = allKeys.indexOf(key);
|
|
228
211
|
|
|
229
212
|
var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
|
|
230
213
|
_ref2 = _slicedToArray(_ref, 2),
|
|
231
214
|
start = _ref2[0],
|
|
232
215
|
end = _ref2[1];
|
|
233
216
|
|
|
234
|
-
batchKeys = _sliceInstanceProperty(
|
|
217
|
+
batchKeys = _sliceInstanceProperty(allKeys).call(allKeys, start, end + 1);
|
|
235
218
|
}
|
|
236
219
|
|
|
237
220
|
if (prevChecked) {
|
|
@@ -145,7 +145,9 @@ export function rangeSelection(opts) {
|
|
|
145
145
|
|
|
146
146
|
var isCtrlKey = mouseDownEvent.ctrlKey || mouseDownEvent.metaKey;
|
|
147
147
|
var isShiftKey = mouseDownEvent.shiftKey;
|
|
148
|
-
var target = mouseDownEvent.target;
|
|
148
|
+
var target = mouseDownEvent.target;
|
|
149
|
+
var startDragCell = getTargetCell(target, columns);
|
|
150
|
+
if (!startDragCell) return; // 每次点击时先确认初始生效的框选范围
|
|
149
151
|
|
|
150
152
|
setStartSelectedCellRanges(isCtrlKey, isShiftKey);
|
|
151
153
|
|
|
@@ -154,7 +156,6 @@ export function rangeSelection(opts) {
|
|
|
154
156
|
return;
|
|
155
157
|
}
|
|
156
158
|
|
|
157
|
-
var startDragCell = getTargetCell(target, columns);
|
|
158
159
|
pipeline.setFeatureOptions(lastClickCellKey, startDragCell);
|
|
159
160
|
var draggingCell = startDragCell;
|
|
160
161
|
var mousemove$ = fromEvent(window, 'mousemove');
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { TablePipeline } from '../pipeline';
|
|
2
|
+
import { ArtColumn } from '../../interfaces';
|
|
3
|
+
interface RowDragEvent {
|
|
4
|
+
startRowIndex: number;
|
|
5
|
+
startRow: any;
|
|
6
|
+
endRowIndex: number;
|
|
7
|
+
endRow: any;
|
|
8
|
+
isFinished: boolean;
|
|
9
|
+
dragPosition: string;
|
|
10
|
+
}
|
|
11
|
+
export interface RowDragFeatureOptions {
|
|
12
|
+
/** 拖拽开始事件 */
|
|
13
|
+
onDragStart?: (event: RowDragEvent) => void;
|
|
14
|
+
/** 拖拽移动事件 */
|
|
15
|
+
onDragMove?: (event: RowDragEvent) => void;
|
|
16
|
+
/** 拖拽结束事件 */
|
|
17
|
+
onDragEnd?: (event: RowDragEvent) => void;
|
|
18
|
+
/** 判断一行是否要禁用拖拽 */
|
|
19
|
+
isDisabled?: (row: any, rowIndex: number) => boolean;
|
|
20
|
+
/** 拖拽列定义 */
|
|
21
|
+
rowDragColumn?: ArtColumn;
|
|
22
|
+
/** 行高 */
|
|
23
|
+
rowHeight?: number;
|
|
24
|
+
/** 拖拽过程中是否禁止滚动条滚动 */
|
|
25
|
+
suppressScrollMove?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
|
|
28
|
+
export declare const rowDragKey = "rowDragKey";
|
|
29
|
+
export declare function rowDrag(opt: RowDragFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
3
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { fromEvent } from 'rxjs';
|
|
6
|
+
import { map, takeUntil } from 'rxjs/operators';
|
|
7
|
+
import cx from 'classnames';
|
|
8
|
+
import { Classes } from '../../base/styles';
|
|
9
|
+
export var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
|
|
10
|
+
export var rowDragKey = 'rowDragKey';
|
|
11
|
+
var SCROLL_OFFSET = 30;
|
|
12
|
+
var defaultRowDragColumn = {
|
|
13
|
+
name: '拖拽列',
|
|
14
|
+
code: ROW_DRAG_COLUMN_CODE,
|
|
15
|
+
lock: true,
|
|
16
|
+
title: '',
|
|
17
|
+
width: 40,
|
|
18
|
+
align: 'center',
|
|
19
|
+
getCellProps: function getCellProps(value, row, rowIndex) {
|
|
20
|
+
return {
|
|
21
|
+
className: cx(Classes.rowDragCell)
|
|
22
|
+
};
|
|
23
|
+
},
|
|
24
|
+
render: function render(value, row, rowIndex) {
|
|
25
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
26
|
+
viewBox: '0 0 1024 1024',
|
|
27
|
+
version: '1.1',
|
|
28
|
+
xmlns: 'http://www.w3.org/1999/xlink',
|
|
29
|
+
"data-icon": 'drag',
|
|
30
|
+
width: '16',
|
|
31
|
+
height: '16'
|
|
32
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
33
|
+
d: 'M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z',
|
|
34
|
+
"p-id": '4278'
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
export function rowDrag(opt) {
|
|
39
|
+
return function rowDragStep(pipeline) {
|
|
40
|
+
var _context;
|
|
41
|
+
|
|
42
|
+
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
43
|
+
var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
|
|
44
|
+
if (!tableBody) return pipeline;
|
|
45
|
+
var dataSource = pipeline.getDataSource();
|
|
46
|
+
var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
|
|
47
|
+
|
|
48
|
+
var handleDragStrat = function handleDragStrat(event) {
|
|
49
|
+
var _a; // 开始拖拽
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
artTable.classList.add(cx(Classes.rowDragging));
|
|
53
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
var handleDragMove = function handleDragMove(event) {
|
|
57
|
+
var _a;
|
|
58
|
+
|
|
59
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
60
|
+
pipeline.setStateAtKey(rowDragKey, event);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
|
|
64
|
+
var _a;
|
|
65
|
+
|
|
66
|
+
artTable.classList.remove(cx(Classes.rowDragging));
|
|
67
|
+
pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
|
|
68
|
+
|
|
69
|
+
if (!isOutOfRange) {
|
|
70
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
|
|
75
|
+
var isFinished = _ref.isFinished,
|
|
76
|
+
_ref$dragPosition = _ref.dragPosition,
|
|
77
|
+
dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
|
|
78
|
+
return {
|
|
79
|
+
startRowIndex: startRowInfo.rowIndex,
|
|
80
|
+
startRow: startRowInfo.row,
|
|
81
|
+
endRowIndex: endRowInfo.rowIndex,
|
|
82
|
+
endRow: endRowInfo.row,
|
|
83
|
+
dragPosition: dragPosition,
|
|
84
|
+
isFinished: isFinished
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
|
|
89
|
+
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
90
|
+
var clientY = mouseMoveEvent.clientY;
|
|
91
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
92
|
+
var top = tableBodyClientRect.top,
|
|
93
|
+
height = tableBodyClientRect.height;
|
|
94
|
+
|
|
95
|
+
if (clientY + SCROLL_OFFSET >= top + height) {
|
|
96
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (clientY + SCROLL_OFFSET <= top) {
|
|
100
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
105
|
+
var _a;
|
|
106
|
+
|
|
107
|
+
var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
|
|
108
|
+
var endRowInfo = startRowInfo;
|
|
109
|
+
if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
|
|
110
|
+
if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return; // 默认拖拽插入的位置是向下
|
|
111
|
+
|
|
112
|
+
var dragPosition = 'bottom';
|
|
113
|
+
var isOutOfRange = false;
|
|
114
|
+
var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
115
|
+
isFinished: false,
|
|
116
|
+
dragPosition: 'bottom'
|
|
117
|
+
});
|
|
118
|
+
handleDragStrat(dragStartEvent);
|
|
119
|
+
var tableWidth = tableBody.clientWidth;
|
|
120
|
+
var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
|
|
121
|
+
|
|
122
|
+
var startOffset = mouseDownEvent.clientY - startRowRects.top;
|
|
123
|
+
var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
|
|
124
|
+
|
|
125
|
+
var dragRange = getDragRange(tableBody, {
|
|
126
|
+
startOffset: startOffset,
|
|
127
|
+
rowHeight: rowHeight
|
|
128
|
+
});
|
|
129
|
+
var mousePosition = {
|
|
130
|
+
x: mouseDownEvent.clientX,
|
|
131
|
+
y: mouseDownEvent.clientY
|
|
132
|
+
};
|
|
133
|
+
var mousemove$ = fromEvent(window, 'mousemove');
|
|
134
|
+
var mouseup$ = fromEvent(window, 'mouseup');
|
|
135
|
+
|
|
136
|
+
var scrollCallback = function scrollCallback(event) {
|
|
137
|
+
// 在当前表格内滚动不处理
|
|
138
|
+
if (event.target === tableBody) return;
|
|
139
|
+
dragRange = getDragRange(tableBody, {
|
|
140
|
+
startOffset: startOffset,
|
|
141
|
+
rowHeight: rowHeight
|
|
142
|
+
});
|
|
143
|
+
var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
|
|
144
|
+
updateCurSorStyle(isOutOfRange);
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
document.addEventListener('scroll', scrollCallback, true);
|
|
148
|
+
var rowDrag$ = mousemove$.pipe(map(function (mouseMoveEvent) {
|
|
149
|
+
var clientX = mouseMoveEvent.clientX,
|
|
150
|
+
clientY = mouseMoveEvent.clientY;
|
|
151
|
+
var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
|
|
152
|
+
|
|
153
|
+
if (tagretRow) {
|
|
154
|
+
endRowInfo = tagretRow;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置,拖拽框上边框位于目标行之上则向上插入,否则向下插入
|
|
158
|
+
|
|
159
|
+
var isMoveToTop = clientY - startOffset < targetRowRects.top;
|
|
160
|
+
dragPosition = isMoveToTop ? 'top' : 'bottom';
|
|
161
|
+
isOutOfRange = isOutOfDragRange({
|
|
162
|
+
x: clientX,
|
|
163
|
+
y: clientY
|
|
164
|
+
}, dragRange);
|
|
165
|
+
mousePosition = {
|
|
166
|
+
x: clientX,
|
|
167
|
+
y: clientY
|
|
168
|
+
};
|
|
169
|
+
updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
170
|
+
|
|
171
|
+
updateDragElementPosition(dragElement, dragRange, {
|
|
172
|
+
x: clientX,
|
|
173
|
+
y: clientY,
|
|
174
|
+
startOffset: startOffset
|
|
175
|
+
});
|
|
176
|
+
updateCurSorStyle(isOutOfRange);
|
|
177
|
+
return {
|
|
178
|
+
startRowInfo: startRowInfo,
|
|
179
|
+
endRowInfo: endRowInfo,
|
|
180
|
+
dragPosition: dragPosition
|
|
181
|
+
};
|
|
182
|
+
}), takeUntil(mouseup$));
|
|
183
|
+
rowDrag$.subscribe({
|
|
184
|
+
next: function next(_ref2) {
|
|
185
|
+
var startRowInfo = _ref2.startRowInfo,
|
|
186
|
+
endRowInfo = _ref2.endRowInfo,
|
|
187
|
+
dragPosition = _ref2.dragPosition;
|
|
188
|
+
var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
189
|
+
isFinished: false,
|
|
190
|
+
dragPosition: dragPosition
|
|
191
|
+
});
|
|
192
|
+
handleDragMove(dragMoveEvent);
|
|
193
|
+
},
|
|
194
|
+
complete: function complete() {
|
|
195
|
+
var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
196
|
+
isFinished: true,
|
|
197
|
+
dragPosition: dragPosition
|
|
198
|
+
});
|
|
199
|
+
handleDragEnd(dragEndEvent, isOutOfRange);
|
|
200
|
+
removeDragElement(dragElement);
|
|
201
|
+
removeCurSorStyle();
|
|
202
|
+
document.removeEventListener('scroll', scrollCallback, true);
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
208
|
+
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
209
|
+
|
|
210
|
+
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
211
|
+
|
|
212
|
+
nextColumns.unshift(rowDragColumn);
|
|
213
|
+
pipeline.columns(nextColumns);
|
|
214
|
+
pipeline.addTableProps({
|
|
215
|
+
onMouseDown: onMouseDown
|
|
216
|
+
});
|
|
217
|
+
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
218
|
+
var _cx;
|
|
219
|
+
|
|
220
|
+
var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
|
|
221
|
+
var startRowIndex = rowDragEvent.startRowIndex,
|
|
222
|
+
endRowIndex = rowDragEvent.endRowIndex,
|
|
223
|
+
isFinished = rowDragEvent.isFinished,
|
|
224
|
+
dragPosition = rowDragEvent.dragPosition;
|
|
225
|
+
var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
226
|
+
if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
|
|
227
|
+
var className = cx((_cx = {}, _defineProperty(_cx, Classes.rowDragStart, rowIndex === startRowIndex), _defineProperty(_cx, Classes.rowDragEnd, rowIndex === endRowIndex), _defineProperty(_cx, Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _defineProperty(_cx, Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
|
|
228
|
+
return {
|
|
229
|
+
className: className
|
|
230
|
+
};
|
|
231
|
+
});
|
|
232
|
+
return pipeline;
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
function getTargetRowInfo(target, tableBody, record) {
|
|
237
|
+
while (target && tableBody.contains(target)) {
|
|
238
|
+
if (target.getAttribute('data-role') === 'table-cell') {
|
|
239
|
+
var code = target.getAttribute('data-code');
|
|
240
|
+
var rowIndex = parseInt(target.getAttribute('data-rowindex'));
|
|
241
|
+
var row = record[rowIndex];
|
|
242
|
+
var isFooterCell = isEleInFooter(target);
|
|
243
|
+
if (!row || isFooterCell) return null;
|
|
244
|
+
return {
|
|
245
|
+
rowIndex: rowIndex,
|
|
246
|
+
row: row,
|
|
247
|
+
code: code,
|
|
248
|
+
cell: target
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
target = target.parentElement;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
return null;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
function isEleInFooter(target) {
|
|
259
|
+
while (target && !target.classList.contains(Classes.artTable)) {
|
|
260
|
+
if (target.classList.contains(Classes.tableFooter)) {
|
|
261
|
+
return true;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
target = target.parentElement;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
return false;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function createDragElement(rects, tableWidth, rowHeight) {
|
|
271
|
+
var _context2, _context3, _context4;
|
|
272
|
+
|
|
273
|
+
var x = rects.x,
|
|
274
|
+
y = rects.y;
|
|
275
|
+
var dragMoveElement = document.createElement('div');
|
|
276
|
+
dragMoveElement.className = cx(Classes.rowDragElement);
|
|
277
|
+
dragMoveElement.style.cssText = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "position:fixed;z-index:9999;left:".concat(x, "px;top:")).call(_context4, y, "px;pointer-events:none;width:")).call(_context3, tableWidth, "px;height:")).call(_context2, rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
|
|
278
|
+
document.body.appendChild(dragMoveElement);
|
|
279
|
+
return dragMoveElement;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
function updateDragElementPosition(element, dragRange, _ref3) {
|
|
283
|
+
var x = _ref3.x,
|
|
284
|
+
y = _ref3.y,
|
|
285
|
+
startOffset = _ref3.startOffset;
|
|
286
|
+
var validPosition = getValidPosition({
|
|
287
|
+
x: x,
|
|
288
|
+
y: y
|
|
289
|
+
}, dragRange);
|
|
290
|
+
element.style.top = validPosition.y - startOffset + 'px';
|
|
291
|
+
return element;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
function removeDragElement(element) {
|
|
295
|
+
document.body.removeChild(element);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
function updateCurSorStyle(isOutOfRange) {
|
|
299
|
+
if (isOutOfRange) {
|
|
300
|
+
document.body.style.cursor = 'no-drop';
|
|
301
|
+
} else {
|
|
302
|
+
document.body.style.cursor = 'move';
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
function removeCurSorStyle() {
|
|
307
|
+
document.body.style.cursor = 'default';
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
function getDragRange(tableBody, _ref4) {
|
|
311
|
+
var startOffset = _ref4.startOffset,
|
|
312
|
+
rowHeight = _ref4.rowHeight;
|
|
313
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
314
|
+
var height = tableBodyClientRect.height,
|
|
315
|
+
width = tableBodyClientRect.width,
|
|
316
|
+
top = tableBodyClientRect.top,
|
|
317
|
+
left = tableBodyClientRect.left;
|
|
318
|
+
return {
|
|
319
|
+
minX: left,
|
|
320
|
+
maxX: left + width,
|
|
321
|
+
minY: top - rowHeight + startOffset,
|
|
322
|
+
maxY: top + height + startOffset
|
|
323
|
+
};
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
function getValidPosition(position, dragRange) {
|
|
327
|
+
var x = position.x,
|
|
328
|
+
y = position.y;
|
|
329
|
+
var minX = dragRange.minX,
|
|
330
|
+
maxX = dragRange.maxX,
|
|
331
|
+
minY = dragRange.minY,
|
|
332
|
+
maxY = dragRange.maxY;
|
|
333
|
+
var newX = x < minX ? minX : x > maxX ? maxX : x;
|
|
334
|
+
var newY = y < minY ? minY : y > maxY ? maxY : y;
|
|
335
|
+
return {
|
|
336
|
+
x: newX,
|
|
337
|
+
y: newY
|
|
338
|
+
};
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
function isOutOfDragRange(position, dragRange) {
|
|
342
|
+
var x = position.x,
|
|
343
|
+
y = position.y;
|
|
344
|
+
var minX = dragRange.minX,
|
|
345
|
+
maxX = dragRange.maxX,
|
|
346
|
+
minY = dragRange.minY,
|
|
347
|
+
maxY = dragRange.maxY;
|
|
348
|
+
return x > maxX || x < minX || y > maxY || y < minY;
|
|
349
|
+
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
1
2
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
3
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
3
4
|
import React from 'react';
|
|
4
5
|
import { internals } from '../../internals';
|
|
5
6
|
import { always } from '../../utils/others';
|
|
6
|
-
import { mergeCellProps } from '../../utils';
|
|
7
|
+
import { mergeCellProps, SINGLE_SELECT_MARK_PROPNAME } from '../../utils';
|
|
7
8
|
export function singleSelect() {
|
|
8
9
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
9
10
|
return function singleSelectStep(pipeline) {
|
|
10
11
|
var _context;
|
|
11
12
|
|
|
12
|
-
var _a, _b, _c, _d, _e;
|
|
13
|
+
var _a, _b, _c, _d, _e, _f;
|
|
13
14
|
|
|
14
15
|
var Radio = pipeline.ctx.components.Radio;
|
|
15
16
|
|
|
@@ -80,12 +81,13 @@ export function singleSelect() {
|
|
|
80
81
|
onChange(rowKey);
|
|
81
82
|
} : undefined
|
|
82
83
|
});
|
|
83
|
-
}
|
|
84
|
+
},
|
|
85
|
+
features: _extends(_extends({}, (_e = opts.radioColumn) === null || _e === void 0 ? void 0 : _e.features), _defineProperty({}, SINGLE_SELECT_MARK_PROPNAME, true))
|
|
84
86
|
});
|
|
85
87
|
|
|
86
88
|
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
87
89
|
|
|
88
|
-
var radioPlacement = (
|
|
90
|
+
var radioPlacement = (_f = opts.radioPlacement) !== null && _f !== void 0 ? _f : 'start';
|
|
89
91
|
|
|
90
92
|
if (radioPlacement === 'start') {
|
|
91
93
|
nextColumns.unshift(radioColumn);
|
|
@@ -71,6 +71,11 @@ export function treeMode() {
|
|
|
71
71
|
return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
|
|
72
72
|
|
|
73
73
|
function processDataSource(input) {
|
|
74
|
+
if (pipeline.isSameInputDataSource() && openKeys === pipeline.getFeatureOptions('lastOpenKeys')) {
|
|
75
|
+
return pipeline.getFeatureOptions('lastTreeMode');
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey) || openKeys);
|
|
74
79
|
var result = [];
|
|
75
80
|
dfs(input, 0);
|
|
76
81
|
|
|
@@ -111,6 +116,7 @@ export function treeMode() {
|
|
|
111
116
|
}
|
|
112
117
|
}
|
|
113
118
|
|
|
119
|
+
pipeline.setFeatureOptions('lastTreeMode', result);
|
|
114
120
|
return result;
|
|
115
121
|
}
|
|
116
122
|
|
|
@@ -35,6 +35,7 @@ export declare class TablePipeline {
|
|
|
35
35
|
private readonly _rowPropsGetters;
|
|
36
36
|
private _tableProps;
|
|
37
37
|
private _dataSource;
|
|
38
|
+
private _isSameInputDataSource;
|
|
38
39
|
private _columns;
|
|
39
40
|
private _footerDataSource?;
|
|
40
41
|
static defaultIndents: TablePipelineIndentsConfig;
|
|
@@ -51,6 +52,7 @@ export declare class TablePipeline {
|
|
|
51
52
|
appendRowPropsGetter(getter: RowPropsGetter): this;
|
|
52
53
|
addTableProps(props: React.HTMLAttributes<HTMLTableElement>): void;
|
|
53
54
|
getDataSource(name?: string): any[];
|
|
55
|
+
isSameInputDataSource(): boolean;
|
|
54
56
|
getColumns(name?: string): any[];
|
|
55
57
|
getFooterDataSource(): any[];
|
|
56
58
|
getStateAtKey<T = any>(stateKey: string, defaultValue?: T): T;
|
|
@@ -76,6 +76,11 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
76
76
|
return this._snapshots[name].dataSource;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
+
}, {
|
|
80
|
+
key: "isSameInputDataSource",
|
|
81
|
+
value: function isSameInputDataSource() {
|
|
82
|
+
return this._isSameInputDataSource;
|
|
83
|
+
}
|
|
79
84
|
}, {
|
|
80
85
|
key: "getColumns",
|
|
81
86
|
value: function getColumns(name) {
|
|
@@ -127,9 +132,12 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
127
132
|
|
|
128
133
|
if (this._dataSource != null || this._columns != null) {
|
|
129
134
|
throw new Error('input 不能调用两次');
|
|
130
|
-
}
|
|
135
|
+
} // 在 pipeline 中识别本次更新是否有数据变化
|
|
136
|
+
|
|
131
137
|
|
|
138
|
+
this._isSameInputDataSource = _input.dataSource === this.ref.current._lastInputDataSource;
|
|
132
139
|
this._dataSource = _input.dataSource;
|
|
140
|
+
this.ref.current._lastInputDataSource = _input.dataSource;
|
|
133
141
|
this._columns = _mapInstanceProperty(_context = _input.columns).call(_context, function (col) {
|
|
134
142
|
return _extends(_extends({}, col), {
|
|
135
143
|
key: _this.guid()
|
|
@@ -17,3 +17,4 @@ export { default as layeredFilter } from './layeredFilter';
|
|
|
17
17
|
export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds } from './element';
|
|
18
18
|
export { default as console } from './console';
|
|
19
19
|
export { browserType } from './browserType';
|
|
20
|
+
export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
|
package/es/table/utils/index.js
CHANGED
|
@@ -16,4 +16,5 @@ export { copyDataToClipboard, executeOnTempElement } from './copyToClipboard';
|
|
|
16
16
|
export { default as layeredFilter } from './layeredFilter';
|
|
17
17
|
export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds } from './element';
|
|
18
18
|
export { default as console } from './console';
|
|
19
|
-
export { browserType } from './browserType';
|
|
19
|
+
export { browserType } from './browserType';
|
|
20
|
+
export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var MULTI_SELECT_MARK_PROPNAME = 'checkboxSelection';
|
|
2
|
+
export var SINGLE_SELECT_MARK_PROPNAME = 'radioSelection';
|
|
3
|
+
export function isSelectColumn(column) {
|
|
4
|
+
var features = column.features || {};
|
|
5
|
+
return features[MULTI_SELECT_MARK_PROPNAME] === true || features[SINGLE_SELECT_MARK_PROPNAME] === true;
|
|
6
|
+
}
|