@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.
Files changed (59) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +599 -119
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +8 -8
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/header.d.ts +2 -1
  8. package/es/table/base/header.js +4 -2
  9. package/es/table/base/helpers/TableDOMUtils.js +3 -1
  10. package/es/table/base/html-table.js +1 -1
  11. package/es/table/base/renderTemplates.js +24 -10
  12. package/es/table/base/styles.d.ts +7 -0
  13. package/es/table/base/styles.js +9 -2
  14. package/es/table/base/table.d.ts +2 -1
  15. package/es/table/base/table.js +73 -46
  16. package/es/table/pipeline/features/autoFill.js +3 -1
  17. package/es/table/pipeline/features/columnDrag.js +11 -7
  18. package/es/table/pipeline/features/columnFilter.js +1 -1
  19. package/es/table/pipeline/features/index.d.ts +1 -0
  20. package/es/table/pipeline/features/index.js +2 -1
  21. package/es/table/pipeline/features/multiSelect.js +18 -35
  22. package/es/table/pipeline/features/rangeSelection.js +3 -2
  23. package/es/table/pipeline/features/rowDrag.d.ts +30 -0
  24. package/es/table/pipeline/features/rowDrag.js +349 -0
  25. package/es/table/pipeline/features/singleSelect.js +6 -4
  26. package/es/table/pipeline/features/treeMode.js +6 -0
  27. package/es/table/pipeline/pipeline.d.ts +2 -0
  28. package/es/table/pipeline/pipeline.js +9 -1
  29. package/es/table/utils/index.d.ts +1 -0
  30. package/es/table/utils/index.js +2 -1
  31. package/es/table/utils/selectColumn.d.ts +4 -0
  32. package/es/table/utils/selectColumn.js +6 -0
  33. package/lib/table/base/header.d.ts +2 -1
  34. package/lib/table/base/header.js +4 -2
  35. package/lib/table/base/helpers/TableDOMUtils.js +3 -1
  36. package/lib/table/base/html-table.js +1 -1
  37. package/lib/table/base/renderTemplates.js +24 -10
  38. package/lib/table/base/styles.d.ts +7 -0
  39. package/lib/table/base/styles.js +9 -2
  40. package/lib/table/base/table.d.ts +2 -1
  41. package/lib/table/base/table.js +73 -46
  42. package/lib/table/pipeline/features/autoFill.js +3 -1
  43. package/lib/table/pipeline/features/columnDrag.js +10 -6
  44. package/lib/table/pipeline/features/columnFilter.js +1 -1
  45. package/lib/table/pipeline/features/index.d.ts +1 -0
  46. package/lib/table/pipeline/features/index.js +9 -1
  47. package/lib/table/pipeline/features/multiSelect.js +20 -38
  48. package/lib/table/pipeline/features/rangeSelection.js +3 -2
  49. package/lib/table/pipeline/features/rowDrag.d.ts +30 -0
  50. package/lib/table/pipeline/features/rowDrag.js +371 -0
  51. package/lib/table/pipeline/features/singleSelect.js +8 -5
  52. package/lib/table/pipeline/features/treeMode.js +6 -0
  53. package/lib/table/pipeline/pipeline.d.ts +2 -0
  54. package/lib/table/pipeline/pipeline.js +9 -1
  55. package/lib/table/utils/index.d.ts +1 -0
  56. package/lib/table/utils/index.js +21 -1
  57. package/lib/table/utils/selectColumn.d.ts +4 -0
  58. package/lib/table/utils/selectColumn.js +16 -0
  59. 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(pipeline.getDataSource());
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 (fullRowsSet.has(rowKey) && clickArea === 'cell') {
107
- var prevChecked = selectValueSet.has(rowKey);
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 selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
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 = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
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 (!fullRowsSet.has(rowKey)) {
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 selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
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
- }); // 只保留一份到pipeline, 避免行数据过多时内容被握住
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 _allKeys = pipeline.getFeatureOptions(allEnableKeys);
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(_allKeys).call(_allKeys, start, end + 1);
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 = (_e = opts.radioPlacement) !== null && _e !== void 0 ? _e : 'start';
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';
@@ -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,4 @@
1
+ import { ArtColumn } from '../interfaces';
2
+ export declare const MULTI_SELECT_MARK_PROPNAME = "checkboxSelection";
3
+ export declare const SINGLE_SELECT_MARK_PROPNAME = "radioSelection";
4
+ export declare function isSelectColumn(column: ArtColumn): boolean;
@@ -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
+ }