@gravity-ui/dashkit 8.12.0 → 8.13.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 (15) hide show
  1. package/build/cjs/components/DashKit/DashKit.d.ts +5 -1
  2. package/build/cjs/components/DashKit/DashKit.js +6 -2
  3. package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
  4. package/build/cjs/components/GridLayout/GridLayout.js +20 -13
  5. package/build/cjs/components/GridLayout/ReactGridLayout.js +12 -4
  6. package/build/cjs/utils/update-manager.d.ts +5 -1
  7. package/build/cjs/utils/update-manager.js +14 -4
  8. package/build/esm/components/DashKit/DashKit.d.ts +5 -1
  9. package/build/esm/components/DashKit/DashKit.js +6 -2
  10. package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
  11. package/build/esm/components/GridLayout/GridLayout.js +20 -13
  12. package/build/esm/components/GridLayout/ReactGridLayout.js +12 -4
  13. package/build/esm/utils/update-manager.d.ts +5 -1
  14. package/build/esm/utils/update-manager.js +14 -4
  15. package/package.json +1 -1
package/build/cjs/components/DashKit/DashKit.d.ts CHANGED
@@ -54,7 +54,11 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
54
54
  config: Config;
55
55
  itemsStateAndParams: ItemsStateAndParams;
56
56
  };
57
- static reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], groups?: DashKitGroup[]): ConfigLayout[];
57
+ static reflowLayout({ newLayoutItem, layout, groups, }: {
58
+ newLayoutItem?: ConfigLayout;
59
+ layout: ConfigLayout[];
60
+ groups?: DashKitGroup[];
61
+ }): ConfigLayout[];
58
62
  metaRef: React.RefObject<GridLayout>;
59
63
  render(): JSX.Element;
60
64
  getItemsMeta(): any;
package/build/cjs/components/DashKit/DashKit.js CHANGED
@@ -66,8 +66,12 @@ class DashKit extends react_1.default.PureComponent {
66
66
  static removeItem({ id, config, itemsStateAndParams, }) {
67
67
  return utils_1.UpdateManager.removeItem({ id, config, itemsStateAndParams });
68
68
  }
69
- static reflowLayout(newLayoutItem, layout, groups) {
70
- return (0, utils_1.reflowLayout)(newLayoutItem, layout, getReflowGroupsConfig(groups));
69
+ static reflowLayout({ newLayoutItem, layout, groups, }) {
70
+ return (0, utils_1.reflowLayout)({
71
+ newLayoutItem,
72
+ layout,
73
+ reflowLayoutOptions: getReflowGroupsConfig(groups),
74
+ });
71
75
  }
72
76
  render() {
73
77
  return react_1.default.createElement(DashKitView_1.default, Object.assign({ registerManager: registerManager, ref: this.metaRef }, this.props));
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/cjs/utils/update-manager.d.ts CHANGED
@@ -21,7 +21,11 @@ export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsSt
21
21
  }) => {
22
22
  [x: string]: string | string[];
23
23
  };
24
- export declare function reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], reflowLayoutOptions: ReflowLayoutOptions): ConfigLayout[];
24
+ export declare function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }: {
25
+ newLayoutItem?: ConfigLayout;
26
+ layout: ConfigLayout[];
27
+ reflowLayoutOptions: ReflowLayoutOptions;
28
+ }): ConfigLayout[];
25
29
  export declare class UpdateManager {
26
30
  static addItem({ item, namespace, layout, config, options, }: {
27
31
  item: AddConfigItem;
package/build/cjs/utils/update-manager.js CHANGED
@@ -227,7 +227,7 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
227
227
  };
228
228
  return (0, immutability_helper_1.default)(itemsStateAndParams, obj);
229
229
  }
230
- function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
230
+ function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }) {
231
231
  const byGroup = {};
232
232
  const reducer = (memo, item, i, _items, isNewItem) => {
233
233
  memo[item.i] = i;
@@ -246,7 +246,9 @@ function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
246
246
  return memo;
247
247
  };
248
248
  const orderById = layout.reduce(reducer, {});
249
- reducer(orderById, newLayoutItem, layout.length, layout, true);
249
+ if (newLayoutItem) {
250
+ reducer(orderById, newLayoutItem, layout.length, layout, true);
251
+ }
250
252
  const { defaultProps } = reflowLayoutOptions;
251
253
  return Object.entries(byGroup)
252
254
  .reduce((memo, [groupId, layoutItems]) => {
@@ -287,7 +289,11 @@ class UpdateManager {
287
289
  let newLayout;
288
290
  const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
289
291
  if (options.reflowLayoutOptions) {
290
- newLayout = reflowLayout(newLayoutItem, config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))), options.reflowLayoutOptions);
292
+ newLayout = reflowLayout({
293
+ newLayoutItem,
294
+ layout: config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
295
+ reflowLayoutOptions: options.reflowLayoutOptions,
296
+ });
291
297
  }
292
298
  else {
293
299
  newLayout = [
@@ -305,7 +311,11 @@ class UpdateManager {
305
311
  let newLayout;
306
312
  const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
307
313
  if (options.reflowLayoutOptions) {
308
- newLayout = reflowLayout(newLayoutItem, config.layout, options.reflowLayoutOptions);
314
+ newLayout = reflowLayout({
315
+ newLayoutItem,
316
+ layout: config.layout,
317
+ reflowLayoutOptions: options.reflowLayoutOptions,
318
+ });
309
319
  }
310
320
  else {
311
321
  newLayout = [...config.layout, newLayoutItem];
package/build/esm/components/DashKit/DashKit.d.ts CHANGED
@@ -54,7 +54,11 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
54
54
  config: Config;
55
55
  itemsStateAndParams: ItemsStateAndParams;
56
56
  };
57
- static reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], groups?: DashKitGroup[]): ConfigLayout[];
57
+ static reflowLayout({ newLayoutItem, layout, groups, }: {
58
+ newLayoutItem?: ConfigLayout;
59
+ layout: ConfigLayout[];
60
+ groups?: DashKitGroup[];
61
+ }): ConfigLayout[];
58
62
  metaRef: React.RefObject<GridLayout>;
59
63
  render(): JSX.Element;
60
64
  getItemsMeta(): any;
package/build/esm/components/DashKit/DashKit.js CHANGED
@@ -62,8 +62,12 @@ export class DashKit extends React.PureComponent {
62
62
  static removeItem({ id, config, itemsStateAndParams, }) {
63
63
  return UpdateManager.removeItem({ id, config, itemsStateAndParams });
64
64
  }
65
- static reflowLayout(newLayoutItem, layout, groups) {
66
- return reflowLayout(newLayoutItem, layout, getReflowGroupsConfig(groups));
65
+ static reflowLayout({ newLayoutItem, layout, groups, }) {
66
+ return reflowLayout({
67
+ newLayoutItem,
68
+ layout,
69
+ reflowLayoutOptions: getReflowGroupsConfig(groups),
70
+ });
67
71
  }
68
72
  render() {
69
73
  return React.createElement(DashKitView, Object.assign({ registerManager: registerManager, ref: this.metaRef }, this.props));
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/build/esm/utils/update-manager.d.ts CHANGED
@@ -21,7 +21,11 @@ export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsSt
21
21
  }) => {
22
22
  [x: string]: string | string[];
23
23
  };
24
- export declare function reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], reflowLayoutOptions: ReflowLayoutOptions): ConfigLayout[];
24
+ export declare function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }: {
25
+ newLayoutItem?: ConfigLayout;
26
+ layout: ConfigLayout[];
27
+ reflowLayoutOptions: ReflowLayoutOptions;
28
+ }): ConfigLayout[];
25
29
  export declare class UpdateManager {
26
30
  static addItem({ item, namespace, layout, config, options, }: {
27
31
  item: AddConfigItem;
package/build/esm/utils/update-manager.js CHANGED
@@ -222,7 +222,7 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
222
222
  };
223
223
  return update(itemsStateAndParams, obj);
224
224
  }
225
- export function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
225
+ export function reflowLayout({ newLayoutItem, layout, reflowLayoutOptions, }) {
226
226
  const byGroup = {};
227
227
  const reducer = (memo, item, i, _items, isNewItem) => {
228
228
  memo[item.i] = i;
@@ -241,7 +241,9 @@ export function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
241
241
  return memo;
242
242
  };
243
243
  const orderById = layout.reduce(reducer, {});
244
- reducer(orderById, newLayoutItem, layout.length, layout, true);
244
+ if (newLayoutItem) {
245
+ reducer(orderById, newLayoutItem, layout.length, layout, true);
246
+ }
245
247
  const { defaultProps } = reflowLayoutOptions;
246
248
  return Object.entries(byGroup)
247
249
  .reduce((memo, [groupId, layoutItems]) => {
@@ -281,7 +283,11 @@ export class UpdateManager {
281
283
  let newLayout;
282
284
  const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
283
285
  if (options.reflowLayoutOptions) {
284
- newLayout = reflowLayout(newLayoutItem, config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))), options.reflowLayoutOptions);
286
+ newLayout = reflowLayout({
287
+ newLayoutItem,
288
+ layout: config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
289
+ reflowLayoutOptions: options.reflowLayoutOptions,
290
+ });
285
291
  }
286
292
  else {
287
293
  newLayout = [
@@ -299,7 +305,11 @@ export class UpdateManager {
299
305
  let newLayout;
300
306
  const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
301
307
  if (options.reflowLayoutOptions) {
302
- newLayout = reflowLayout(newLayoutItem, config.layout, options.reflowLayoutOptions);
308
+ newLayout = reflowLayout({
309
+ newLayoutItem,
310
+ layout: config.layout,
311
+ reflowLayoutOptions: options.reflowLayoutOptions,
312
+ });
303
313
  }
304
314
  else {
305
315
  newLayout = [...config.layout, newLayoutItem];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.12.0",
3
+ "version": "8.13.0",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {