@kdcloudjs/table 1.1.6 → 1.2.0-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 +835 -187
- 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/locale/locale.d.ts +8 -4
- package/es/locale/zh-CN.d.ts +8 -4
- package/es/locale/zh-CN.js +10 -4
- package/es/table/base/helpers/TableDOMUtils.js +17 -14
- package/es/table/base/styles.d.ts +10 -0
- package/es/table/base/styles.js +12 -2
- package/es/table/base/table.js +38 -7
- package/es/table/common-views.js +3 -1
- package/es/table/interfaces.d.ts +5 -0
- package/es/table/pipeline/features/autoFill.js +7 -3
- package/es/table/pipeline/features/columnFilter.js +17 -5
- package/es/table/pipeline/features/columnResizeWidth.js +3 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.d.ts +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +11 -5
- package/es/table/pipeline/features/filter/Filter.d.ts +4 -1
- package/es/table/pipeline/features/filter/Filter.js +4 -2
- 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 +31 -12
- package/es/table/pipeline/features/rangeSelection.d.ts +22 -1
- package/es/table/pipeline/features/rangeSelection.js +274 -100
- package/es/table/pipeline/features/rowDrag.d.ts +28 -0
- package/es/table/pipeline/features/rowDrag.js +325 -0
- package/es/table/pipeline/features/sort.js +22 -3
- package/lib/locale/locale.d.ts +8 -4
- package/lib/locale/zh-CN.d.ts +8 -4
- package/lib/locale/zh-CN.js +10 -4
- package/lib/table/base/helpers/TableDOMUtils.js +17 -14
- package/lib/table/base/styles.d.ts +10 -0
- package/lib/table/base/styles.js +12 -2
- package/lib/table/base/table.js +38 -7
- package/lib/table/common-views.js +3 -1
- package/lib/table/interfaces.d.ts +5 -0
- package/lib/table/pipeline/features/autoFill.js +7 -3
- package/lib/table/pipeline/features/columnFilter.js +18 -6
- package/lib/table/pipeline/features/columnResizeWidth.js +3 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.d.ts +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +11 -5
- package/lib/table/pipeline/features/filter/Filter.d.ts +4 -1
- package/lib/table/pipeline/features/filter/Filter.js +4 -2
- 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 +33 -12
- package/lib/table/pipeline/features/rangeSelection.d.ts +22 -1
- package/lib/table/pipeline/features/rangeSelection.js +282 -104
- package/lib/table/pipeline/features/rowDrag.d.ts +28 -0
- package/lib/table/pipeline/features/rowDrag.js +347 -0
- package/lib/table/pipeline/features/sort.js +22 -3
- package/package.json +3 -3
|
@@ -7,15 +7,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
+
exports.getCellRangeId = getCellRangeId;
|
|
10
11
|
exports.lastClickCellKey = void 0;
|
|
11
12
|
exports.rangeSelection = rangeSelection;
|
|
12
13
|
exports.rangeSelectionKey = void 0;
|
|
13
14
|
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
17
|
-
|
|
18
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
15
|
+
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
|
19
16
|
|
|
20
17
|
var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
|
|
21
18
|
|
|
@@ -23,6 +20,14 @@ var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stab
|
|
|
23
20
|
|
|
24
21
|
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
|
|
25
22
|
|
|
23
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
24
|
+
|
|
25
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
|
|
26
|
+
|
|
27
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
28
|
+
|
|
29
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
|
|
30
|
+
|
|
26
31
|
var _utils = require("../../utils");
|
|
27
32
|
|
|
28
33
|
var _others = require("../../utils/others");
|
|
@@ -39,10 +44,11 @@ var rangeSelectionKey = 'rangeSelection';
|
|
|
39
44
|
exports.rangeSelectionKey = rangeSelectionKey;
|
|
40
45
|
var lastClickCellKey = 'lastClickCell';
|
|
41
46
|
exports.lastClickCellKey = lastClickCellKey;
|
|
47
|
+
var startSelectedCellRangesKey = 'startSelectedCellRanges';
|
|
48
|
+
var SCROLL_OFFSET = 30;
|
|
42
49
|
|
|
43
50
|
function rangeSelection(opts) {
|
|
44
51
|
return function step(pipeline) {
|
|
45
|
-
var SCROLL_SIZE = 30;
|
|
46
52
|
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
47
53
|
var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
|
|
48
54
|
var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
|
|
@@ -54,14 +60,18 @@ function rangeSelection(opts) {
|
|
|
54
60
|
var columns = pipeline.getColumns();
|
|
55
61
|
var dataSource = pipeline.getDataSource();
|
|
56
62
|
|
|
57
|
-
var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
|
|
63
|
+
var rangeSelectedChange = function rangeSelectedChange(rangeSelection, isFinished) {
|
|
58
64
|
var _a;
|
|
59
65
|
|
|
66
|
+
if (isFinished) {
|
|
67
|
+
pipeline.setFeatureOptions(startSelectedCellRangesKey, rangeSelection);
|
|
68
|
+
}
|
|
69
|
+
|
|
60
70
|
pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
|
|
61
|
-
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
|
|
71
|
+
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection, isFinished);
|
|
62
72
|
};
|
|
63
73
|
|
|
64
|
-
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
|
|
74
|
+
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell, isFinished) {
|
|
65
75
|
if (!startDragCell || !draggingCell) return;
|
|
66
76
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
67
77
|
|
|
@@ -70,21 +80,31 @@ function rangeSelection(opts) {
|
|
|
70
80
|
endRow = _getRangeSelectionRow.endRow,
|
|
71
81
|
footerRowRange = _getRangeSelectionRow.footerRowRange;
|
|
72
82
|
|
|
73
|
-
var
|
|
83
|
+
var cellRange = {
|
|
74
84
|
startRow: startRow,
|
|
75
85
|
endRow: endRow,
|
|
76
86
|
columns: rangeColumns,
|
|
77
87
|
startColumn: startDragCell.column,
|
|
78
88
|
footerRowRange: footerRowRange
|
|
79
89
|
};
|
|
90
|
+
var cellRanges = pipeline.getFeatureOptions(startSelectedCellRangesKey) ? (0, _toConsumableArray2.default)(pipeline.getFeatureOptions(startSelectedCellRangesKey)) : [];
|
|
91
|
+
|
|
92
|
+
if (isCellRangeSingleCell([cellRange])) {
|
|
93
|
+
var singleCellRangeId = getCellRangeId(cellRange);
|
|
94
|
+
cellRanges = (0, _filter.default)(cellRanges).call(cellRanges, function (item) {
|
|
95
|
+
return getCellRangeId(item) !== singleCellRangeId;
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
cellRanges.push(cellRange);
|
|
80
100
|
|
|
81
|
-
if (isCellRangeSingleCell(
|
|
101
|
+
if (isCellRangeSingleCell(cellRanges)) {
|
|
82
102
|
artTable.classList.remove((0, _classnames.default)(_styles.Classes.rangeSelection));
|
|
83
103
|
} else {
|
|
84
104
|
artTable.classList.add((0, _classnames.default)(_styles.Classes.rangeSelection));
|
|
85
105
|
}
|
|
86
106
|
|
|
87
|
-
rangeSelectedChange(
|
|
107
|
+
rangeSelectedChange(cellRanges, isFinished);
|
|
88
108
|
};
|
|
89
109
|
|
|
90
110
|
var shiftKeySelect = function shiftKeySelect(event) {
|
|
@@ -92,76 +112,110 @@ function rangeSelection(opts) {
|
|
|
92
112
|
var clickCell = getTargetCell(target, columns);
|
|
93
113
|
|
|
94
114
|
if (clickCell) {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
setRangeSelection(_lastClickCell, clickCell);
|
|
100
|
-
} else {
|
|
101
|
-
// 第一次进来就按住shift键,这时候要记住点击的单元格
|
|
102
|
-
pipeline.setFeatureOptions(lastClickCellKey, clickCell);
|
|
103
|
-
}
|
|
115
|
+
var _lastClickCell = pipeline.getFeatureOptions(lastClickCellKey);
|
|
116
|
+
|
|
117
|
+
if (_lastClickCell) {
|
|
118
|
+
setRangeSelection(_lastClickCell, clickCell, true);
|
|
104
119
|
} else {
|
|
120
|
+
// 第一次进来就按住shift键,这时候要记住点击的单元格
|
|
105
121
|
pipeline.setFeatureOptions(lastClickCellKey, clickCell);
|
|
106
|
-
setRangeSelection(clickCell, clickCell);
|
|
107
122
|
}
|
|
108
123
|
}
|
|
109
124
|
};
|
|
110
125
|
|
|
111
|
-
var
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
shiftKeySelect(mouseDownEvent);
|
|
116
|
-
if (mouseDownEvent.shiftKey) return;
|
|
117
|
-
var target = mouseDownEvent.target;
|
|
118
|
-
var startDragCell = getTargetCell(target, columns);
|
|
119
|
-
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
120
|
-
var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
|
|
126
|
+
var updateScrollPosition = function updateScrollPosition(client) {
|
|
127
|
+
var clientX = client.clientX,
|
|
128
|
+
clientY = client.clientY;
|
|
121
129
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
130
|
+
var left = tableBodyClientRect.left,
|
|
131
|
+
top = tableBodyClientRect.top,
|
|
132
|
+
height = tableBodyClientRect.height,
|
|
133
|
+
width = tableBodyClientRect.width;
|
|
122
134
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
var left = tableBodyClientRect.left,
|
|
127
|
-
top = tableBodyClientRect.top,
|
|
128
|
-
height = tableBodyClientRect.height,
|
|
129
|
-
width = tableBodyClientRect.width;
|
|
135
|
+
if (clientX + SCROLL_OFFSET >= left + width) {
|
|
136
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_OFFSET;
|
|
137
|
+
}
|
|
130
138
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
139
|
+
if (clientX - SCROLL_OFFSET <= left) {
|
|
140
|
+
pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_OFFSET;
|
|
141
|
+
}
|
|
134
142
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
143
|
+
if (clientY + SCROLL_OFFSET >= top + height) {
|
|
144
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
|
|
145
|
+
}
|
|
138
146
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
147
|
+
if (clientY + SCROLL_OFFSET <= top) {
|
|
148
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
|
|
149
|
+
}
|
|
150
|
+
};
|
|
142
151
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
152
|
+
var setStartSelectedCellRanges = function setStartSelectedCellRanges(isCtrlKey, isShiftKey) {
|
|
153
|
+
if (opts === null || opts === void 0 ? void 0 : opts.suppressMultiRangeSelection) {
|
|
154
|
+
pipeline.setFeatureOptions(startSelectedCellRangesKey, []);
|
|
155
|
+
return;
|
|
156
|
+
} // ctrl 和shift 同时按时,优先生效shift
|
|
157
|
+
// 没有点击ctrl 或者shift时,每次点击开始时都清空选中范围
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
if (!isCtrlKey && !isShiftKey) {
|
|
161
|
+
pipeline.setFeatureOptions(startSelectedCellRangesKey, []);
|
|
162
|
+
} // shift 点击框选,要保留之前的选中结果。最新的框选范围覆盖最后一次的框选范围
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
if (isShiftKey) {
|
|
166
|
+
var _startDragCellRanges = pipeline.getFeatureOptions(startSelectedCellRangesKey) ? (0, _toConsumableArray2.default)(pipeline.getFeatureOptions(startSelectedCellRangesKey)) : [];
|
|
167
|
+
|
|
168
|
+
_startDragCellRanges.pop();
|
|
169
|
+
|
|
170
|
+
pipeline.setFeatureOptions(startSelectedCellRangesKey, _startDragCellRanges);
|
|
171
|
+
}
|
|
172
|
+
};
|
|
147
173
|
|
|
174
|
+
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
175
|
+
if (mouseDownEvent.button !== 0 || !((0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent) || (0, _utils.isElementInEventPath)(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
|
|
176
|
+
|
|
177
|
+
var isCtrlKey = mouseDownEvent.ctrlKey || mouseDownEvent.metaKey;
|
|
178
|
+
var isShiftKey = mouseDownEvent.shiftKey;
|
|
179
|
+
var target = mouseDownEvent.target; // 每次点击时先确认初始生效的框选范围
|
|
180
|
+
|
|
181
|
+
setStartSelectedCellRanges(isCtrlKey, isShiftKey);
|
|
182
|
+
|
|
183
|
+
if (isShiftKey) {
|
|
184
|
+
shiftKeySelect(mouseDownEvent);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
var startDragCell = getTargetCell(target, columns);
|
|
189
|
+
pipeline.setFeatureOptions(lastClickCellKey, startDragCell);
|
|
190
|
+
var draggingCell = startDragCell;
|
|
191
|
+
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
192
|
+
var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
|
|
148
193
|
var rangeSelected$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
|
|
149
194
|
var target = mouseMoveEvent.target || mouseMoveEvent.srcElement;
|
|
150
|
-
|
|
195
|
+
draggingCell = getTargetCell(target, columns);
|
|
151
196
|
var client = {
|
|
152
197
|
clientX: mouseMoveEvent.clientX,
|
|
153
198
|
clientY: mouseMoveEvent.clientY
|
|
154
199
|
};
|
|
155
|
-
|
|
200
|
+
|
|
201
|
+
if (!(draggingCell === null || draggingCell === void 0 ? void 0 : draggingCell.isFooterCell)) {
|
|
202
|
+
updateScrollPosition(client);
|
|
203
|
+
}
|
|
204
|
+
|
|
156
205
|
return {
|
|
157
206
|
startDragCell: startDragCell,
|
|
158
207
|
draggingCell: draggingCell
|
|
159
208
|
};
|
|
160
209
|
}), (0, _operators.takeUntil)(mouseup$));
|
|
161
|
-
rangeSelected$.subscribe(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
210
|
+
rangeSelected$.subscribe({
|
|
211
|
+
next: function next(_ref) {
|
|
212
|
+
var startDragCell = _ref.startDragCell,
|
|
213
|
+
draggingCell = _ref.draggingCell;
|
|
214
|
+
setRangeSelection(startDragCell, draggingCell, false);
|
|
215
|
+
},
|
|
216
|
+
complete: function complete() {
|
|
217
|
+
setRangeSelection(startDragCell, draggingCell, true);
|
|
218
|
+
}
|
|
165
219
|
});
|
|
166
220
|
};
|
|
167
221
|
|
|
@@ -175,7 +229,7 @@ function rangeSelection(opts) {
|
|
|
175
229
|
if (columns.length && rowLen && !getElementEditable(e.target)) {
|
|
176
230
|
opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
|
|
177
231
|
artTable.classList.add((0, _classnames.default)(_styles.Classes.rangeSelection));
|
|
178
|
-
rangeSelectedChange({
|
|
232
|
+
rangeSelectedChange([{
|
|
179
233
|
startRow: 0,
|
|
180
234
|
endRow: rowLen - 1,
|
|
181
235
|
columns: (0, _utils.collectNodes)(columns, 'leaf-only'),
|
|
@@ -184,7 +238,7 @@ function rangeSelection(opts) {
|
|
|
184
238
|
startRow: 0,
|
|
185
239
|
endRow: footerDataSource.length - 1
|
|
186
240
|
} : null
|
|
187
|
-
});
|
|
241
|
+
}], true);
|
|
188
242
|
}
|
|
189
243
|
}
|
|
190
244
|
};
|
|
@@ -197,41 +251,21 @@ function rangeSelection(opts) {
|
|
|
197
251
|
}); // todo: 后面可以把mousedown放到一个流里面
|
|
198
252
|
|
|
199
253
|
return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
|
|
200
|
-
var
|
|
201
|
-
|
|
202
|
-
var rangeSelection = pipeline.getStateAtKey(rangeSelectionKey);
|
|
203
|
-
if (!rangeSelection || (0, _findIndex.default)(_context = rangeSelection.columns).call(_context, function (selectedCol) {
|
|
204
|
-
return selectedCol.code === col.code;
|
|
205
|
-
}) === -1) return col;
|
|
254
|
+
var cellRanges = pipeline.getStateAtKey(rangeSelectionKey) || [];
|
|
206
255
|
var prevGetCellProps = col.getCellProps;
|
|
207
256
|
return (0, _extends2.default)((0, _extends2.default)({}, col), {
|
|
208
257
|
getCellProps: function getCellProps(value, record, rowIndex) {
|
|
209
|
-
var _cx;
|
|
210
|
-
|
|
211
258
|
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
212
|
-
var
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
|
|
223
|
-
footerStartRowIndex = _getFooterRowIndex.startRowIndex,
|
|
224
|
-
footerEndRowIndex = _getFooterRowIndex.endRowIndex;
|
|
225
|
-
|
|
226
|
-
var startCol = columns[0];
|
|
227
|
-
var endCol = columns[columns.length - 1];
|
|
228
|
-
var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
|
|
229
|
-
var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
|
|
230
|
-
var match = footerMatch || bodyMatch;
|
|
231
|
-
var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
|
|
232
|
-
|
|
233
|
-
var showCellRangeStyle = match && !matchSingleCell;
|
|
234
|
-
var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSingleCell, matchSingleCell), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, showCellRangeStyle), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
|
|
259
|
+
var isFooterCell = record[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
260
|
+
if (!cellRanges.some(function (cellRange) {
|
|
261
|
+
return isCellInRange(cellRange, rowIndex, col, isFooterCell);
|
|
262
|
+
})) return prevCellProps;
|
|
263
|
+
var className = getCellRangesClassName(cellRanges, {
|
|
264
|
+
isFooterCell: isFooterCell,
|
|
265
|
+
rowIndex: rowIndex,
|
|
266
|
+
col: col,
|
|
267
|
+
record: record
|
|
268
|
+
});
|
|
235
269
|
return (0, _utils.mergeCellProps)(prevCellProps, {
|
|
236
270
|
className: className
|
|
237
271
|
});
|
|
@@ -258,7 +292,7 @@ function getTargetCell(target, columns) {
|
|
|
258
292
|
rowSpan: parseInt(target.getAttribute('rowspan') || 1),
|
|
259
293
|
code: columnCode,
|
|
260
294
|
column: column,
|
|
261
|
-
|
|
295
|
+
isFooterCell: isEleInFooter(target)
|
|
262
296
|
}
|
|
263
297
|
};
|
|
264
298
|
}();
|
|
@@ -273,7 +307,7 @@ function getTargetCell(target, columns) {
|
|
|
273
307
|
}
|
|
274
308
|
|
|
275
309
|
function isSameCell(cell1, cell2) {
|
|
276
|
-
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.
|
|
310
|
+
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isFooterCell === cell2.isFooterCell;
|
|
277
311
|
}
|
|
278
312
|
|
|
279
313
|
function isEleInFooter(target) {
|
|
@@ -314,10 +348,10 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
|
314
348
|
_endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
|
|
315
349
|
|
|
316
350
|
|
|
317
|
-
if (!startCell.
|
|
351
|
+
if (!startCell.isFooterCell && !endCell.isFooterCell) {
|
|
318
352
|
startRow = _startRow;
|
|
319
353
|
endRow = _endRow;
|
|
320
|
-
} else if (startCell.
|
|
354
|
+
} else if (startCell.isFooterCell && endCell.isFooterCell) {
|
|
321
355
|
// 两个单元格都在表底
|
|
322
356
|
footerRowRange = {
|
|
323
357
|
startRow: _startRow,
|
|
@@ -325,7 +359,7 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
|
325
359
|
};
|
|
326
360
|
} else {
|
|
327
361
|
// 一个单元格在表体,一个在表底
|
|
328
|
-
if (startCell.
|
|
362
|
+
if (startCell.isFooterCell) {
|
|
329
363
|
startRow = dataSource.length - 1;
|
|
330
364
|
endRow = endCell.rowIndex;
|
|
331
365
|
footerRowRange = {
|
|
@@ -348,6 +382,13 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
|
348
382
|
footerRowRange: footerRowRange
|
|
349
383
|
};
|
|
350
384
|
}
|
|
385
|
+
/**
|
|
386
|
+
* 获取框选范围的起始结束行
|
|
387
|
+
* @param startCell 起始单元格
|
|
388
|
+
* @param endCell 结束单元格
|
|
389
|
+
* @returns
|
|
390
|
+
*/
|
|
391
|
+
|
|
351
392
|
|
|
352
393
|
function getCellRangeRow(startCell, endCell) {
|
|
353
394
|
if (isSameCell(startCell, endCell)) {
|
|
@@ -365,12 +406,20 @@ function getCellRangeRow(startCell, endCell) {
|
|
|
365
406
|
endRow: endRow
|
|
366
407
|
};
|
|
367
408
|
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
409
|
+
/**
|
|
410
|
+
* 框选范围是否只包含单个单元格
|
|
411
|
+
* @param cellRanges
|
|
412
|
+
* @returns
|
|
413
|
+
*/
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
function isCellRangeSingleCell(cellRanges) {
|
|
417
|
+
if (cellRanges.length !== 1) return false;
|
|
418
|
+
var _cellRanges$ = cellRanges[0],
|
|
419
|
+
startRow = _cellRanges$.startRow,
|
|
420
|
+
endRow = _cellRanges$.endRow,
|
|
421
|
+
columns = _cellRanges$.columns,
|
|
422
|
+
footerRowRange = _cellRanges$.footerRowRange;
|
|
374
423
|
var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
|
|
375
424
|
var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
|
|
376
425
|
return isBodySingleCell || isFooterSingleCell;
|
|
@@ -398,12 +447,141 @@ function getFooterRowIndex(footerRowRange) {
|
|
|
398
447
|
}
|
|
399
448
|
|
|
400
449
|
function getElementEditable(target) {
|
|
401
|
-
var
|
|
450
|
+
var _context;
|
|
402
451
|
|
|
403
452
|
if (!target) return;
|
|
404
453
|
|
|
405
|
-
if ((0, _includes.default)(
|
|
454
|
+
if ((0, _includes.default)(_context = ['input', 'textarea']).call(_context, target.tagName.toLowerCase())) {
|
|
406
455
|
if (target.type === 'checkbox') return;
|
|
407
456
|
return !target.disabled && !target.readOnly;
|
|
408
457
|
}
|
|
458
|
+
}
|
|
459
|
+
/**
|
|
460
|
+
* 判断单元格是否在框选范围内
|
|
461
|
+
* @param cellRange
|
|
462
|
+
* @param rowIndex
|
|
463
|
+
* @param col
|
|
464
|
+
* @param isFooterCell
|
|
465
|
+
* @returns
|
|
466
|
+
*/
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
function isCellInRange(cellRange, rowIndex, col, isFooterCell) {
|
|
470
|
+
var startRow = cellRange.startRow,
|
|
471
|
+
endRow = cellRange.endRow,
|
|
472
|
+
columns = cellRange.columns,
|
|
473
|
+
footerRowRange = cellRange.footerRowRange;
|
|
474
|
+
var isColInRanges = (0, _findIndex.default)(columns).call(columns, function (item) {
|
|
475
|
+
return item.code === col.code;
|
|
476
|
+
}) !== -1;
|
|
477
|
+
if (!isColInRanges) return false;
|
|
478
|
+
|
|
479
|
+
var _getRowIndex = getRowIndex(startRow, endRow),
|
|
480
|
+
startRowIndex = _getRowIndex.startRowIndex,
|
|
481
|
+
endRowIndex = _getRowIndex.endRowIndex;
|
|
482
|
+
|
|
483
|
+
var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
|
|
484
|
+
footerStartRowIndex = _getFooterRowIndex.startRowIndex,
|
|
485
|
+
footerEndRowIndex = _getFooterRowIndex.endRowIndex;
|
|
486
|
+
|
|
487
|
+
var bodyMatch = !isFooterCell && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
|
|
488
|
+
var footerMatch = isFooterCell && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
|
|
489
|
+
var isRowInRange = footerMatch || bodyMatch;
|
|
490
|
+
return isRowInRange;
|
|
491
|
+
}
|
|
492
|
+
/**
|
|
493
|
+
* 获取框选范围唯一标识
|
|
494
|
+
* @param {*} cellRange
|
|
495
|
+
* @returns
|
|
496
|
+
*/
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
function getCellRangeId(cellRange) {
|
|
500
|
+
var startRow = cellRange.startRow,
|
|
501
|
+
endRow = cellRange.endRow,
|
|
502
|
+
footerRowRange = cellRange.footerRowRange,
|
|
503
|
+
columns = cellRange.columns;
|
|
504
|
+
|
|
505
|
+
var _getRowIndex2 = getRowIndex(startRow, endRow),
|
|
506
|
+
startRowIndex = _getRowIndex2.startRowIndex,
|
|
507
|
+
endRowIndex = _getRowIndex2.endRowIndex;
|
|
508
|
+
|
|
509
|
+
var _getFooterRowIndex2 = getFooterRowIndex(footerRowRange),
|
|
510
|
+
footerStartRowIndex = _getFooterRowIndex2.startRowIndex,
|
|
511
|
+
footerEndRowIndex = _getFooterRowIndex2.endRowIndex;
|
|
512
|
+
|
|
513
|
+
var firstColId = columns[0].code;
|
|
514
|
+
var endColId = columns[columns.length - 1].code;
|
|
515
|
+
return startRowIndex + '_' + endRowIndex + '_' + footerStartRowIndex + '_' + footerEndRowIndex + '_' + firstColId + '_' + endColId;
|
|
516
|
+
}
|
|
517
|
+
/**
|
|
518
|
+
* 获取框选范围中单元格的样式
|
|
519
|
+
* @param cellRanges
|
|
520
|
+
* @param param1
|
|
521
|
+
* @returns
|
|
522
|
+
*/
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
function getCellRangesClassName(cellRanges, _ref2) {
|
|
526
|
+
var _cx;
|
|
527
|
+
|
|
528
|
+
var isFooterCell = _ref2.isFooterCell,
|
|
529
|
+
rowIndex = _ref2.rowIndex,
|
|
530
|
+
col = _ref2.col,
|
|
531
|
+
record = _ref2.record;
|
|
532
|
+
|
|
533
|
+
var _getMatchBorderStyle = getMatchBorderStyle(cellRanges, {
|
|
534
|
+
isFooterCell: isFooterCell,
|
|
535
|
+
rowIndex: rowIndex,
|
|
536
|
+
col: col,
|
|
537
|
+
record: record
|
|
538
|
+
}),
|
|
539
|
+
matchCellRangeTop = _getMatchBorderStyle.matchCellRangeTop,
|
|
540
|
+
matchCellRangeLeft = _getMatchBorderStyle.matchCellRangeLeft,
|
|
541
|
+
matchCellRangeBottom = _getMatchBorderStyle.matchCellRangeBottom,
|
|
542
|
+
matchCellRangeRight = _getMatchBorderStyle.matchCellRangeRight;
|
|
543
|
+
|
|
544
|
+
var isSingleCell = isCellRangeSingleCell(cellRanges);
|
|
545
|
+
var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSingleCell, isSingleCell), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, !isSingleCell), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, !isSingleCell && matchCellRangeTop), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, !isSingleCell && matchCellRangeLeft), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, !isSingleCell && matchCellRangeBottom), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, !isSingleCell && matchCellRangeRight), _cx));
|
|
546
|
+
return className;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
function getMatchBorderStyle(cellRanges, _ref3) {
|
|
550
|
+
var isFooterCell = _ref3.isFooterCell,
|
|
551
|
+
rowIndex = _ref3.rowIndex,
|
|
552
|
+
col = _ref3.col,
|
|
553
|
+
record = _ref3.record;
|
|
554
|
+
return cellRanges.reduce(function (obj, cellRange) {
|
|
555
|
+
if (!isCellInRange(cellRange, rowIndex, col, isFooterCell)) return obj;
|
|
556
|
+
var startRow = cellRange.startRow,
|
|
557
|
+
endRow = cellRange.endRow,
|
|
558
|
+
columns = cellRange.columns,
|
|
559
|
+
footerRowRange = cellRange.footerRowRange;
|
|
560
|
+
|
|
561
|
+
var _getRowIndex3 = getRowIndex(startRow, endRow),
|
|
562
|
+
startRowIndex = _getRowIndex3.startRowIndex,
|
|
563
|
+
endRowIndex = _getRowIndex3.endRowIndex;
|
|
564
|
+
|
|
565
|
+
var _getFooterRowIndex3 = getFooterRowIndex(footerRowRange),
|
|
566
|
+
footerStartRowIndex = _getFooterRowIndex3.startRowIndex,
|
|
567
|
+
footerEndRowIndex = _getFooterRowIndex3.endRowIndex;
|
|
568
|
+
|
|
569
|
+
var startCol = columns[0];
|
|
570
|
+
var endCol = columns[columns.length - 1];
|
|
571
|
+
var matchCellRangeTop = isFooterCell ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex;
|
|
572
|
+
var matchCellRangeLeft = col.code === startCol.code;
|
|
573
|
+
var matchCellRangeBottom = isFooterCell ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex;
|
|
574
|
+
var matchCellRangeRight = col.code === endCol.code; // 如果样式已经匹配上了,就不需要再取计算的样式
|
|
575
|
+
|
|
576
|
+
obj.matchCellRangeTop = obj.matchCellRangeTop || matchCellRangeTop;
|
|
577
|
+
obj.matchCellRangeLeft = obj.matchCellRangeLeft || matchCellRangeLeft;
|
|
578
|
+
obj.matchCellRangeBottom = obj.matchCellRangeBottom || matchCellRangeBottom;
|
|
579
|
+
obj.matchCellRangeRight = obj.matchCellRangeRight || matchCellRangeRight;
|
|
580
|
+
return obj;
|
|
581
|
+
}, {
|
|
582
|
+
matchCellRangeTop: false,
|
|
583
|
+
matchCellRangeLeft: false,
|
|
584
|
+
matchCellRangeBottom: false,
|
|
585
|
+
matchCellRangeRight: false
|
|
586
|
+
});
|
|
409
587
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
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
|
+
export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
|
|
26
|
+
export declare const rowDragKey = "rowDragKey";
|
|
27
|
+
export declare function rowDrag(opt: RowDragFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
28
|
+
export {};
|