@gravity-ui/dashkit 8.17.0 → 8.17.1-beta.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.
- package/build/cjs/components/GridLayout/GridLayout.d.ts +11 -0
- package/build/cjs/components/GridLayout/GridLayout.js +54 -0
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +1 -1
- package/build/esm/components/GridLayout/GridLayout.d.ts +11 -0
- package/build/esm/components/GridLayout/GridLayout.js +54 -0
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +1 -1
- package/package.json +1 -1
|
@@ -48,6 +48,16 @@ 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
|
+
_renderRectBlock(element: any): void;
|
|
52
|
+
_rectBlocks: {
|
|
53
|
+
spacers: {
|
|
54
|
+
top: HTMLDivElement;
|
|
55
|
+
bottom: HTMLDivElement;
|
|
56
|
+
};
|
|
57
|
+
parent: any;
|
|
58
|
+
} | null | undefined;
|
|
59
|
+
_updateRectBlock(element: any): void;
|
|
60
|
+
_cleanRectBlock(): void;
|
|
51
61
|
_onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
|
|
52
62
|
_onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
53
63
|
_onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
@@ -60,6 +70,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
60
70
|
_onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
|
|
61
71
|
_onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
|
|
62
72
|
_onDropDragOver: (group: any, e: any) => any;
|
|
73
|
+
renderRectBlocks(): JSX.Element;
|
|
63
74
|
renderTemporaryPlaceholder(): JSX.Element | null;
|
|
64
75
|
renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
|
|
65
76
|
render(): any;
|
|
@@ -287,9 +287,58 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
287
287
|
}
|
|
288
288
|
this.setState({ currentDraggingElement, draggedOverGroup: group });
|
|
289
289
|
}
|
|
290
|
+
_renderRectBlock(element) {
|
|
291
|
+
const parent = element.parentElement;
|
|
292
|
+
const elementRect = element.getBoundingClientRect();
|
|
293
|
+
this._rectBlocks = {
|
|
294
|
+
spacers: {
|
|
295
|
+
top: document.createElement('div'),
|
|
296
|
+
bottom: document.createElement('div'),
|
|
297
|
+
},
|
|
298
|
+
parent,
|
|
299
|
+
};
|
|
300
|
+
Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
|
|
301
|
+
block.style.position = 'absolute';
|
|
302
|
+
block.style.width = `${elementRect.width}px`;
|
|
303
|
+
block.style.height = '1px';
|
|
304
|
+
block.style.left = '0px';
|
|
305
|
+
if (pos === 'top') {
|
|
306
|
+
block.style.top = '0px';
|
|
307
|
+
}
|
|
308
|
+
else {
|
|
309
|
+
block.style.top = `${elementRect.height - 1}px`;
|
|
310
|
+
}
|
|
311
|
+
parent.appendChild(block);
|
|
312
|
+
});
|
|
313
|
+
this._updateRectBlock(element);
|
|
314
|
+
}
|
|
315
|
+
_updateRectBlock(element) {
|
|
316
|
+
if (!this._rectBlocks) {
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
const parent = this._rectBlocks.parent;
|
|
320
|
+
const parentRect = parent.getBoundingClientRect();
|
|
321
|
+
const elementRect = element.getBoundingClientRect();
|
|
322
|
+
const left = elementRect.left - parentRect.left;
|
|
323
|
+
const top = elementRect.top - parentRect.top;
|
|
324
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
325
|
+
block.style.transform = `translate(${left}px, ${top}px)`;
|
|
326
|
+
});
|
|
327
|
+
}
|
|
328
|
+
_cleanRectBlock() {
|
|
329
|
+
if (this._rectBlocks) {
|
|
330
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
331
|
+
block.remove();
|
|
332
|
+
});
|
|
333
|
+
this._rectBlocks = null;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
290
336
|
_onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
|
|
291
337
|
var _a;
|
|
292
338
|
(_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
|
|
339
|
+
if (!this.state.currentDraggingElement) {
|
|
340
|
+
this._renderRectBlock(element);
|
|
341
|
+
}
|
|
293
342
|
if (this.context.dragOverPlugin) {
|
|
294
343
|
this.setState({ isDragging: true });
|
|
295
344
|
}
|
|
@@ -300,10 +349,12 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
300
349
|
}
|
|
301
350
|
_onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
302
351
|
var _a;
|
|
352
|
+
this._updateRectBlock(element);
|
|
303
353
|
(_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
304
354
|
}
|
|
305
355
|
_onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
306
356
|
var _a;
|
|
357
|
+
this._cleanRectBlock();
|
|
307
358
|
this._onStop(group, layout);
|
|
308
359
|
(_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
309
360
|
}
|
|
@@ -334,6 +385,9 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
334
385
|
});
|
|
335
386
|
}
|
|
336
387
|
}
|
|
388
|
+
renderRectBlocks() {
|
|
389
|
+
return react_1.default.createElement("div", { className: "test" }, "123");
|
|
390
|
+
}
|
|
337
391
|
renderTemporaryPlaceholder() {
|
|
338
392
|
const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
|
|
339
393
|
if (!temporaryLayout || !temporaryLayout.dragProps) {
|
|
@@ -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,16 @@ 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
|
+
_renderRectBlock(element: any): void;
|
|
52
|
+
_rectBlocks: {
|
|
53
|
+
spacers: {
|
|
54
|
+
top: HTMLDivElement;
|
|
55
|
+
bottom: HTMLDivElement;
|
|
56
|
+
};
|
|
57
|
+
parent: any;
|
|
58
|
+
} | null | undefined;
|
|
59
|
+
_updateRectBlock(element: any): void;
|
|
60
|
+
_cleanRectBlock(): void;
|
|
51
61
|
_onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
|
|
52
62
|
_onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
53
63
|
_onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
|
|
@@ -60,6 +70,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
60
70
|
_onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
|
|
61
71
|
_onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
|
|
62
72
|
_onDropDragOver: (group: any, e: any) => any;
|
|
73
|
+
renderRectBlocks(): JSX.Element;
|
|
63
74
|
renderTemporaryPlaceholder(): JSX.Element | null;
|
|
64
75
|
renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
|
|
65
76
|
render(): any;
|
|
@@ -284,9 +284,58 @@ class GridLayout extends React.PureComponent {
|
|
|
284
284
|
}
|
|
285
285
|
this.setState({ currentDraggingElement, draggedOverGroup: group });
|
|
286
286
|
}
|
|
287
|
+
_renderRectBlock(element) {
|
|
288
|
+
const parent = element.parentElement;
|
|
289
|
+
const elementRect = element.getBoundingClientRect();
|
|
290
|
+
this._rectBlocks = {
|
|
291
|
+
spacers: {
|
|
292
|
+
top: document.createElement('div'),
|
|
293
|
+
bottom: document.createElement('div'),
|
|
294
|
+
},
|
|
295
|
+
parent,
|
|
296
|
+
};
|
|
297
|
+
Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
|
|
298
|
+
block.style.position = 'absolute';
|
|
299
|
+
block.style.width = `${elementRect.width}px`;
|
|
300
|
+
block.style.height = '1px';
|
|
301
|
+
block.style.left = '0px';
|
|
302
|
+
if (pos === 'top') {
|
|
303
|
+
block.style.top = '0px';
|
|
304
|
+
}
|
|
305
|
+
else {
|
|
306
|
+
block.style.top = `${elementRect.height - 1}px`;
|
|
307
|
+
}
|
|
308
|
+
parent.appendChild(block);
|
|
309
|
+
});
|
|
310
|
+
this._updateRectBlock(element);
|
|
311
|
+
}
|
|
312
|
+
_updateRectBlock(element) {
|
|
313
|
+
if (!this._rectBlocks) {
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
const parent = this._rectBlocks.parent;
|
|
317
|
+
const parentRect = parent.getBoundingClientRect();
|
|
318
|
+
const elementRect = element.getBoundingClientRect();
|
|
319
|
+
const left = elementRect.left - parentRect.left;
|
|
320
|
+
const top = elementRect.top - parentRect.top;
|
|
321
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
322
|
+
block.style.transform = `translate(${left}px, ${top}px)`;
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
_cleanRectBlock() {
|
|
326
|
+
if (this._rectBlocks) {
|
|
327
|
+
Object.values(this._rectBlocks.spacers).forEach((block) => {
|
|
328
|
+
block.remove();
|
|
329
|
+
});
|
|
330
|
+
this._rectBlocks = null;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
287
333
|
_onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
|
|
288
334
|
var _a;
|
|
289
335
|
(_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
|
|
336
|
+
if (!this.state.currentDraggingElement) {
|
|
337
|
+
this._renderRectBlock(element);
|
|
338
|
+
}
|
|
290
339
|
if (this.context.dragOverPlugin) {
|
|
291
340
|
this.setState({ isDragging: true });
|
|
292
341
|
}
|
|
@@ -297,10 +346,12 @@ class GridLayout extends React.PureComponent {
|
|
|
297
346
|
}
|
|
298
347
|
_onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
299
348
|
var _a;
|
|
349
|
+
this._updateRectBlock(element);
|
|
300
350
|
(_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
301
351
|
}
|
|
302
352
|
_onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
303
353
|
var _a;
|
|
354
|
+
this._cleanRectBlock();
|
|
304
355
|
this._onStop(group, layout);
|
|
305
356
|
(_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
|
|
306
357
|
}
|
|
@@ -331,6 +382,9 @@ class GridLayout extends React.PureComponent {
|
|
|
331
382
|
});
|
|
332
383
|
}
|
|
333
384
|
}
|
|
385
|
+
renderRectBlocks() {
|
|
386
|
+
return React.createElement("div", { className: "test" }, "123");
|
|
387
|
+
}
|
|
334
388
|
renderTemporaryPlaceholder() {
|
|
335
389
|
const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
|
|
336
390
|
if (!temporaryLayout || !temporaryLayout.dragProps) {
|
|
@@ -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 & {
|