@gravity-ui/dashkit 8.17.1-beta.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.
Files changed (5) hide show
  1. package/build/cjs/components/GridLayout/GridLayout.d.ts +2 -1
  2. package/build/cjs/components/GridLayout/GridLayout.js +14 -3
  3. package/build/esm/components/GridLayout/GridLayout.d.ts +2 -1
  4. package/build/esm/components/GridLayout/GridLayout.js +14 -3
  5. package/package.json +1 -1
package/build/cjs/components/GridLayout/GridLayout.d.ts CHANGED
@@ -48,6 +48,7 @@ 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;
51
52
  _renderRectBlock(element: any): void;
52
53
  _rectBlocks: {
53
54
  spacers: {
@@ -55,6 +56,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
55
56
  bottom: HTMLDivElement;
56
57
  };
57
58
  parent: any;
59
+ scrollObserver: IntersectionObserver;
58
60
  } | null | undefined;
59
61
  _updateRectBlock(element: any): void;
60
62
  _cleanRectBlock(): void;
@@ -70,7 +72,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
70
72
  _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
71
73
  _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
72
74
  _onDropDragOver: (group: any, e: any) => any;
73
- renderRectBlocks(): JSX.Element;
74
75
  renderTemporaryPlaceholder(): JSX.Element | null;
75
76
  renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
76
77
  render(): any;
package/build/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -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;
@@ -296,6 +304,10 @@ class GridLayout extends react_1.default.PureComponent {
296
304
  bottom: document.createElement('div'),
297
305
  },
298
306
  parent,
307
+ scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
308
+ rootMargin: '0px',
309
+ threshold: 0,
310
+ }),
299
311
  };
300
312
  Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
301
313
  block.style.position = 'absolute';
@@ -309,6 +321,7 @@ class GridLayout extends react_1.default.PureComponent {
309
321
  block.style.top = `${elementRect.height - 1}px`;
310
322
  }
311
323
  parent.appendChild(block);
324
+ this._rectBlocks.scrollObserver.observe(block);
312
325
  });
313
326
  this._updateRectBlock(element);
314
327
  }
@@ -327,6 +340,7 @@ class GridLayout extends react_1.default.PureComponent {
327
340
  }
328
341
  _cleanRectBlock() {
329
342
  if (this._rectBlocks) {
343
+ this._rectBlocks.scrollObserver.disconnect();
330
344
  Object.values(this._rectBlocks.spacers).forEach((block) => {
331
345
  block.remove();
332
346
  });
@@ -385,9 +399,6 @@ class GridLayout extends react_1.default.PureComponent {
385
399
  });
386
400
  }
387
401
  }
388
- renderRectBlocks() {
389
- return react_1.default.createElement("div", { className: "test" }, "123");
390
- }
391
402
  renderTemporaryPlaceholder() {
392
403
  const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
393
404
  if (!temporaryLayout || !temporaryLayout.dragProps) {
package/build/esm/components/GridLayout/GridLayout.d.ts CHANGED
@@ -48,6 +48,7 @@ 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;
51
52
  _renderRectBlock(element: any): void;
52
53
  _rectBlocks: {
53
54
  spacers: {
@@ -55,6 +56,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
55
56
  bottom: HTMLDivElement;
56
57
  };
57
58
  parent: any;
59
+ scrollObserver: IntersectionObserver;
58
60
  } | null | undefined;
59
61
  _updateRectBlock(element: any): void;
60
62
  _cleanRectBlock(): void;
@@ -70,7 +72,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
70
72
  _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
71
73
  _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
72
74
  _onDropDragOver: (group: any, e: any) => any;
73
- renderRectBlocks(): JSX.Element;
74
75
  renderTemporaryPlaceholder(): JSX.Element | null;
75
76
  renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
76
77
  render(): any;
package/build/esm/components/GridLayout/GridLayout.js CHANGED
@@ -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;
@@ -293,6 +301,10 @@ class GridLayout extends React.PureComponent {
293
301
  bottom: document.createElement('div'),
294
302
  },
295
303
  parent,
304
+ scrollObserver: new IntersectionObserver(this._rectInterscectionObserver, {
305
+ rootMargin: '0px',
306
+ threshold: 0,
307
+ }),
296
308
  };
297
309
  Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
298
310
  block.style.position = 'absolute';
@@ -306,6 +318,7 @@ class GridLayout extends React.PureComponent {
306
318
  block.style.top = `${elementRect.height - 1}px`;
307
319
  }
308
320
  parent.appendChild(block);
321
+ this._rectBlocks.scrollObserver.observe(block);
309
322
  });
310
323
  this._updateRectBlock(element);
311
324
  }
@@ -324,6 +337,7 @@ class GridLayout extends React.PureComponent {
324
337
  }
325
338
  _cleanRectBlock() {
326
339
  if (this._rectBlocks) {
340
+ this._rectBlocks.scrollObserver.disconnect();
327
341
  Object.values(this._rectBlocks.spacers).forEach((block) => {
328
342
  block.remove();
329
343
  });
@@ -382,9 +396,6 @@ class GridLayout extends React.PureComponent {
382
396
  });
383
397
  }
384
398
  }
385
- renderRectBlocks() {
386
- return React.createElement("div", { className: "test" }, "123");
387
- }
388
399
  renderTemporaryPlaceholder() {
389
400
  const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
390
401
  if (!temporaryLayout || !temporaryLayout.dragProps) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.17.1-beta.0",
3
+ "version": "8.17.1-beta.1",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {