@kdcloudjs/table 1.2.2-canary.6 → 1.2.2-canary.8

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 (11) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +28 -14
  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 +5 -5
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/styles.js +1 -1
  8. package/es/table/pipeline/features/rowDrag.js +26 -12
  9. package/lib/table/base/styles.js +1 -1
  10. package/lib/table/pipeline/features/rowDrag.js +26 -12
  11. package/package.json +1 -1
package/es/table/base/styles.js CHANGED
@@ -111,7 +111,7 @@ var Z = {
111
111
  scrollItem: 30,
112
112
  loadingIndicator: 40
113
113
  };
114
- export var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
114
+ export var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n max-height:48px;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
115
115
  var outerBorderStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
116
116
  export var defaultCSSVariables = {
117
117
  '--row-height': '48px',
package/es/table/pipeline/features/rowDrag.js CHANGED
@@ -185,7 +185,7 @@ export function rowDrag(opt) {
185
185
  timeoutId = setTimeout(function () {
186
186
  intervalId = setInterval(function () {
187
187
  tableBody.scrollTop += moveOffset;
188
- }, 100);
188
+ }, 50);
189
189
  }, 500);
190
190
  };
191
191
  var handleDragStart = function handleDragStart(mouseDownEvent) {
@@ -228,6 +228,15 @@ export function rowDrag(opt) {
228
228
  setDragElementIcon(dragElement, 'move');
229
229
  if (dropTarget.isTable) {
230
230
  showDragLine(dragLine);
231
+ var getTreeModeOptions = dropTarget.tableParams.getTreeModeOptions;
232
+ var treeModeOptions = getTreeModeOptions();
233
+ var isTreeTable = !!treeModeOptions;
234
+ // 判断拖拽进入的表格是否是树形表格，控制指示线样式
235
+ if (isTreeTable) {
236
+ dragLine.classList.add(Classes.treeTableRowDragLine);
237
+ } else {
238
+ dragLine.classList.remove(Classes.treeTableRowDragLine);
239
+ }
231
240
  }
232
241
  var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
233
242
  dropTarget.onDragEnter(_dragEvent);
@@ -260,8 +269,10 @@ export function rowDrag(opt) {
260
269
  var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
261
270
  if (!dragItem) return;
262
271
  var row = dragItem.row;
263
- var rowKey = row[treeMetaKey].rowKey;
264
- if (!isExpanded(rowKey)) {
272
+ var _row$treeMetaKey = row[treeMetaKey],
273
+ rowKey = _row$treeMetaKey.rowKey,
274
+ isLeaf = _row$treeMetaKey.isLeaf;
275
+ if (!isLeaf && !isExpanded(rowKey)) {
265
276
  onExpand(rowKey);
266
277
  expandRowCallBackList.push(function () {
267
278
  return onCollapse(rowKey);
@@ -276,6 +287,9 @@ export function rowDrag(opt) {
276
287
  }
277
288
  };
278
289
  var handleDragStop = function handleDragStop(mouseUpEvent) {
290
+ if (!isValidDrag) {
291
+ return;
292
+ }
279
293
  removeElement(dragElement);
280
294
  removeElement(dragLine);
281
295
  artTable.classList.remove(cx(Classes.rowDragging));
@@ -283,10 +297,6 @@ export function rowDrag(opt) {
283
297
  clearTimeout(timeoutId);
284
298
  clearInterval(intervalId);
285
299
  clearTimeout(expandRowTimeoutId);
286
- while (expandRowCallBackList.length > 0) {
287
- var callback = expandRowCallBackList.pop();
288
- callback();
289
- }
290
300
  var rowDropZones = rowDragApi.getRowDropZone();
291
301
  rowDropZones.forEach(function (dropzone) {
292
302
  var container = dropzone.getContainer();
@@ -300,6 +310,10 @@ export function rowDrag(opt) {
300
310
  var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
301
311
  dropTarget.onDragStop(dragEvent);
302
312
  }
313
+ while (expandRowCallBackList.length > 0) {
314
+ var callback = expandRowCallBackList.pop();
315
+ callback();
316
+ }
303
317
  };
304
318
  var mousemove$ = fromEvent(window, 'mousemove');
305
319
  var mouseup$ = fromEvent(window, 'mouseup');
@@ -686,11 +700,11 @@ var getLinePosition = function getLinePosition(_ref2) {
686
700
  var _getElementSize3 = _getElementSize(cell),
687
701
  paddingLeft = _getElementSize3.paddingLeft;
688
702
  var expandCellRect = cell.getBoundingClientRect();
689
- var _row$treeMetaKey = row[treeMetaKey],
690
- rowKey = _row$treeMetaKey.rowKey,
691
- depth = _row$treeMetaKey.depth,
692
- isLeaf = _row$treeMetaKey.isLeaf,
693
- expanded = _row$treeMetaKey.expanded;
703
+ var _row$treeMetaKey2 = row[treeMetaKey],
704
+ rowKey = _row$treeMetaKey2.rowKey,
705
+ depth = _row$treeMetaKey2.depth,
706
+ isLeaf = _row$treeMetaKey2.isLeaf,
707
+ expanded = _row$treeMetaKey2.expanded;
694
708
  var addWidth = isLeaf ? iconWidth + iconGap : 0;
695
709
  var indent = iconIndent + depth * indentSize + addWidth;
696
710
  var x = expandCellRect.x,
package/lib/table/base/styles.js CHANGED
@@ -123,7 +123,7 @@ var Z = {
123
123
  scrollItem: 30,
124
124
  loadingIndicator: 40
125
125
  };
126
- var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
126
+ var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n max-height:48px;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
127
127
  var outerBorderStyleMixin = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
128
128
  var defaultCSSVariables = exports.defaultCSSVariables = {
129
129
  '--row-height': '48px',
package/lib/table/pipeline/features/rowDrag.js CHANGED
@@ -196,7 +196,7 @@ function rowDrag(opt) {
196
196
  timeoutId = setTimeout(function () {
197
197
  intervalId = setInterval(function () {
198
198
  tableBody.scrollTop += moveOffset;
199
- }, 100);
199
+ }, 50);
200
200
  }, 500);
201
201
  };
202
202
  var handleDragStart = function handleDragStart(mouseDownEvent) {
@@ -239,6 +239,15 @@ function rowDrag(opt) {
239
239
  setDragElementIcon(dragElement, 'move');
240
240
  if (dropTarget.isTable) {
241
241
  showDragLine(dragLine);
242
+ var getTreeModeOptions = dropTarget.tableParams.getTreeModeOptions;
243
+ var treeModeOptions = getTreeModeOptions();
244
+ var isTreeTable = !!treeModeOptions;
245
+ // 判断拖拽进入的表格是否是树形表格，控制指示线样式
246
+ if (isTreeTable) {
247
+ dragLine.classList.add(_styles.Classes.treeTableRowDragLine);
248
+ } else {
249
+ dragLine.classList.remove(_styles.Classes.treeTableRowDragLine);
250
+ }
242
251
  }
243
252
  var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
244
253
  dropTarget.onDragEnter(_dragEvent);
@@ -271,8 +280,10 @@ function rowDrag(opt) {
271
280
  var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
272
281
  if (!dragItem) return;
273
282
  var row = dragItem.row;
274
- var rowKey = row[treeMetaKey].rowKey;
275
- if (!isExpanded(rowKey)) {
283
+ var _row$treeMetaKey = row[treeMetaKey],
284
+ rowKey = _row$treeMetaKey.rowKey,
285
+ isLeaf = _row$treeMetaKey.isLeaf;
286
+ if (!isLeaf && !isExpanded(rowKey)) {
276
287
  onExpand(rowKey);
277
288
  expandRowCallBackList.push(function () {
278
289
  return onCollapse(rowKey);
@@ -287,6 +298,9 @@ function rowDrag(opt) {
287
298
  }
288
299
  };
289
300
  var handleDragStop = function handleDragStop(mouseUpEvent) {
301
+ if (!isValidDrag) {
302
+ return;
303
+ }
290
304
  removeElement(dragElement);
291
305
  removeElement(dragLine);
292
306
  artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
@@ -294,10 +308,6 @@ function rowDrag(opt) {
294
308
  clearTimeout(timeoutId);
295
309
  clearInterval(intervalId);
296
310
  clearTimeout(expandRowTimeoutId);
297
- while (expandRowCallBackList.length > 0) {
298
- var callback = expandRowCallBackList.pop();
299
- callback();
300
- }
301
311
  var rowDropZones = rowDragApi.getRowDropZone();
302
312
  rowDropZones.forEach(function (dropzone) {
303
313
  var container = dropzone.getContainer();
@@ -311,6 +321,10 @@ function rowDrag(opt) {
311
321
  var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
312
322
  dropTarget.onDragStop(dragEvent);
313
323
  }
324
+ while (expandRowCallBackList.length > 0) {
325
+ var callback = expandRowCallBackList.pop();
326
+ callback();
327
+ }
314
328
  };
315
329
  var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
316
330
  var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
@@ -697,11 +711,11 @@ var getLinePosition = function getLinePosition(_ref2) {
697
711
  var _getElementSize3 = _getElementSize(cell),
698
712
  paddingLeft = _getElementSize3.paddingLeft;
699
713
  var expandCellRect = cell.getBoundingClientRect();
700
- var _row$treeMetaKey = row[treeMetaKey],
701
- rowKey = _row$treeMetaKey.rowKey,
702
- depth = _row$treeMetaKey.depth,
703
- isLeaf = _row$treeMetaKey.isLeaf,
704
- expanded = _row$treeMetaKey.expanded;
714
+ var _row$treeMetaKey2 = row[treeMetaKey],
715
+ rowKey = _row$treeMetaKey2.rowKey,
716
+ depth = _row$treeMetaKey2.depth,
717
+ isLeaf = _row$treeMetaKey2.isLeaf,
718
+ expanded = _row$treeMetaKey2.expanded;
705
719
  var addWidth = isLeaf ? iconWidth + iconGap : 0;
706
720
  var indent = iconIndent + depth * indentSize + addWidth;
707
721
  var x = expandCellRect.x,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/table",
3
- "version": "1.2.2-canary.6",
3
+ "version": "1.2.2-canary.8",
4
4
  "description": "金蝶 react table 组件",
5
5
  "title": "table",
6
6
  "keywords": [