@kdcloudjs/table 1.1.4 → 1.1.5-canary.1
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 +860 -310
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +10 -9
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/styles.d.ts +11 -2
- package/es/table/base/styles.js +18 -7
- package/es/table/base/table.d.ts +2 -0
- package/es/table/base/table.js +32 -54
- package/es/table/base/utils.d.ts +7 -0
- package/es/table/base/utils.js +36 -2
- package/es/table/pipeline/features/colGroupExtendable.d.ts +6 -0
- package/es/table/pipeline/features/colGroupExtendable.js +103 -0
- package/es/table/pipeline/features/columnDrag.js +5 -4
- package/es/table/pipeline/features/columnFilter.d.ts +4 -2
- package/es/table/pipeline/features/columnFilter.js +39 -19
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +22 -2
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
- package/es/table/pipeline/features/filter/Filter.d.ts +3 -2
- package/es/table/pipeline/features/filter/Filter.js +54 -35
- package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/es/table/pipeline/features/filter/FilterPanel.js +40 -21
- package/es/table/pipeline/features/filter/util.js +4 -4
- package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/es/table/pipeline/features/footerDataSource.js +25 -0
- package/es/table/pipeline/features/index.d.ts +2 -0
- package/es/table/pipeline/features/index.js +3 -1
- package/es/table/pipeline/features/multiSelect.js +7 -2
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +170 -30
- package/es/table/pipeline/features/singleSelect.js +4 -0
- package/es/table/pipeline/features/treeMode.d.ts +2 -0
- package/es/table/pipeline/features/treeMode.js +20 -21
- package/es/table/pipeline/pipeline.d.ts +5 -1
- package/es/table/pipeline/pipeline.js +11 -10
- package/es/table/utils/element.d.ts +1 -0
- package/es/table/utils/element.js +4 -0
- package/es/table/utils/keyCode.d.ts +5 -0
- package/es/table/utils/keyCode.js +5 -0
- package/es/table/utils/mergeCellProps.js +2 -6
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +11 -2
- package/lib/table/base/styles.js +18 -7
- package/lib/table/base/table.d.ts +2 -0
- package/lib/table/base/table.js +32 -54
- package/lib/table/base/utils.d.ts +7 -0
- package/lib/table/base/utils.js +43 -2
- package/lib/table/pipeline/features/colGroupExtendable.d.ts +6 -0
- package/lib/table/pipeline/features/colGroupExtendable.js +124 -0
- package/lib/table/pipeline/features/columnDrag.js +5 -4
- package/lib/table/pipeline/features/columnFilter.d.ts +4 -2
- package/lib/table/pipeline/features/columnFilter.js +37 -19
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +23 -1
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
- package/lib/table/pipeline/features/filter/Filter.d.ts +3 -2
- package/lib/table/pipeline/features/filter/Filter.js +57 -35
- package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/lib/table/pipeline/features/filter/FilterPanel.js +42 -20
- package/lib/table/pipeline/features/filter/util.js +4 -4
- package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/lib/table/pipeline/features/footerDataSource.js +41 -0
- package/lib/table/pipeline/features/index.d.ts +2 -0
- package/lib/table/pipeline/features/index.js +23 -1
- package/lib/table/pipeline/features/multiSelect.js +6 -1
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +173 -32
- package/lib/table/pipeline/features/singleSelect.js +4 -0
- package/lib/table/pipeline/features/treeMode.d.ts +2 -0
- package/lib/table/pipeline/features/treeMode.js +21 -23
- package/lib/table/pipeline/pipeline.d.ts +5 -1
- package/lib/table/pipeline/pipeline.js +12 -10
- package/lib/table/utils/element.d.ts +1 -0
- package/lib/table/utils/element.js +6 -0
- package/lib/table/utils/keyCode.d.ts +5 -0
- package/lib/table/utils/keyCode.js +12 -0
- package/lib/table/utils/mergeCellProps.js +2 -6
- package/package.json +3 -3
|
@@ -19,6 +19,12 @@ Object.defineProperty(exports, "buildTree", {
|
|
|
19
19
|
return _buildTree.buildTree;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
+
Object.defineProperty(exports, "colGroupExtendable", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function get() {
|
|
25
|
+
return _colGroupExtendable.colGroupExtendable;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
22
28
|
Object.defineProperty(exports, "columnDrag", {
|
|
23
29
|
enumerable: true,
|
|
24
30
|
get: function get() {
|
|
@@ -55,6 +61,18 @@ Object.defineProperty(exports, "filter", {
|
|
|
55
61
|
return _filterInstanceProperty(_columnFilter);
|
|
56
62
|
}
|
|
57
63
|
});
|
|
64
|
+
Object.defineProperty(exports, "footerDataSource", {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function get() {
|
|
67
|
+
return _footerDataSource.footerDataSource;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
Object.defineProperty(exports, "footerRowMetaSymbol", {
|
|
71
|
+
enumerable: true,
|
|
72
|
+
get: function get() {
|
|
73
|
+
return _footerDataSource.footerRowMetaSymbol;
|
|
74
|
+
}
|
|
75
|
+
});
|
|
58
76
|
Object.defineProperty(exports, "mergeCellHover", {
|
|
59
77
|
enumerable: true,
|
|
60
78
|
get: function get() {
|
|
@@ -156,4 +174,8 @@ var _columnFilter = require("./columnFilter");
|
|
|
156
174
|
|
|
157
175
|
var _rangeSelection = require("./rangeSelection");
|
|
158
176
|
|
|
159
|
-
var _mergeCellHover = require("./mergeCellHover");
|
|
177
|
+
var _mergeCellHover = require("./mergeCellHover");
|
|
178
|
+
|
|
179
|
+
var _footerDataSource = require("./footerDataSource");
|
|
180
|
+
|
|
181
|
+
var _colGroupExtendable = require("./colGroupExtendable");
|
|
@@ -61,7 +61,8 @@ function multiSelect() {
|
|
|
61
61
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
62
62
|
|
|
63
63
|
var allKeys = [];
|
|
64
|
-
|
|
64
|
+
var flatDataSource = (0, _utils.collectNodes)(dataSource);
|
|
65
|
+
flatDataSource.forEach(function (row, rowIndex) {
|
|
65
66
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
66
67
|
|
|
67
68
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
@@ -130,6 +131,10 @@ function multiSelect() {
|
|
|
130
131
|
return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
|
|
131
132
|
},
|
|
132
133
|
render: function render(_, row, rowIndex) {
|
|
134
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
|
|
133
138
|
var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
134
139
|
|
|
135
140
|
var checked = set.has(key);
|
|
@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
|
|
|
6
6
|
preventkDefaultOfKeyDownEvent?: boolean;
|
|
7
7
|
}
|
|
8
8
|
export declare const rangeSelectionKey = "rangeSelection";
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const lastClickCellKey = "lastClickCell";
|
|
10
10
|
export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.
|
|
10
|
+
exports.lastClickCellKey = void 0;
|
|
11
11
|
exports.rangeSelection = rangeSelection;
|
|
12
12
|
exports.rangeSelectionKey = void 0;
|
|
13
13
|
|
|
@@ -21,6 +21,8 @@ var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-
|
|
|
21
21
|
|
|
22
22
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
23
23
|
|
|
24
|
+
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
|
|
25
|
+
|
|
24
26
|
var _utils = require("../../utils");
|
|
25
27
|
|
|
26
28
|
var _others = require("../../utils/others");
|
|
@@ -35,42 +37,44 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
35
37
|
|
|
36
38
|
var rangeSelectionKey = 'rangeSelection';
|
|
37
39
|
exports.rangeSelectionKey = rangeSelectionKey;
|
|
38
|
-
var
|
|
39
|
-
exports.
|
|
40
|
+
var lastClickCellKey = 'lastClickCell';
|
|
41
|
+
exports.lastClickCellKey = lastClickCellKey;
|
|
40
42
|
|
|
41
43
|
function rangeSelection(opts) {
|
|
42
44
|
return function step(pipeline) {
|
|
43
45
|
var SCROLL_SIZE = 30;
|
|
44
46
|
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
47
|
+
var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
|
|
45
48
|
|
|
46
49
|
if (!tableBody) {
|
|
47
50
|
return pipeline;
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
var columns = pipeline.getColumns();
|
|
54
|
+
var dataSource = pipeline.getDataSource();
|
|
51
55
|
|
|
52
56
|
var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
|
|
53
57
|
var _a;
|
|
54
58
|
|
|
55
59
|
pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
|
|
56
60
|
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
|
|
57
|
-
};
|
|
58
|
-
// pipeline.setFeatureOptions(rangeSelectionKey, {
|
|
59
|
-
// optionKey: rangeSelectionKey,
|
|
60
|
-
// rangeSelectedChange: rangeSelectedChange
|
|
61
|
-
// })
|
|
62
|
-
// }
|
|
63
|
-
|
|
61
|
+
};
|
|
64
62
|
|
|
65
63
|
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
|
|
66
|
-
if (!startDragCell || !draggingCell
|
|
64
|
+
if (!startDragCell || !draggingCell) return;
|
|
67
65
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
68
|
-
|
|
66
|
+
|
|
67
|
+
var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
|
|
68
|
+
startRow = _getRangeSelectionRow.startRow,
|
|
69
|
+
endRow = _getRangeSelectionRow.endRow,
|
|
70
|
+
footerRowRange = _getRangeSelectionRow.footerRowRange;
|
|
71
|
+
|
|
69
72
|
var rangeSelection = {
|
|
70
|
-
startRow:
|
|
71
|
-
endRow:
|
|
73
|
+
startRow: startRow,
|
|
74
|
+
endRow: endRow,
|
|
72
75
|
columns: rangeColumns,
|
|
73
|
-
startColumn: startDragCell.column
|
|
76
|
+
startColumn: startDragCell.column,
|
|
77
|
+
footerRowRange: footerRowRange
|
|
74
78
|
};
|
|
75
79
|
rangeSelectedChange(rangeSelection);
|
|
76
80
|
};
|
|
@@ -81,23 +85,23 @@ function rangeSelection(opts) {
|
|
|
81
85
|
|
|
82
86
|
if (clickCell) {
|
|
83
87
|
if (event.shiftKey) {
|
|
84
|
-
var _lastClickCell = pipeline.getStateAtKey(
|
|
88
|
+
var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
|
|
85
89
|
|
|
86
90
|
if (_lastClickCell) {
|
|
87
91
|
setRangeSelection(_lastClickCell, clickCell);
|
|
88
92
|
} else {
|
|
89
93
|
// 第一次进来就按住shift键,这时候要记住点击的单元格
|
|
90
|
-
pipeline.setStateAtKey(
|
|
94
|
+
pipeline.setStateAtKey(lastClickCellKey, clickCell);
|
|
91
95
|
}
|
|
92
96
|
} else {
|
|
93
|
-
pipeline.setStateAtKey(
|
|
94
|
-
|
|
97
|
+
pipeline.setStateAtKey(lastClickCellKey, clickCell);
|
|
98
|
+
setRangeSelection(clickCell, clickCell);
|
|
95
99
|
}
|
|
96
100
|
}
|
|
97
101
|
};
|
|
98
102
|
|
|
99
103
|
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
100
|
-
if (mouseDownEvent.button !== 0 || !(0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
|
|
104
|
+
if (mouseDownEvent.button !== 0 || !((0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent) || (0, _utils.isElementInEventPath)(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
|
|
101
105
|
// shift + 点击选中
|
|
102
106
|
|
|
103
107
|
shiftKeySelect(mouseDownEvent);
|
|
@@ -153,18 +157,23 @@ function rangeSelection(opts) {
|
|
|
153
157
|
};
|
|
154
158
|
|
|
155
159
|
var onKeyDown = function onKeyDown(e) {
|
|
156
|
-
if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
|
|
160
|
+
if (!((0, _utils.isElementInEventPath)(tableBody, e.nativeEvent) || (0, _utils.isElementInEventPath)(tableFooter, e.nativeEvent))) return;
|
|
157
161
|
|
|
158
162
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
159
163
|
var rowLen = pipeline.getDataSource().length;
|
|
164
|
+
var footerDataSource = pipeline.getFooterDataSource() || []; // 焦点位于可编辑的单元格内不做全选
|
|
160
165
|
|
|
161
|
-
if (columns.length && rowLen) {
|
|
166
|
+
if (columns.length && rowLen && !getElementEditable(e.target)) {
|
|
162
167
|
opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
|
|
163
168
|
rangeSelectedChange({
|
|
164
169
|
startRow: 0,
|
|
165
170
|
endRow: rowLen - 1,
|
|
166
|
-
columns: columns,
|
|
167
|
-
startColumn: columns[0]
|
|
171
|
+
columns: (0, _utils.collectNodes)(columns, 'leaf-only'),
|
|
172
|
+
startColumn: columns[0],
|
|
173
|
+
footerRowRange: footerDataSource.length > 0 ? {
|
|
174
|
+
startRow: 0,
|
|
175
|
+
endRow: footerDataSource.length - 1
|
|
176
|
+
} : null
|
|
168
177
|
});
|
|
169
178
|
}
|
|
170
179
|
}
|
|
@@ -173,7 +182,8 @@ function rangeSelection(opts) {
|
|
|
173
182
|
pipeline.addTableProps({
|
|
174
183
|
onMouseDown: onMouseDown,
|
|
175
184
|
onKeyDown: onKeyDown,
|
|
176
|
-
tabIndex: -1
|
|
185
|
+
tabIndex: -1,
|
|
186
|
+
className: (0, _classnames.default)([_styles.Classes.rangeSelection])
|
|
177
187
|
}); // todo: 后面可以把mousedown放到一个流里面
|
|
178
188
|
|
|
179
189
|
return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
|
|
@@ -189,15 +199,29 @@ function rangeSelection(opts) {
|
|
|
189
199
|
var _cx;
|
|
190
200
|
|
|
191
201
|
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
202
|
+
var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
192
203
|
var startRow = rangeSelection.startRow,
|
|
193
204
|
endRow = rangeSelection.endRow,
|
|
194
|
-
columns = rangeSelection.columns
|
|
195
|
-
|
|
196
|
-
|
|
205
|
+
columns = rangeSelection.columns,
|
|
206
|
+
footerRowRange = rangeSelection.footerRowRange;
|
|
207
|
+
|
|
208
|
+
var _getRowIndex = getRowIndex(startRow, endRow),
|
|
209
|
+
startRowIndex = _getRowIndex.startRowIndex,
|
|
210
|
+
endRowIndex = _getRowIndex.endRowIndex;
|
|
211
|
+
|
|
212
|
+
var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
|
|
213
|
+
footerStartRowIndex = _getFooterRowIndex.startRowIndex,
|
|
214
|
+
footerEndRowIndex = _getFooterRowIndex.endRowIndex;
|
|
215
|
+
|
|
197
216
|
var startCol = columns[0];
|
|
198
217
|
var endCol = columns[columns.length - 1];
|
|
199
|
-
var
|
|
200
|
-
var
|
|
218
|
+
var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
|
|
219
|
+
var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
|
|
220
|
+
var match = footerMatch || bodyMatch;
|
|
221
|
+
var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
|
|
222
|
+
|
|
223
|
+
var showCellRangeStyle = match && !matchSingleCell;
|
|
224
|
+
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));
|
|
201
225
|
return (0, _utils.mergeCellProps)(prevCellProps, {
|
|
202
226
|
className: className
|
|
203
227
|
});
|
|
@@ -223,7 +247,8 @@ function getTargetCell(target, columns) {
|
|
|
223
247
|
rowIndex: parseInt(target.getAttribute('data-rowindex')),
|
|
224
248
|
rowSpan: parseInt(target.getAttribute('rowspan') || 1),
|
|
225
249
|
code: columnCode,
|
|
226
|
-
column: column
|
|
250
|
+
column: column,
|
|
251
|
+
isInFooter: isEleInFooter(target)
|
|
227
252
|
}
|
|
228
253
|
};
|
|
229
254
|
}();
|
|
@@ -238,7 +263,19 @@ function getTargetCell(target, columns) {
|
|
|
238
263
|
}
|
|
239
264
|
|
|
240
265
|
function isSameCell(cell1, cell2) {
|
|
241
|
-
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
|
|
266
|
+
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
function isEleInFooter(target) {
|
|
270
|
+
while (target && !target.classList.contains(_styles.Classes.artTable)) {
|
|
271
|
+
if (target.classList.contains(_styles.Classes.tableFooter)) {
|
|
272
|
+
return true;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
target = target.parentElement;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
return false;
|
|
242
279
|
}
|
|
243
280
|
|
|
244
281
|
function getRangeColumns(startCell, endCell, columns) {
|
|
@@ -255,4 +292,108 @@ function getRangeColumns(startCell, endCell, columns) {
|
|
|
255
292
|
} else {
|
|
256
293
|
return (0, _slice.default)(flatColumns).call(flatColumns, endIndex, startIndex + 1);
|
|
257
294
|
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
298
|
+
var footerRowRange = null;
|
|
299
|
+
var startRow = -1;
|
|
300
|
+
var endRow = -1;
|
|
301
|
+
|
|
302
|
+
var _getCellRangeRow = getCellRangeRow(startCell, endCell),
|
|
303
|
+
_startRow = _getCellRangeRow.startRow,
|
|
304
|
+
_endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
if (!startCell.isInFooter && !endCell.isInFooter) {
|
|
308
|
+
startRow = _startRow;
|
|
309
|
+
endRow = _endRow;
|
|
310
|
+
} else if (startCell.isInFooter && endCell.isInFooter) {
|
|
311
|
+
// 两个单元格都在表底
|
|
312
|
+
footerRowRange = {
|
|
313
|
+
startRow: _startRow,
|
|
314
|
+
endRow: _endRow
|
|
315
|
+
};
|
|
316
|
+
} else {
|
|
317
|
+
// 一个单元格在表体,一个在表底
|
|
318
|
+
if (startCell.isInFooter) {
|
|
319
|
+
startRow = dataSource.length - 1;
|
|
320
|
+
endRow = endCell.rowIndex;
|
|
321
|
+
footerRowRange = {
|
|
322
|
+
startRow: startCell.rowIndex,
|
|
323
|
+
endRow: 0
|
|
324
|
+
};
|
|
325
|
+
} else {
|
|
326
|
+
startRow = startCell.rowIndex;
|
|
327
|
+
endRow = dataSource.length - 1;
|
|
328
|
+
footerRowRange = {
|
|
329
|
+
startRow: 0,
|
|
330
|
+
endRow: endCell.rowIndex
|
|
331
|
+
};
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
return {
|
|
336
|
+
startRow: startRow,
|
|
337
|
+
endRow: endRow,
|
|
338
|
+
footerRowRange: footerRowRange
|
|
339
|
+
};
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
function getCellRangeRow(startCell, endCell) {
|
|
343
|
+
if (isSameCell(startCell, endCell)) {
|
|
344
|
+
return {
|
|
345
|
+
startRow: startCell.rowIndex,
|
|
346
|
+
endRow: startCell.rowIndex
|
|
347
|
+
};
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
|
|
351
|
+
var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
|
|
352
|
+
var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
|
|
353
|
+
return {
|
|
354
|
+
startRow: startRow,
|
|
355
|
+
endRow: endRow
|
|
356
|
+
};
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
function isCellRangeSingleCell(rangeSelection) {
|
|
360
|
+
var startRow = rangeSelection.startRow,
|
|
361
|
+
endRow = rangeSelection.endRow,
|
|
362
|
+
columns = rangeSelection.columns,
|
|
363
|
+
footerRowRange = rangeSelection.footerRowRange;
|
|
364
|
+
var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
|
|
365
|
+
var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
|
|
366
|
+
return isBodySingleCell || isFooterSingleCell;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
function getRowIndex(startRow, endRow) {
|
|
370
|
+
var isReverse = startRow > endRow;
|
|
371
|
+
var startRowIndex = isReverse ? endRow : startRow;
|
|
372
|
+
var endRowIndex = isReverse ? startRow : endRow;
|
|
373
|
+
return {
|
|
374
|
+
startRowIndex: startRowIndex,
|
|
375
|
+
endRowIndex: endRowIndex
|
|
376
|
+
};
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
function getFooterRowIndex(footerRowRange) {
|
|
380
|
+
if (footerRowRange) {
|
|
381
|
+
return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
return {
|
|
385
|
+
startRowIndex: -1,
|
|
386
|
+
endRowIndex: -1
|
|
387
|
+
};
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
function getElementEditable(target) {
|
|
391
|
+
var _context2;
|
|
392
|
+
|
|
393
|
+
if (!target) return;
|
|
394
|
+
|
|
395
|
+
if ((0, _includes.default)(_context2 = ['input', 'textarea']).call(_context2, target.tagName.toLowerCase())) {
|
|
396
|
+
if (target.type === 'checkbox') return;
|
|
397
|
+
return !target.disabled && !target.readOnly;
|
|
398
|
+
}
|
|
258
399
|
}
|
|
@@ -76,6 +76,10 @@ function singleSelect() {
|
|
|
76
76
|
return preCellProps;
|
|
77
77
|
},
|
|
78
78
|
render: function render(_, row, rowIndex) {
|
|
79
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
|
|
79
83
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
80
84
|
|
|
81
85
|
return /*#__PURE__*/_react.default.createElement(Radio, {
|
|
@@ -32,6 +32,8 @@ export interface TreeModeFeatureOptions {
|
|
|
32
32
|
stopClickEventPropagation?: boolean;
|
|
33
33
|
/** 指定表格每一行元信息的记录字段 */
|
|
34
34
|
treeMetaKey?: string | symbol;
|
|
35
|
+
/** 指定展开列 */
|
|
36
|
+
expandColCode?: string;
|
|
35
37
|
}
|
|
36
38
|
export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
37
39
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
|
|
4
4
|
|
|
5
5
|
var _Array$from = require("@babel/runtime-corejs3/core-js-stable/array/from");
|
|
6
6
|
|
|
@@ -16,8 +16,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
16
16
|
exports.treeMetaSymbol = void 0;
|
|
17
17
|
exports.treeMode = treeMode;
|
|
18
18
|
|
|
19
|
-
var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
|
|
20
|
-
|
|
21
19
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
22
20
|
|
|
23
21
|
var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
@@ -32,7 +30,7 @@ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
|
|
|
32
30
|
|
|
33
31
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
34
32
|
|
|
35
|
-
var
|
|
33
|
+
var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
|
|
36
34
|
|
|
37
35
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
38
36
|
|
|
@@ -48,7 +46,7 @@ var _styles = require("../../base/styles");
|
|
|
48
46
|
|
|
49
47
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol2 !== "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; } } }; }
|
|
50
48
|
|
|
51
|
-
function _unsupportedIterableToArray(o, minLen) { var
|
|
49
|
+
function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 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); }
|
|
52
50
|
|
|
53
51
|
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; }
|
|
54
52
|
|
|
@@ -63,11 +61,6 @@ function treeMode() {
|
|
|
63
61
|
var stateKey = 'treeMode';
|
|
64
62
|
var ctx = pipeline.ctx;
|
|
65
63
|
var primaryKey = pipeline.ensurePrimaryKey('treeMode');
|
|
66
|
-
|
|
67
|
-
if (typeof primaryKey !== 'string') {
|
|
68
|
-
throw new Error('treeMode 仅支持字符串作为 primaryKey');
|
|
69
|
-
}
|
|
70
|
-
|
|
71
64
|
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 : [];
|
|
72
65
|
var openKeySet = new _set.default(openKeys);
|
|
73
66
|
|
|
@@ -122,7 +115,9 @@ function treeMode() {
|
|
|
122
115
|
try {
|
|
123
116
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
124
117
|
var node = _step.value;
|
|
125
|
-
|
|
118
|
+
|
|
119
|
+
var rowKey = _internals.internals.safeGetRowKey(primaryKey, node, -1);
|
|
120
|
+
|
|
126
121
|
var expanded = openKeySet.has(rowKey);
|
|
127
122
|
var isLeaf = isLeafNode(node, {
|
|
128
123
|
depth: depth,
|
|
@@ -152,18 +147,19 @@ function treeMode() {
|
|
|
152
147
|
}
|
|
153
148
|
|
|
154
149
|
function processColumns(columns) {
|
|
155
|
-
var _context2;
|
|
156
|
-
|
|
157
150
|
if (columns.length === 0) {
|
|
158
151
|
return columns;
|
|
159
152
|
}
|
|
160
153
|
|
|
161
|
-
var
|
|
162
|
-
|
|
163
|
-
|
|
154
|
+
var expandColIndex = (0, _findIndex.default)(columns).call(columns, function (_ref) {
|
|
155
|
+
var code = _ref.code;
|
|
156
|
+
return code && opts.expandColCode === code;
|
|
157
|
+
});
|
|
158
|
+
expandColIndex = expandColIndex === -1 ? 0 : expandColIndex;
|
|
159
|
+
var expandCol = columns[expandColIndex];
|
|
164
160
|
|
|
165
161
|
var render = function render(value, record, recordIndex) {
|
|
166
|
-
var content = _internals.internals.safeRender(
|
|
162
|
+
var content = _internals.internals.safeRender(expandCol, record, recordIndex);
|
|
167
163
|
|
|
168
164
|
if (record[treeMetaKey] == null) {
|
|
169
165
|
// 没有 treeMeta 信息的话,就返回原先的渲染结果
|
|
@@ -223,7 +219,7 @@ function treeMode() {
|
|
|
223
219
|
};
|
|
224
220
|
|
|
225
221
|
var getCellProps = function getCellProps(value, record, rowIndex) {
|
|
226
|
-
var prevProps = _internals.internals.safeGetCellProps(
|
|
222
|
+
var prevProps = _internals.internals.safeGetCellProps(expandCol, record, rowIndex);
|
|
227
223
|
|
|
228
224
|
if (record[treeMetaKey] == null) {
|
|
229
225
|
// 没有 treeMeta 信息的话,就返回原先的 cellProps
|
|
@@ -252,15 +248,17 @@ function treeMode() {
|
|
|
252
248
|
});
|
|
253
249
|
};
|
|
254
250
|
|
|
255
|
-
|
|
251
|
+
columns[expandColIndex] = (0, _extends3.default)((0, _extends3.default)({}, expandCol), {
|
|
256
252
|
title: /*#__PURE__*/_react.default.createElement("span", {
|
|
257
253
|
style: {
|
|
258
|
-
marginLeft: iconIndent + iconWidth + iconGap
|
|
254
|
+
marginLeft: iconIndent + iconWidth + iconGap,
|
|
255
|
+
display: 'flex'
|
|
259
256
|
}
|
|
260
|
-
}, _internals.internals.safeRenderHeader(
|
|
257
|
+
}, _internals.internals.safeRenderHeader(expandCol)),
|
|
261
258
|
render: render,
|
|
262
|
-
getCellProps: clickArea === 'cell' ? getCellProps :
|
|
263
|
-
})
|
|
259
|
+
getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps
|
|
260
|
+
});
|
|
261
|
+
return (0, _toConsumableArray2.default)(columns);
|
|
264
262
|
}
|
|
265
263
|
};
|
|
266
264
|
}
|
|
@@ -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,6 +88,10 @@ 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;
|
|
91
95
|
}
|
|
92
96
|
export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
|
|
93
97
|
export {};
|
|
@@ -28,6 +28,8 @@ var _utils = require("../utils");
|
|
|
28
28
|
|
|
29
29
|
var _autoFill = require("./features/autoFill");
|
|
30
30
|
|
|
31
|
+
var _rangeSelection = require("./features/rangeSelection");
|
|
32
|
+
|
|
31
33
|
/**
|
|
32
34
|
* 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法,包括……
|
|
33
35
|
*
|
|
@@ -292,19 +294,19 @@ var TablePipeline = /*#__PURE__*/function () {
|
|
|
292
294
|
|
|
293
295
|
result.setTableDomHelper = function (domHelper) {
|
|
294
296
|
_this2.ref.current.domHelper = domHelper;
|
|
295
|
-
};
|
|
296
|
-
// result.clearRangeSelectionStatus = () => {
|
|
297
|
-
// const { rangeSelectedChange } = this.getFeatureOptions(rangeSelectionKey)
|
|
298
|
-
// const rangeSelection = this.getStateAtKey(rangeSelectionKey)
|
|
299
|
-
// if (rangeSelection) {
|
|
300
|
-
// rangeSelectedChange?.(null)
|
|
301
|
-
// }
|
|
302
|
-
// }
|
|
303
|
-
// }
|
|
304
|
-
|
|
297
|
+
};
|
|
305
298
|
|
|
306
299
|
return result;
|
|
307
300
|
}
|
|
301
|
+
/**
|
|
302
|
+
* 清除范围选中内容
|
|
303
|
+
*/
|
|
304
|
+
|
|
305
|
+
}, {
|
|
306
|
+
key: "clearRangeSelection",
|
|
307
|
+
value: function clearRangeSelection() {
|
|
308
|
+
this.setStateAtKey(_rangeSelection.rangeSelectionKey, null);
|
|
309
|
+
}
|
|
308
310
|
}]);
|
|
309
311
|
return TablePipeline;
|
|
310
312
|
}();
|
|
@@ -7,6 +7,7 @@ exports.calculatePointerRelative = calculatePointerRelative;
|
|
|
7
7
|
exports.calculatePopupRelative = calculatePopupRelative;
|
|
8
8
|
exports.getEventPath = getEventPath;
|
|
9
9
|
exports.getTargetEleInEventPath = getTargetEleInEventPath;
|
|
10
|
+
exports.hasScroll = hasScroll;
|
|
10
11
|
exports.isElementInEventPath = isElementInEventPath;
|
|
11
12
|
exports.keepWithinBounds = keepWithinBounds;
|
|
12
13
|
|
|
@@ -240,4 +241,9 @@ function keepWithinBounds(popupParent, popup, x, y, isPerfect) {
|
|
|
240
241
|
x: x,
|
|
241
242
|
y: y
|
|
242
243
|
};
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
function hasScroll(ele) {
|
|
247
|
+
var isHorizontal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
248
|
+
return isHorizontal ? ele.scrollWidth > ele.clientWidth : ele.scrollHeight > ele.clientHeight;
|
|
243
249
|
}
|
|
@@ -17,13 +17,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
17
17
|
|
|
18
18
|
function composeEventHandler(handler1, handler2) {
|
|
19
19
|
return function () {
|
|
20
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
21
|
-
args[_key] = arguments[_key];
|
|
22
|
-
}
|
|
23
|
-
|
|
24
20
|
// 先执行原有的事件回调函数
|
|
25
|
-
handler1(
|
|
26
|
-
handler2(
|
|
21
|
+
handler1.apply(void 0, arguments);
|
|
22
|
+
handler2.apply(void 0, arguments); // 事件回调函数没有返回值,故这里不进行 return
|
|
27
23
|
};
|
|
28
24
|
}
|
|
29
25
|
/** 合并两个 cellProps(单元格属性)对象,返回一个合并后的全新对象。
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kdcloudjs/table",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5-canary.1",
|
|
4
4
|
"description": "金蝶 react table 组件",
|
|
5
5
|
"title": "table",
|
|
6
6
|
"keywords": [
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"test:update": "jest --config .jest.js --cache=false -u",
|
|
55
55
|
"test:ci": "jest --config .jest.js --coverage --ci --update-snapshot",
|
|
56
56
|
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --skip-unstable",
|
|
57
|
-
"pub": "npm run build && cross-env PUB_ENV=pub np --no-cleanup --no-tests",
|
|
58
|
-
"pub:
|
|
57
|
+
"pub": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --no-tests",
|
|
58
|
+
"pub:canary": "npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=canary",
|
|
59
59
|
"new": "node scripts/create-component.js",
|
|
60
60
|
"kd-ui": "npm install @kingdee-ui/kui --registry http://npm.kingdee.com/"
|
|
61
61
|
},
|