@gravity-ui/dashkit 8.17.0 → 8.17.1-beta.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.
- package/build/cjs/components/GridLayout/GridLayout.d.ts +12 -0
- package/build/cjs/components/GridLayout/GridLayout.js +65 -0
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +1 -1
- package/build/esm/components/GridLayout/GridLayout.d.ts +12 -0
- package/build/esm/components/GridLayout/GridLayout.js +65 -0
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +1 -1
- package/package.json +1 -1
|
@@ -48,6 +48,18 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
48
48
|
element: any;
|
|
49
49
|
};
|
|
50
50
|
updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
|
|
51
|
+
_rectInterscectionObserver: (entries: any) => void;
|
|
52
|
+
_renderRectBlock(element: any): void;
|
|
53
|
+
_rectBlocks: {
|
|
54
|
+
spacers: {
|
|
55
|
+
top: HTMLDivElement;
|
|
56
|
+
bottom: HTMLDivElement;
|
|
57
|
+
};
|
|
58
|
+
parent: any;
|
|
59
|
+
scrollObserver: IntersectionObserver;
|
|
60
|
+
} | null | undefined;
|
|
61
|
+
_updateRectBlock(element: any): void;
|
|
62
|
+
_cleanRectBlock(): void;
|
|
51
63
|
_onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
|
|
52
64
|
_onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
53
65
|
_onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
@@ -57,6 +57,14 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
57
57
|
}
|
|
58
58
|
return this._memoForwardedPluginRef[refIndex];
|
|
59
59
|
};
|
|
60
|
+
this._rectInterscectionObserver = (entries) => {
|
|
61
|
+
entries.forEach((entry) => {
|
|
62
|
+
const { intersectionRatio } = entry;
|
|
63
|
+
if (intersectionRatio === 0) {
|
|
64
|
+
entry.target.scrollIntoView();
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
};
|
|
60
68
|
this._onStop = (group, newLayout) => {
|
|
61
69
|
const { layoutChange, onDrop, temporaryLayout } = this.context;
|
|
62
70
|
const { draggedOverGroup, currentDraggingElement } = this.state;
|
|
@@ -287,9 +295,64 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
287
295
|
}
|
|
288
296
|
this.setState({ currentDraggingElement, draggedOverGroup: group });
|
|
289
297
|
}
|
|
298
|
+
_renderRectBlock(element) {
|
|
299
|
+
const parent = element.parentElement;
|
|
300
|
+
const elementRect = element.getBoundingClientRect();
|
|
301
|
+
this._rectBlocks = {
|
|
302
|
+
spacers: {
|
|
303
|
+
top: document.createElement('div'),
|
|
304
|
+
bottom: document.createElement('div'),
|
|
305
|
+
},
|
|
306
|
+
parent,
|
|
307
|
+
scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
|
|
308
|
+
rootMargin: '0px',
|
|
309
|
+
threshold: 0,
|
|
310
|
+
}),
|
|
311
|
+
};
|
|
312
|
+
Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
|
|
313
|
+
block.style.position = 'absolute';
|
|
314
|
+
block.style.width = `${elementRect.width}px`;
|
|
315
|
+
block.style.height = '1px';
|
|
316
|
+
block.style.left = '0px';
|
|
317
|
+
if (pos === 'top') {
|
|
318
|
+
block.style.top = '0px';
|
|
319
|
+
}
|
|
320
|
+
else {
|
|
321
|
+
block.style.top = `${elementRect.height - 1}px`;
|
|
322
|
+
}
|
|
323
|
+
parent.appendChild(block);
|
|
324
|
+
this._rectBlocks.scrollObserver.observe(block);
|
|
325
|
+
});
|
|
326
|
+
this._updateRectBlock(element);
|
|
327
|
+
}
|
|
328
|
+
_updateRectBlock(element) {
|
|
329
|
+
if (!this._rectBlocks) {
|
|
330
|
+
return;
|
|
331
|
+
}
|
|
332
|
+
const parent = this._rectBlocks.parent;
|
|
333
|
+
const parentRect = parent.getBoundingClientRect();
|
|
334
|
+
const elementRect = element.getBoundingClientRect();
|
|
335
|
+
const left = elementRect.left - parentRect.left;
|
|
336
|
+
const top = elementRect.top - parentRect.top;
|
|
337
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
338
|
+
block.style.transform = `translate(${left}px, ${top}px)`;
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
_cleanRectBlock() {
|
|
342
|
+
if (this._rectBlocks) {
|
|
343
|
+
this._rectBlocks.scrollObserver.disconnect();
|
|
344
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
345
|
+
block.remove();
|
|
346
|
+
});
|
|
347
|
+
this._rectBlocks = null;
|
|
348
|
+
}
|
|
349
|
+
}
|
|
290
350
|
_onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
|
|
291
351
|
var _a;
|
|
292
352
|
(_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
|
|
353
|
+
if (!this.state.currentDraggingElement) {
|
|
354
|
+
this._renderRectBlock(element);
|
|
355
|
+
}
|
|
293
356
|
if (this.context.dragOverPlugin) {
|
|
294
357
|
this.setState({ isDragging: true });
|
|
295
358
|
}
|
|
@@ -300,10 +363,12 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
300
363
|
}
|
|
301
364
|
_onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
302
365
|
var _a;
|
|
366
|
+
this._updateRectBlock(element);
|
|
303
367
|
(_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
304
368
|
}
|
|
305
369
|
_onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
306
370
|
var _a;
|
|
371
|
+
this._cleanRectBlock();
|
|
307
372
|
this._onStop(group, layout);
|
|
308
373
|
(_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
309
374
|
}
|
|
@@ -44,7 +44,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
|
|
|
44
44
|
w: number;
|
|
45
45
|
h: number;
|
|
46
46
|
};
|
|
47
|
-
targetId
|
|
47
|
+
targetId?: string;
|
|
48
48
|
targetInnerId?: string;
|
|
49
49
|
};
|
|
50
50
|
export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
|
|
@@ -48,6 +48,18 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
48
48
|
element: any;
|
|
49
49
|
};
|
|
50
50
|
updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
|
|
51
|
+
_rectInterscectionObserver: (entries: any) => void;
|
|
52
|
+
_renderRectBlock(element: any): void;
|
|
53
|
+
_rectBlocks: {
|
|
54
|
+
spacers: {
|
|
55
|
+
top: HTMLDivElement;
|
|
56
|
+
bottom: HTMLDivElement;
|
|
57
|
+
};
|
|
58
|
+
parent: any;
|
|
59
|
+
scrollObserver: IntersectionObserver;
|
|
60
|
+
} | null | undefined;
|
|
61
|
+
_updateRectBlock(element: any): void;
|
|
62
|
+
_cleanRectBlock(): void;
|
|
51
63
|
_onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
|
|
52
64
|
_onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
53
65
|
_onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
@@ -54,6 +54,14 @@ class GridLayout extends React.PureComponent {
|
|
|
54
54
|
}
|
|
55
55
|
return this._memoForwardedPluginRef[refIndex];
|
|
56
56
|
};
|
|
57
|
+
this._rectInterscectionObserver = (entries) => {
|
|
58
|
+
entries.forEach((entry) => {
|
|
59
|
+
const { intersectionRatio } = entry;
|
|
60
|
+
if (intersectionRatio === 0) {
|
|
61
|
+
entry.target.scrollIntoView();
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
};
|
|
57
65
|
this._onStop = (group, newLayout) => {
|
|
58
66
|
const { layoutChange, onDrop, temporaryLayout } = this.context;
|
|
59
67
|
const { draggedOverGroup, currentDraggingElement } = this.state;
|
|
@@ -284,9 +292,64 @@ class GridLayout extends React.PureComponent {
|
|
|
284
292
|
}
|
|
285
293
|
this.setState({ currentDraggingElement, draggedOverGroup: group });
|
|
286
294
|
}
|
|
295
|
+
_renderRectBlock(element) {
|
|
296
|
+
const parent = element.parentElement;
|
|
297
|
+
const elementRect = element.getBoundingClientRect();
|
|
298
|
+
this._rectBlocks = {
|
|
299
|
+
spacers: {
|
|
300
|
+
top: document.createElement('div'),
|
|
301
|
+
bottom: document.createElement('div'),
|
|
302
|
+
},
|
|
303
|
+
parent,
|
|
304
|
+
scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
|
|
305
|
+
rootMargin: '0px',
|
|
306
|
+
threshold: 0,
|
|
307
|
+
}),
|
|
308
|
+
};
|
|
309
|
+
Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
|
|
310
|
+
block.style.position = 'absolute';
|
|
311
|
+
block.style.width = `${elementRect.width}px`;
|
|
312
|
+
block.style.height = '1px';
|
|
313
|
+
block.style.left = '0px';
|
|
314
|
+
if (pos === 'top') {
|
|
315
|
+
block.style.top = '0px';
|
|
316
|
+
}
|
|
317
|
+
else {
|
|
318
|
+
block.style.top = `${elementRect.height - 1}px`;
|
|
319
|
+
}
|
|
320
|
+
parent.appendChild(block);
|
|
321
|
+
this._rectBlocks.scrollObserver.observe(block);
|
|
322
|
+
});
|
|
323
|
+
this._updateRectBlock(element);
|
|
324
|
+
}
|
|
325
|
+
_updateRectBlock(element) {
|
|
326
|
+
if (!this._rectBlocks) {
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
const parent = this._rectBlocks.parent;
|
|
330
|
+
const parentRect = parent.getBoundingClientRect();
|
|
331
|
+
const elementRect = element.getBoundingClientRect();
|
|
332
|
+
const left = elementRect.left - parentRect.left;
|
|
333
|
+
const top = elementRect.top - parentRect.top;
|
|
334
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
335
|
+
block.style.transform = `translate(${left}px, ${top}px)`;
|
|
336
|
+
});
|
|
337
|
+
}
|
|
338
|
+
_cleanRectBlock() {
|
|
339
|
+
if (this._rectBlocks) {
|
|
340
|
+
this._rectBlocks.scrollObserver.disconnect();
|
|
341
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
342
|
+
block.remove();
|
|
343
|
+
});
|
|
344
|
+
this._rectBlocks = null;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
287
347
|
_onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
|
|
288
348
|
var _a;
|
|
289
349
|
(_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
|
|
350
|
+
if (!this.state.currentDraggingElement) {
|
|
351
|
+
this._renderRectBlock(element);
|
|
352
|
+
}
|
|
290
353
|
if (this.context.dragOverPlugin) {
|
|
291
354
|
this.setState({ isDragging: true });
|
|
292
355
|
}
|
|
@@ -297,10 +360,12 @@ class GridLayout extends React.PureComponent {
|
|
|
297
360
|
}
|
|
298
361
|
_onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
299
362
|
var _a;
|
|
363
|
+
this._updateRectBlock(element);
|
|
300
364
|
(_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
301
365
|
}
|
|
302
366
|
_onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
303
367
|
var _a;
|
|
368
|
+
this._cleanRectBlock();
|
|
304
369
|
this._onStop(group, layout);
|
|
305
370
|
(_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
306
371
|
}
|
|
@@ -45,7 +45,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
|
|
|
45
45
|
w: number;
|
|
46
46
|
h: number;
|
|
47
47
|
};
|
|
48
|
-
targetId
|
|
48
|
+
targetId?: string;
|
|
49
49
|
targetInnerId?: string;
|
|
50
50
|
};
|
|
51
51
|
export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
|