@gravity-ui/dashkit 8.8.1-beta.1 → 8.8.1-beta.3

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 (9) hide show
  1. package/build/cjs/components/GridItem/GridItem.css +1 -0
  2. package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
  3. package/build/cjs/components/GridLayout/GridLayout.js +15 -8
  4. package/build/cjs/components/GridLayout/ReactGridLayout.js +22 -59
  5. package/build/esm/components/GridItem/GridItem.css +1 -0
  6. package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
  7. package/build/esm/components/GridLayout/GridLayout.js +15 -8
  8. package/build/esm/components/GridLayout/ReactGridLayout.js +22 -59
  9. package/package.json +1 -1
package/build/cjs/components/GridItem/GridItem.css CHANGED
@@ -57,6 +57,7 @@
57
57
  transition: none;
58
58
  z-index: 3;
59
59
  will-change: transform;
60
+ pointer-events: none;
60
61
  }
61
62
 
62
63
  .react-grid-item.dashkit-grid-item_is-focused {
package/build/cjs/components/GridLayout/GridLayout.d.ts CHANGED
@@ -40,7 +40,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
40
40
  reloadItems(): void;
41
41
  _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
42
42
  _onResizeStart: () => void;
43
- _onDragExit: () => void;
43
+ _onTargetRestore: () => void;
44
44
  _onStop: (group: any, newLayout: any) => void;
45
45
  _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
46
46
  _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
package/build/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -60,14 +60,14 @@ class GridLayout extends react_1.default.PureComponent {
60
60
  const onStop = this._onStop.bind(this, group);
61
61
  const onDrop = this._onDrop.bind(this, group);
62
62
  const onDropDragOver = this._onDropDragOver.bind(this, group);
63
- const onDragExit = this._onDragExit.bind(this, group);
63
+ const onDragTargetRestore = this._onTargetRestore.bind(this, group);
64
64
  this._memoCallbacksForGroups[group] = {
65
65
  onDragStart,
66
66
  onDragStop: onStop,
67
67
  onResizeStop: onStop,
68
68
  onDrop,
69
69
  onDropDragOver,
70
- onDragExit,
70
+ onDragTargetRestore,
71
71
  };
72
72
  }
73
73
  return this._memoCallbacksForGroups[group];
@@ -119,10 +119,13 @@ class GridLayout extends react_1.default.PureComponent {
119
119
  isDragging: true,
120
120
  });
121
121
  };
122
- this._onDragExit = () => {
123
- this.setState({
124
- draggedOverGroup: null,
125
- });
122
+ this._onTargetRestore = () => {
123
+ const { currentDraggingElement } = this.state;
124
+ if (currentDraggingElement) {
125
+ this.setState({
126
+ draggedOverGroup: currentDraggingElement[0],
127
+ });
128
+ }
126
129
  };
127
130
  this._onStop = (group, newLayout) => {
128
131
  const { layoutChange, onDrop, temporaryLayout } = this.context;
@@ -282,7 +285,7 @@ class GridLayout extends react_1.default.PureComponent {
282
285
  }
283
286
  renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
284
287
  const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
285
- const { currentDraggingElement } = this.state;
288
+ const { currentDraggingElement, draggedOverGroup } = this.state;
286
289
  const properties = groupGridProperties
287
290
  ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
288
291
  : registerManager.gridLayout;
@@ -292,7 +295,11 @@ class GridLayout extends react_1.default.PureComponent {
292
295
  }
293
296
  const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
294
297
  const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
295
- return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
298
+ const isDragCaptured = currentDraggingElement &&
299
+ group === currentDraggingElement[0] &&
300
+ draggedOverGroup !== null &&
301
+ draggedOverGroup !== group;
302
+ return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
296
303
  ? { draggableHandle: `.${draggableHandleClassName}` }
297
304
  : null), (outerDnDEnable
298
305
  ? {
package/build/cjs/components/GridLayout/ReactGridLayout.js CHANGED
@@ -5,21 +5,10 @@ const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
7
7
  const constants_1 = require("../../constants");
8
- const { compact, compactType } = react_grid_layout_1.utils;
9
- // pointer-events disabled to make mouse events be able to passthrought
10
- // while dragging element out of the grid the mouse positioned over grid item
11
- // so there is only two ways to get it, calculate rect or just give browser make his work
12
- const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
13
- // when shared element is dragged over another group we still creating placeholder for it
14
- // cause react-grid-layout is havely dependent on this element
15
- // while in future there will be some wey not to create dummy div and hide it with opacity
16
- // this hack is all what i've got now
17
- const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
18
8
  class DragOverLayout extends react_grid_layout_1.default {
19
9
  constructor(...args) {
20
10
  super(...args);
21
- this._isMouseOver = true;
22
- this._savedDragoutState = null;
11
+ this._savedDraggedOutLayout = null;
23
12
  // Reset placeholder when item dragged from outside
24
13
  this.resetExternalPlaceholder = () => {
25
14
  if (this.dragEnterCounter) {
@@ -33,13 +22,13 @@ class DragOverLayout extends react_grid_layout_1.default {
33
22
  const { cols } = this.props;
34
23
  const savedLayout = layout.map((item) => (Object.assign({}, item)));
35
24
  let hiddenElement;
36
- const newLayout = compact(layout.filter((item) => {
25
+ const newLayout = react_grid_layout_1.utils.compact(layout.filter((item) => {
37
26
  if (item.i === i) {
38
27
  hiddenElement = item;
39
28
  return false;
40
29
  }
41
30
  return true;
42
- }), compactType(this.props), cols);
31
+ }), react_grid_layout_1.utils.compactType(this.props), cols);
43
32
  if (hiddenElement) {
44
33
  newLayout.push(hiddenElement);
45
34
  }
@@ -47,23 +36,23 @@ class DragOverLayout extends react_grid_layout_1.default {
47
36
  activeDrag: null,
48
37
  layout: newLayout,
49
38
  });
50
- this.resetExternalPlaceholder();
51
- return { layout: savedLayout, id: hiddenElement.i };
39
+ return savedLayout;
52
40
  };
53
41
  this.extendedOnDrag = (i, x, y, sintEv) => {
54
- if (!this._isMouseOver) {
55
- if (!this._savedDragoutState) {
56
- this._savedDragoutState = this.hideLocalPlaceholder(i);
42
+ if (this.props.isDragCaptured) {
43
+ if (!this._savedDraggedOutLayout) {
44
+ this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
57
45
  }
58
46
  return;
59
47
  }
48
+ this._savedDraggedOutLayout = null;
60
49
  // parent onDrag will show new placeholder again
61
50
  this.parentOnDrag(i, x, y, sintEv);
62
51
  };
63
52
  this.extendedOnDragStop = (i, x, y, sintEv) => {
64
- // Restoring layout if item was dropped outside of the grid and wasn't captured
65
- if (this._savedDragoutState) {
66
- const savedLayout = this._savedDragoutState.layout;
53
+ // Restoring layout if item was dropped outside of the grid
54
+ if (this._savedDraggedOutLayout) {
55
+ const savedLayout = this._savedDraggedOutLayout;
67
56
  const l = react_grid_layout_1.utils.getLayoutItem(savedLayout, i);
68
57
  // Create placeholder (display only)
69
58
  const placeholder = {
@@ -80,46 +69,34 @@ class DragOverLayout extends react_grid_layout_1.default {
80
69
  }, () => {
81
70
  this.parentOnDragStop(i, x, y, sintEv);
82
71
  });
83
- this._savedDragoutState = null;
72
+ this._savedDraggedOutLayout = null;
84
73
  }
85
74
  else {
86
75
  this.parentOnDragStop(i, x, y, sintEv);
87
76
  }
88
77
  };
89
- this.extendedOnDragEnter = (...args) => {
90
- this._isMouseOver = true;
91
- this.parentOnDragEnter(...args);
92
- };
93
- this.extendedOnDragLeave = (...args) => {
94
- var _a, _b;
95
- this._isMouseOver = false;
96
- this.parentOnDragLeave(...args);
97
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
98
- };
99
78
  // Proxy mouse events -> drag methods for dnd between groups
100
79
  this.mouseEnterHandler = (e) => {
101
- this._isMouseOver = true;
80
+ var _a, _b;
102
81
  if (this.props.hasSharedDragItem) {
103
- this.parentOnDragEnter(e);
82
+ this.onDragEnter(e);
83
+ }
84
+ else if (this.props.isDragCaptured) {
85
+ (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
104
86
  }
105
87
  };
106
88
  this.mouseLeaveHandler = (e) => {
107
- var _a, _b;
108
- this._isMouseOver = false;
109
89
  if (this.props.hasSharedDragItem) {
110
- this.parentOnDragLeave(e);
111
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
90
+ this.onDragLeave(e);
112
91
  }
113
92
  };
114
93
  this.mouseMoveHandler = (e) => {
115
- this._isMouseOver = true;
116
94
  if (this.props.hasSharedDragItem) {
117
95
  this.onDragOver(e);
118
96
  }
119
97
  };
120
98
  this.mouseUpHandler = (e) => {
121
99
  var _a, _b;
122
- this._isMouseOver = true;
123
100
  if (this.props.hasSharedDragItem) {
124
101
  e.preventDefault();
125
102
  const { droppingItem } = this.props;
@@ -134,10 +111,6 @@ class DragOverLayout extends react_grid_layout_1.default {
134
111
  this.onDrag = this.extendedOnDrag;
135
112
  this.parentOnDragStop = this.onDragStop;
136
113
  this.onDragStop = this.extendedOnDragStop;
137
- this.parentOnDragEnter = this.onDragEnter;
138
- this.onDragEnter = this.extendedOnDragEnter;
139
- this.parentOnDragLeave = this.onDragLeave;
140
- this.onDragLeave = this.extendedOnDragLeave;
141
114
  }
142
115
  componentDidMount() {
143
116
  var _a;
@@ -162,8 +135,6 @@ class DragOverLayout extends react_grid_layout_1.default {
162
135
  innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
163
136
  innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
164
137
  }
165
- // Resetting instance props
166
- this._savedDragoutState = null;
167
138
  }
168
139
  // react-grid-layout doens't calculate it's height when last element is removed
169
140
  // and just keeps the previous value
@@ -189,7 +160,7 @@ class DragOverLayout extends react_grid_layout_1.default {
189
160
  // And cause grid-layout using it's own GridItem to make it look
190
161
  // like overlay adding className
191
162
  processGridItem(child, isDroppingItem) {
192
- var _a, _b, _c;
163
+ var _a;
193
164
  const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
194
165
  if (!gridItem) {
195
166
  return gridItem;
@@ -199,23 +170,15 @@ class DragOverLayout extends react_grid_layout_1.default {
199
170
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
200
171
  const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
201
172
  const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
202
- const dragStyles = this.props.hasSharedDragItem
203
- ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
204
- : DRAGGING_PLACEHOLDER_STYLE;
173
+ const style = gridItem.props.style || null;
205
174
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
206
175
  return react_1.default.cloneElement(gridItem, {
207
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
176
+ // hiding previre if dragging shared item
177
+ style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
208
178
  className: constants_1.OVERLAY_CLASS_NAME,
209
179
  droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
210
180
  });
211
181
  }
212
- else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
213
- itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
214
- const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
215
- return react_1.default.cloneElement(gridItem, {
216
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
217
- });
218
- }
219
182
  return gridItem;
220
183
  }
221
184
  }
package/build/esm/components/GridItem/GridItem.css CHANGED
@@ -57,6 +57,7 @@
57
57
  transition: none;
58
58
  z-index: 3;
59
59
  will-change: transform;
60
+ pointer-events: none;
60
61
  }
61
62
 
62
63
  .react-grid-item.dashkit-grid-item_is-focused {
package/build/esm/components/GridLayout/GridLayout.d.ts CHANGED
@@ -40,7 +40,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
40
40
  reloadItems(): void;
41
41
  _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
42
42
  _onResizeStart: () => void;
43
- _onDragExit: () => void;
43
+ _onTargetRestore: () => void;
44
44
  _onStop: (group: any, newLayout: any) => void;
45
45
  _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
46
46
  _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
package/build/esm/components/GridLayout/GridLayout.js CHANGED
@@ -57,14 +57,14 @@ class GridLayout extends React.PureComponent {
57
57
  const onStop = this._onStop.bind(this, group);
58
58
  const onDrop = this._onDrop.bind(this, group);
59
59
  const onDropDragOver = this._onDropDragOver.bind(this, group);
60
- const onDragExit = this._onDragExit.bind(this, group);
60
+ const onDragTargetRestore = this._onTargetRestore.bind(this, group);
61
61
  this._memoCallbacksForGroups[group] = {
62
62
  onDragStart,
63
63
  onDragStop: onStop,
64
64
  onResizeStop: onStop,
65
65
  onDrop,
66
66
  onDropDragOver,
67
- onDragExit,
67
+ onDragTargetRestore,
68
68
  };
69
69
  }
70
70
  return this._memoCallbacksForGroups[group];
@@ -116,10 +116,13 @@ class GridLayout extends React.PureComponent {
116
116
  isDragging: true,
117
117
  });
118
118
  };
119
- this._onDragExit = () => {
120
- this.setState({
121
- draggedOverGroup: null,
122
- });
119
+ this._onTargetRestore = () => {
120
+ const { currentDraggingElement } = this.state;
121
+ if (currentDraggingElement) {
122
+ this.setState({
123
+ draggedOverGroup: currentDraggingElement[0],
124
+ });
125
+ }
123
126
  };
124
127
  this._onStop = (group, newLayout) => {
125
128
  const { layoutChange, onDrop, temporaryLayout } = this.context;
@@ -279,7 +282,7 @@ class GridLayout extends React.PureComponent {
279
282
  }
280
283
  renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
281
284
  const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
282
- const { currentDraggingElement } = this.state;
285
+ const { currentDraggingElement, draggedOverGroup } = this.state;
283
286
  const properties = groupGridProperties
284
287
  ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
285
288
  : registerManager.gridLayout;
@@ -289,7 +292,11 @@ class GridLayout extends React.PureComponent {
289
292
  }
290
293
  const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
291
294
  const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
292
- return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragExit: callbacks.onDragExit, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem }, (draggableHandleClassName
295
+ const isDragCaptured = currentDraggingElement &&
296
+ group === currentDraggingElement[0] &&
297
+ draggedOverGroup !== null &&
298
+ draggedOverGroup !== group;
299
+ return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
293
300
  ? { draggableHandle: `.${draggableHandleClassName}` }
294
301
  : null), (outerDnDEnable
295
302
  ? {
package/build/esm/components/GridLayout/ReactGridLayout.js CHANGED
@@ -1,21 +1,10 @@
1
1
  import React from 'react';
2
2
  import ReactGridLayout, { WidthProvider, utils } from 'react-grid-layout';
3
3
  import { OVERLAY_CLASS_NAME } from '../../constants';
4
- const { compact, compactType } = utils;
5
- // pointer-events disabled to make mouse events be able to passthrought
6
- // while dragging element out of the grid the mouse positioned over grid item
7
- // so there is only two ways to get it, calculate rect or just give browser make his work
8
- const DRAGGING_PLACEHOLDER_STYLE = { pointerEvents: 'none' };
9
- // when shared element is dragged over another group we still creating placeholder for it
10
- // cause react-grid-layout is havely dependent on this element
11
- // while in future there will be some wey not to create dummy div and hide it with opacity
12
- // this hack is all what i've got now
13
- const DRAGGING_PLACEHOLDER_HIDDEN_STYLE = Object.assign(Object.assign({}, DRAGGING_PLACEHOLDER_STYLE), { opacity: 0 });
14
4
  class DragOverLayout extends ReactGridLayout {
15
5
  constructor(...args) {
16
6
  super(...args);
17
- this._isMouseOver = true;
18
- this._savedDragoutState = null;
7
+ this._savedDraggedOutLayout = null;
19
8
  // Reset placeholder when item dragged from outside
20
9
  this.resetExternalPlaceholder = () => {
21
10
  if (this.dragEnterCounter) {
@@ -29,13 +18,13 @@ class DragOverLayout extends ReactGridLayout {
29
18
  const { cols } = this.props;
30
19
  const savedLayout = layout.map((item) => (Object.assign({}, item)));
31
20
  let hiddenElement;
32
- const newLayout = compact(layout.filter((item) => {
21
+ const newLayout = utils.compact(layout.filter((item) => {
33
22
  if (item.i === i) {
34
23
  hiddenElement = item;
35
24
  return false;
36
25
  }
37
26
  return true;
38
- }), compactType(this.props), cols);
27
+ }), utils.compactType(this.props), cols);
39
28
  if (hiddenElement) {
40
29
  newLayout.push(hiddenElement);
41
30
  }
@@ -43,23 +32,23 @@ class DragOverLayout extends ReactGridLayout {
43
32
  activeDrag: null,
44
33
  layout: newLayout,
45
34
  });
46
- this.resetExternalPlaceholder();
47
- return { layout: savedLayout, id: hiddenElement.i };
35
+ return savedLayout;
48
36
  };
49
37
  this.extendedOnDrag = (i, x, y, sintEv) => {
50
- if (!this._isMouseOver) {
51
- if (!this._savedDragoutState) {
52
- this._savedDragoutState = this.hideLocalPlaceholder(i);
38
+ if (this.props.isDragCaptured) {
39
+ if (!this._savedDraggedOutLayout) {
40
+ this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
53
41
  }
54
42
  return;
55
43
  }
44
+ this._savedDraggedOutLayout = null;
56
45
  // parent onDrag will show new placeholder again
57
46
  this.parentOnDrag(i, x, y, sintEv);
58
47
  };
59
48
  this.extendedOnDragStop = (i, x, y, sintEv) => {
60
- // Restoring layout if item was dropped outside of the grid and wasn't captured
61
- if (this._savedDragoutState) {
62
- const savedLayout = this._savedDragoutState.layout;
49
+ // Restoring layout if item was dropped outside of the grid
50
+ if (this._savedDraggedOutLayout) {
51
+ const savedLayout = this._savedDraggedOutLayout;
63
52
  const l = utils.getLayoutItem(savedLayout, i);
64
53
  // Create placeholder (display only)
65
54
  const placeholder = {
@@ -76,46 +65,34 @@ class DragOverLayout extends ReactGridLayout {
76
65
  }, () => {
77
66
  this.parentOnDragStop(i, x, y, sintEv);
78
67
  });
79
- this._savedDragoutState = null;
68
+ this._savedDraggedOutLayout = null;
80
69
  }
81
70
  else {
82
71
  this.parentOnDragStop(i, x, y, sintEv);
83
72
  }
84
73
  };
85
- this.extendedOnDragEnter = (...args) => {
86
- this._isMouseOver = true;
87
- this.parentOnDragEnter(...args);
88
- };
89
- this.extendedOnDragLeave = (...args) => {
90
- var _a, _b;
91
- this._isMouseOver = false;
92
- this.parentOnDragLeave(...args);
93
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
94
- };
95
74
  // Proxy mouse events -> drag methods for dnd between groups
96
75
  this.mouseEnterHandler = (e) => {
97
- this._isMouseOver = true;
76
+ var _a, _b;
98
77
  if (this.props.hasSharedDragItem) {
99
- this.parentOnDragEnter(e);
78
+ this.onDragEnter(e);
79
+ }
80
+ else if (this.props.isDragCaptured) {
81
+ (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
100
82
  }
101
83
  };
102
84
  this.mouseLeaveHandler = (e) => {
103
- var _a, _b;
104
- this._isMouseOver = false;
105
85
  if (this.props.hasSharedDragItem) {
106
- this.parentOnDragLeave(e);
107
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
86
+ this.onDragLeave(e);
108
87
  }
109
88
  };
110
89
  this.mouseMoveHandler = (e) => {
111
- this._isMouseOver = true;
112
90
  if (this.props.hasSharedDragItem) {
113
91
  this.onDragOver(e);
114
92
  }
115
93
  };
116
94
  this.mouseUpHandler = (e) => {
117
95
  var _a, _b;
118
- this._isMouseOver = true;
119
96
  if (this.props.hasSharedDragItem) {
120
97
  e.preventDefault();
121
98
  const { droppingItem } = this.props;
@@ -130,10 +107,6 @@ class DragOverLayout extends ReactGridLayout {
130
107
  this.onDrag = this.extendedOnDrag;
131
108
  this.parentOnDragStop = this.onDragStop;
132
109
  this.onDragStop = this.extendedOnDragStop;
133
- this.parentOnDragEnter = this.onDragEnter;
134
- this.onDragEnter = this.extendedOnDragEnter;
135
- this.parentOnDragLeave = this.onDragLeave;
136
- this.onDragLeave = this.extendedOnDragLeave;
137
110
  }
138
111
  componentDidMount() {
139
112
  var _a;
@@ -158,8 +131,6 @@ class DragOverLayout extends ReactGridLayout {
158
131
  innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
159
132
  innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
160
133
  }
161
- // Resetting instance props
162
- this._savedDragoutState = null;
163
134
  }
164
135
  // react-grid-layout doens't calculate it's height when last element is removed
165
136
  // and just keeps the previous value
@@ -185,7 +156,7 @@ class DragOverLayout extends ReactGridLayout {
185
156
  // And cause grid-layout using it's own GridItem to make it look
186
157
  // like overlay adding className
187
158
  processGridItem(child, isDroppingItem) {
188
- var _a, _b, _c;
159
+ var _a;
189
160
  const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
190
161
  if (!gridItem) {
191
162
  return gridItem;
@@ -195,23 +166,15 @@ class DragOverLayout extends ReactGridLayout {
195
166
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
196
167
  const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
197
168
  const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
198
- const dragStyles = this.props.hasSharedDragItem
199
- ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
200
- : DRAGGING_PLACEHOLDER_STYLE;
169
+ const style = gridItem.props.style || null;
201
170
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
202
171
  return React.cloneElement(gridItem, {
203
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
172
+ // hiding previre if dragging shared item
173
+ style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
204
174
  className: OVERLAY_CLASS_NAME,
205
175
  droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
206
176
  });
207
177
  }
208
- else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
209
- itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
210
- const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
211
- return React.cloneElement(gridItem, {
212
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
213
- });
214
- }
215
178
  return gridItem;
216
179
  }
217
180
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.8.1-beta.1",
3
+ "version": "8.8.1-beta.3",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {