@gravity-ui/dashkit 8.8.1-beta.2 → 8.8.1-beta.4

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 -58
  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 -58
  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,24 +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
  }
60
- this._savedDragoutState = null;
48
+ this._savedDraggedOutLayout = null;
61
49
  // parent onDrag will show new placeholder again
62
50
  this.parentOnDrag(i, x, y, sintEv);
63
51
  };
64
52
  this.extendedOnDragStop = (i, x, y, sintEv) => {
65
53
  // Restoring layout if item was dropped outside of the grid
66
- if (this._savedDragoutState) {
67
- const savedLayout = this._savedDragoutState.layout;
54
+ if (this._savedDraggedOutLayout) {
55
+ const savedLayout = this._savedDraggedOutLayout;
68
56
  const l = react_grid_layout_1.utils.getLayoutItem(savedLayout, i);
69
57
  // Create placeholder (display only)
70
58
  const placeholder = {
@@ -81,46 +69,36 @@ class DragOverLayout extends react_grid_layout_1.default {
81
69
  }, () => {
82
70
  this.parentOnDragStop(i, x, y, sintEv);
83
71
  });
84
- this._savedDragoutState = null;
72
+ this._savedDraggedOutLayout = null;
85
73
  }
86
74
  else {
87
75
  this.parentOnDragStop(i, x, y, sintEv);
88
76
  }
89
77
  };
90
- this.extendedOnDragEnter = (...args) => {
91
- this._isMouseOver = true;
92
- this.parentOnDragEnter(...args);
93
- };
94
- this.extendedOnDragLeave = (...args) => {
95
- var _a, _b;
96
- this._isMouseOver = false;
97
- this.parentOnDragLeave(...args);
98
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
99
- };
100
78
  // Proxy mouse events -> drag methods for dnd between groups
101
79
  this.mouseEnterHandler = (e) => {
102
- this._isMouseOver = true;
80
+ var _a, _b;
103
81
  if (this.props.hasSharedDragItem) {
104
- 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);
105
86
  }
106
87
  };
107
88
  this.mouseLeaveHandler = (e) => {
108
89
  var _a, _b;
109
- this._isMouseOver = false;
110
90
  if (this.props.hasSharedDragItem) {
111
- this.parentOnDragLeave(e);
112
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
91
+ this.onDragLeave(e);
92
+ (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
113
93
  }
114
94
  };
115
95
  this.mouseMoveHandler = (e) => {
116
- this._isMouseOver = true;
117
96
  if (this.props.hasSharedDragItem) {
118
97
  this.onDragOver(e);
119
98
  }
120
99
  };
121
100
  this.mouseUpHandler = (e) => {
122
101
  var _a, _b;
123
- this._isMouseOver = true;
124
102
  if (this.props.hasSharedDragItem) {
125
103
  e.preventDefault();
126
104
  const { droppingItem } = this.props;
@@ -135,10 +113,6 @@ class DragOverLayout extends react_grid_layout_1.default {
135
113
  this.onDrag = this.extendedOnDrag;
136
114
  this.parentOnDragStop = this.onDragStop;
137
115
  this.onDragStop = this.extendedOnDragStop;
138
- this.parentOnDragEnter = this.onDragEnter;
139
- this.onDragEnter = this.extendedOnDragEnter;
140
- this.parentOnDragLeave = this.onDragLeave;
141
- this.onDragLeave = this.extendedOnDragLeave;
142
116
  }
143
117
  componentDidMount() {
144
118
  var _a;
@@ -163,8 +137,6 @@ class DragOverLayout extends react_grid_layout_1.default {
163
137
  innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
164
138
  innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
165
139
  }
166
- // Resetting instance props
167
- this._savedDragoutState = null;
168
140
  }
169
141
  // react-grid-layout doens't calculate it's height when last element is removed
170
142
  // and just keeps the previous value
@@ -190,7 +162,7 @@ class DragOverLayout extends react_grid_layout_1.default {
190
162
  // And cause grid-layout using it's own GridItem to make it look
191
163
  // like overlay adding className
192
164
  processGridItem(child, isDroppingItem) {
193
- var _a, _b, _c;
165
+ var _a;
194
166
  const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
195
167
  if (!gridItem) {
196
168
  return gridItem;
@@ -200,23 +172,15 @@ class DragOverLayout extends react_grid_layout_1.default {
200
172
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
201
173
  const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
202
174
  const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
203
- const dragStyles = this.props.hasSharedDragItem
204
- ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
205
- : DRAGGING_PLACEHOLDER_STYLE;
175
+ const style = gridItem.props.style || null;
206
176
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
207
177
  return react_1.default.cloneElement(gridItem, {
208
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
178
+ // hiding previre if dragging shared item
179
+ style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
209
180
  className: constants_1.OVERLAY_CLASS_NAME,
210
181
  droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
211
182
  });
212
183
  }
213
- else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
214
- itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
215
- const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
216
- return react_1.default.cloneElement(gridItem, {
217
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
218
- });
219
- }
220
184
  return gridItem;
221
185
  }
222
186
  }
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,24 +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
  }
56
- this._savedDragoutState = null;
44
+ this._savedDraggedOutLayout = null;
57
45
  // parent onDrag will show new placeholder again
58
46
  this.parentOnDrag(i, x, y, sintEv);
59
47
  };
60
48
  this.extendedOnDragStop = (i, x, y, sintEv) => {
61
49
  // Restoring layout if item was dropped outside of the grid
62
- if (this._savedDragoutState) {
63
- const savedLayout = this._savedDragoutState.layout;
50
+ if (this._savedDraggedOutLayout) {
51
+ const savedLayout = this._savedDraggedOutLayout;
64
52
  const l = utils.getLayoutItem(savedLayout, i);
65
53
  // Create placeholder (display only)
66
54
  const placeholder = {
@@ -77,46 +65,36 @@ class DragOverLayout extends ReactGridLayout {
77
65
  }, () => {
78
66
  this.parentOnDragStop(i, x, y, sintEv);
79
67
  });
80
- this._savedDragoutState = null;
68
+ this._savedDraggedOutLayout = null;
81
69
  }
82
70
  else {
83
71
  this.parentOnDragStop(i, x, y, sintEv);
84
72
  }
85
73
  };
86
- this.extendedOnDragEnter = (...args) => {
87
- this._isMouseOver = true;
88
- this.parentOnDragEnter(...args);
89
- };
90
- this.extendedOnDragLeave = (...args) => {
91
- var _a, _b;
92
- this._isMouseOver = false;
93
- this.parentOnDragLeave(...args);
94
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
95
- };
96
74
  // Proxy mouse events -> drag methods for dnd between groups
97
75
  this.mouseEnterHandler = (e) => {
98
- this._isMouseOver = true;
76
+ var _a, _b;
99
77
  if (this.props.hasSharedDragItem) {
100
- 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);
101
82
  }
102
83
  };
103
84
  this.mouseLeaveHandler = (e) => {
104
85
  var _a, _b;
105
- this._isMouseOver = false;
106
86
  if (this.props.hasSharedDragItem) {
107
- this.parentOnDragLeave(e);
108
- (_b = (_a = this.props).onDragExit) === null || _b === void 0 ? void 0 : _b.call(_a);
87
+ this.onDragLeave(e);
88
+ (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
109
89
  }
110
90
  };
111
91
  this.mouseMoveHandler = (e) => {
112
- this._isMouseOver = true;
113
92
  if (this.props.hasSharedDragItem) {
114
93
  this.onDragOver(e);
115
94
  }
116
95
  };
117
96
  this.mouseUpHandler = (e) => {
118
97
  var _a, _b;
119
- this._isMouseOver = true;
120
98
  if (this.props.hasSharedDragItem) {
121
99
  e.preventDefault();
122
100
  const { droppingItem } = this.props;
@@ -131,10 +109,6 @@ class DragOverLayout extends ReactGridLayout {
131
109
  this.onDrag = this.extendedOnDrag;
132
110
  this.parentOnDragStop = this.onDragStop;
133
111
  this.onDragStop = this.extendedOnDragStop;
134
- this.parentOnDragEnter = this.onDragEnter;
135
- this.onDragEnter = this.extendedOnDragEnter;
136
- this.parentOnDragLeave = this.onDragLeave;
137
- this.onDragLeave = this.extendedOnDragLeave;
138
112
  }
139
113
  componentDidMount() {
140
114
  var _a;
@@ -159,8 +133,6 @@ class DragOverLayout extends ReactGridLayout {
159
133
  innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
160
134
  innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
161
135
  }
162
- // Resetting instance props
163
- this._savedDragoutState = null;
164
136
  }
165
137
  // react-grid-layout doens't calculate it's height when last element is removed
166
138
  // and just keeps the previous value
@@ -186,7 +158,7 @@ class DragOverLayout extends ReactGridLayout {
186
158
  // And cause grid-layout using it's own GridItem to make it look
187
159
  // like overlay adding className
188
160
  processGridItem(child, isDroppingItem) {
189
- var _a, _b, _c;
161
+ var _a;
190
162
  const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
191
163
  if (!gridItem) {
192
164
  return gridItem;
@@ -196,23 +168,15 @@ class DragOverLayout extends ReactGridLayout {
196
168
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
197
169
  const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
198
170
  const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
199
- const dragStyles = this.props.hasSharedDragItem
200
- ? DRAGGING_PLACEHOLDER_HIDDEN_STYLE
201
- : DRAGGING_PLACEHOLDER_STYLE;
171
+ const style = gridItem.props.style || null;
202
172
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
203
173
  return React.cloneElement(gridItem, {
204
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
174
+ // hiding previre if dragging shared item
175
+ style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
205
176
  className: OVERLAY_CLASS_NAME,
206
177
  droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
207
178
  });
208
179
  }
209
- else if (itemProps.i === ((_b = this.state.activeDrag) === null || _b === void 0 ? void 0 : _b.i) ||
210
- itemProps.i === ((_c = this._savedDragoutState) === null || _c === void 0 ? void 0 : _c.id)) {
211
- const dragStyles = DRAGGING_PLACEHOLDER_STYLE;
212
- return React.cloneElement(gridItem, {
213
- style: itemProps.style ? Object.assign(Object.assign({}, itemProps.style), dragStyles) : dragStyles,
214
- });
215
- }
216
180
  return gridItem;
217
181
  }
218
182
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.8.1-beta.2",
3
+ "version": "8.8.1-beta.4",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {