@gravity-ui/dashkit 8.12.0 → 8.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
  2. package/build/cjs/components/GridLayout/GridLayout.js +20 -13
  3. package/build/cjs/components/GridLayout/ReactGridLayout.js +12 -4
  4. package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
  5. package/build/esm/components/GridLayout/GridLayout.js +20 -13
  6. package/build/esm/components/GridLayout/ReactGridLayout.js +12 -4
  7. package/package.json +1 -1
package/build/cjs/components/GridLayout/GridLayout.d.ts CHANGED
@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
38
38
  getMemoForwardRefCallback: (refIndex: any) => any;
39
39
  mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
40
40
  reloadItems(): void;
41
- _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
41
+ _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
42
42
  _onResizeStart: () => void;
43
43
  _onTargetRestore: () => void;
44
44
  _onStop: (group: any, newLayout: any) => void;
package/build/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -94,7 +94,7 @@ class GridLayout extends react_1.default.PureComponent {
94
94
  }
95
95
  return this._memoForwardedPluginRef[refIndex];
96
96
  };
97
- this._onDragStart = (group, _newLayout, layoutItem) => {
97
+ this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
98
98
  if (this.temporaryLayout)
99
99
  return;
100
100
  if (this.context.dragOverPlugin) {
@@ -103,9 +103,15 @@ class GridLayout extends react_1.default.PureComponent {
103
103
  else {
104
104
  let currentDraggingElement = this.state.currentDraggingElement;
105
105
  if (!currentDraggingElement) {
106
- const _id = layoutItem.i;
107
- const item = this.context.config.items.find(({ id }) => id === _id);
108
- currentDraggingElement = [group, layoutItem, item];
106
+ const layoutId = layoutItem.i;
107
+ const item = this.context.config.items.find(({ id }) => id === layoutId);
108
+ const { offsetX, offsetY } = e.nativeEvent;
109
+ currentDraggingElement = {
110
+ group,
111
+ layoutItem,
112
+ item,
113
+ cursorPosition: { offsetX, offsetY },
114
+ };
109
115
  }
110
116
  this.setState({
111
117
  isDragging: true,
@@ -123,7 +129,7 @@ class GridLayout extends react_1.default.PureComponent {
123
129
  const { currentDraggingElement } = this.state;
124
130
  if (currentDraggingElement) {
125
131
  this.setState({
126
- draggedOverGroup: currentDraggingElement[0],
132
+ draggedOverGroup: currentDraggingElement.group,
127
133
  });
128
134
  }
129
135
  };
@@ -132,7 +138,7 @@ class GridLayout extends react_1.default.PureComponent {
132
138
  const { draggedOverGroup, currentDraggingElement } = this.state;
133
139
  if (currentDraggingElement &&
134
140
  draggedOverGroup !== null &&
135
- draggedOverGroup !== currentDraggingElement[0]) {
141
+ draggedOverGroup !== currentDraggingElement.group) {
136
142
  // Skipping layout update when change event called for source grid
137
143
  // and waiting _onDrop
138
144
  return;
@@ -156,15 +162,15 @@ class GridLayout extends react_1.default.PureComponent {
156
162
  if (!currentDraggingElement) {
157
163
  return;
158
164
  }
159
- const [, sourceItem] = currentDraggingElement;
165
+ const sourceLayoutItem = currentDraggingElement.layoutItem;
160
166
  const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
161
- if (item.i === sourceItem.i) {
167
+ if (item.i === sourceLayoutItem.i) {
162
168
  const copy = Object.assign({}, tempItem);
163
169
  delete copy.parent;
164
170
  if (targetGroup !== constants_1.DEFAULT_GROUP) {
165
171
  copy.parent = targetGroup;
166
172
  }
167
- copy.i = sourceItem.i;
173
+ copy.i = sourceLayoutItem.i;
168
174
  return copy;
169
175
  }
170
176
  return item;
@@ -205,7 +211,8 @@ class GridLayout extends react_1.default.PureComponent {
205
211
  }
206
212
  const { properties, layout } = this.getLayoutAndPropsByGroup(group);
207
213
  if (currentDraggingElement) {
208
- const [, { h, w, i }, { type }] = currentDraggingElement;
214
+ const { h, w, i } = currentDraggingElement.layoutItem;
215
+ const { type } = currentDraggingElement.item;
209
216
  return onDropDragOver(e, properties, layout, { h, w, i, type });
210
217
  }
211
218
  if (dragOverPlugin) {
@@ -297,12 +304,12 @@ class GridLayout extends react_1.default.PureComponent {
297
304
  compactType = 'horizontal';
298
305
  }
299
306
  const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
300
- const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
307
+ const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement.group !== group);
301
308
  const isDragCaptured = currentDraggingElement &&
302
- group === currentDraggingElement[0] &&
309
+ group === currentDraggingElement.group &&
303
310
  draggedOverGroup !== null &&
304
311
  draggedOverGroup !== group;
305
- 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
312
+ 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, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
306
313
  ? { draggableHandle: `.${draggableHandleClassName}` }
307
314
  : null), (outerDnDEnable
308
315
  ? {
package/build/cjs/components/GridLayout/ReactGridLayout.js CHANGED
@@ -170,15 +170,23 @@ class DragOverLayout extends react_grid_layout_1.default {
170
170
  const { props: itemProps } = gridItem;
171
171
  if (isDroppingItem) {
172
172
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
173
- const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
174
- const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
173
+ const { sharedDragPosition, hasSharedDragItem } = this.props;
174
+ let offsetX, offsetY;
175
+ if (sharedDragPosition) {
176
+ offsetX = sharedDragPosition.offsetX;
177
+ offsetY = sharedDragPosition.offsetY;
178
+ }
179
+ else {
180
+ offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
181
+ offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
182
+ }
175
183
  const style = gridItem.props.style || null;
176
184
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
177
185
  return react_1.default.cloneElement(gridItem, {
178
186
  // hiding previre if dragging shared item
179
- style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
187
+ style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
180
188
  className: constants_1.OVERLAY_CLASS_NAME,
181
- droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
189
+ droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
182
190
  });
183
191
  }
184
192
  return gridItem;
package/build/esm/components/GridLayout/GridLayout.d.ts CHANGED
@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
38
38
  getMemoForwardRefCallback: (refIndex: any) => any;
39
39
  mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
40
40
  reloadItems(): void;
41
- _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
41
+ _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
42
42
  _onResizeStart: () => void;
43
43
  _onTargetRestore: () => void;
44
44
  _onStop: (group: any, newLayout: any) => void;
package/build/esm/components/GridLayout/GridLayout.js CHANGED
@@ -91,7 +91,7 @@ class GridLayout extends React.PureComponent {
91
91
  }
92
92
  return this._memoForwardedPluginRef[refIndex];
93
93
  };
94
- this._onDragStart = (group, _newLayout, layoutItem) => {
94
+ this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
95
95
  if (this.temporaryLayout)
96
96
  return;
97
97
  if (this.context.dragOverPlugin) {
@@ -100,9 +100,15 @@ class GridLayout extends React.PureComponent {
100
100
  else {
101
101
  let currentDraggingElement = this.state.currentDraggingElement;
102
102
  if (!currentDraggingElement) {
103
- const _id = layoutItem.i;
104
- const item = this.context.config.items.find(({ id }) => id === _id);
105
- currentDraggingElement = [group, layoutItem, item];
103
+ const layoutId = layoutItem.i;
104
+ const item = this.context.config.items.find(({ id }) => id === layoutId);
105
+ const { offsetX, offsetY } = e.nativeEvent;
106
+ currentDraggingElement = {
107
+ group,
108
+ layoutItem,
109
+ item,
110
+ cursorPosition: { offsetX, offsetY },
111
+ };
106
112
  }
107
113
  this.setState({
108
114
  isDragging: true,
@@ -120,7 +126,7 @@ class GridLayout extends React.PureComponent {
120
126
  const { currentDraggingElement } = this.state;
121
127
  if (currentDraggingElement) {
122
128
  this.setState({
123
- draggedOverGroup: currentDraggingElement[0],
129
+ draggedOverGroup: currentDraggingElement.group,
124
130
  });
125
131
  }
126
132
  };
@@ -129,7 +135,7 @@ class GridLayout extends React.PureComponent {
129
135
  const { draggedOverGroup, currentDraggingElement } = this.state;
130
136
  if (currentDraggingElement &&
131
137
  draggedOverGroup !== null &&
132
- draggedOverGroup !== currentDraggingElement[0]) {
138
+ draggedOverGroup !== currentDraggingElement.group) {
133
139
  // Skipping layout update when change event called for source grid
134
140
  // and waiting _onDrop
135
141
  return;
@@ -153,15 +159,15 @@ class GridLayout extends React.PureComponent {
153
159
  if (!currentDraggingElement) {
154
160
  return;
155
161
  }
156
- const [, sourceItem] = currentDraggingElement;
162
+ const sourceLayoutItem = currentDraggingElement.layoutItem;
157
163
  const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
158
- if (item.i === sourceItem.i) {
164
+ if (item.i === sourceLayoutItem.i) {
159
165
  const copy = Object.assign({}, tempItem);
160
166
  delete copy.parent;
161
167
  if (targetGroup !== DEFAULT_GROUP) {
162
168
  copy.parent = targetGroup;
163
169
  }
164
- copy.i = sourceItem.i;
170
+ copy.i = sourceLayoutItem.i;
165
171
  return copy;
166
172
  }
167
173
  return item;
@@ -202,7 +208,8 @@ class GridLayout extends React.PureComponent {
202
208
  }
203
209
  const { properties, layout } = this.getLayoutAndPropsByGroup(group);
204
210
  if (currentDraggingElement) {
205
- const [, { h, w, i }, { type }] = currentDraggingElement;
211
+ const { h, w, i } = currentDraggingElement.layoutItem;
212
+ const { type } = currentDraggingElement.item;
206
213
  return onDropDragOver(e, properties, layout, { h, w, i, type });
207
214
  }
208
215
  if (dragOverPlugin) {
@@ -294,12 +301,12 @@ class GridLayout extends React.PureComponent {
294
301
  compactType = 'horizontal';
295
302
  }
296
303
  const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
297
- const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
304
+ const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement.group !== group);
298
305
  const isDragCaptured = currentDraggingElement &&
299
- group === currentDraggingElement[0] &&
306
+ group === currentDraggingElement.group &&
300
307
  draggedOverGroup !== null &&
301
308
  draggedOverGroup !== group;
302
- 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
309
+ 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, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
303
310
  ? { draggableHandle: `.${draggableHandleClassName}` }
304
311
  : null), (outerDnDEnable
305
312
  ? {
package/build/esm/components/GridLayout/ReactGridLayout.js CHANGED
@@ -166,15 +166,23 @@ class DragOverLayout extends ReactGridLayout {
166
166
  const { props: itemProps } = gridItem;
167
167
  if (isDroppingItem) {
168
168
  const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
169
- const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
170
- const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
169
+ const { sharedDragPosition, hasSharedDragItem } = this.props;
170
+ let offsetX, offsetY;
171
+ if (sharedDragPosition) {
172
+ offsetX = sharedDragPosition.offsetX;
173
+ offsetY = sharedDragPosition.offsetY;
174
+ }
175
+ else {
176
+ offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
177
+ offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
178
+ }
171
179
  const style = gridItem.props.style || null;
172
180
  // React.cloneElement is just cleaner then copy-paste whole processGridItem method
173
181
  return React.cloneElement(gridItem, {
174
182
  // hiding previre if dragging shared item
175
- style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
183
+ style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
176
184
  className: OVERLAY_CLASS_NAME,
177
- droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
185
+ droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
178
186
  });
179
187
  }
180
188
  return gridItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.12.0",
3
+ "version": "8.12.1",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {