@gravity-ui/dashkit 8.4.0 → 8.5.0-beta.0

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -23,10 +23,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (e: any) => any;
+    _onDropDragOver: (e: any, gridProperties: any, layout: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
-    renderGroup(group: any, renderLayout: any, renderItems: any, offset?: number): JSX.Element;
+    caclculateEmptyHorizontalSpace(layout: any, cols: any): any;
+    getElementLayout(layout: any, properties: any): any;
+    renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }
 import React from 'react';

package/build/cjs/components/GridLayout/GridLayout.js

@@ -46,12 +46,20 @@ class GridLayout extends react_1.default.PureComponent {
             }
             this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (e) => {
+        this._onDropDragOver = (e, gridProperties, layout) => {
             const { editMode, dragOverPlugin, onDropDragOver } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e);
+            let maxW = gridProperties.cols;
+            const maxH = gridProperties.maxRows;
+            if (gridProperties.compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+                maxW = this.caclculateEmptyHorizontalSpace(layout, gridProperties.cols);
+            }
+            if (maxW === 0 || maxH === 0) {
+                return false;
+            }
+            return onDropDragOver(e, { maxH, maxW });
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -131,14 +139,33 @@ class GridLayout extends react_1.default.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
-    renderGroup(group, renderLayout, renderItems, offset = 0) {
+    caclculateEmptyHorizontalSpace(layout, cols) {
+        return layout.reduce((memo, item) => memo - item.w, cols);
+    }
+    getElementLayout(layout, properties) {
+        let maxH;
+        if (properties.maxRows) {
+            maxH = properties.maxRows;
+        }
+        const leftSpace = this.caclculateEmptyHorizontalSpace(layout, properties.cols);
+        return layout.map((item) => (Object.assign(Object.assign({}, item), { maxW: item.w + leftSpace, maxH })));
+    }
+    renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { key: `group_${group}`, layout: renderLayout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const properties = groupGridProperties
+            ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
+            : registerManager.gridLayout;
+        let { compactType } = properties;
+        if (compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            renderLayout = this.getElementLayout(renderLayout, properties);
+            compactType = 'horizontal';
+        }
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: this._onDropDragOver,
+                onDropDragOver: (e) => this._onDropDragOver(e, properties, renderLayout),
                 onDrop: (...args) => this._onDrop(group, ...args),
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
@@ -194,7 +221,7 @@ class GridLayout extends react_1.default.PureComponent {
                     layout = groupedLayout[id] || [];
                     items = itemsByGroup[id] || [];
                 }
-                const element = this.renderGroup(id, layout, items, offset);
+                const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
                     return group.render(id, element, {

package/build/cjs/constants/common.d.ts

@@ -11,3 +11,4 @@ export declare const MenuItems: {
 export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
+export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -14,3 +14,4 @@ exports.MenuItems = {
 exports.DEFAULT_WIDGET_HEIGHT = 3;
 exports.DEFAULT_WIDGET_WIDTH = 3;
 exports.DEFAULT_GROUP = '__default';
+exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

package/build/cjs/hocs/withContext.js

@@ -161,7 +161,7 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = react_1.default.useCallback(() => {
+    const onDropDragOver = react_1.default.useCallback((_e, gridProps = {}) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
@@ -169,7 +169,10 @@ function useMemoStateContext(props) {
         if (dragOverPlugin) {
             const { defaultLayout } = dragOverPlugin;
             const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
-            return { h, w };
+            return {
+                h: gridProps.maxH ? Math.min(h, gridProps.maxH) : h,
+                w: gridProps.maxW ? Math.min(w, gridProps.maxW) : w,
+            };
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);

package/build/cjs/typings/config.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react-grid-layout" />
 /// <reference types="react" />
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
@@ -18,7 +19,11 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
+export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
+    compactType?: ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+};
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }

package/build/esm/components/GridLayout/GridLayout.d.ts

@@ -23,10 +23,12 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (e: any) => any;
+    _onDropDragOver: (e: any, gridProperties: any, layout: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
-    renderGroup(group: any, renderLayout: any, renderItems: any, offset?: number): JSX.Element;
+    caclculateEmptyHorizontalSpace(layout: any, cols: any): any;
+    getElementLayout(layout: any, properties: any): any;
+    renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }
 import React from 'react';

package/build/esm/components/GridLayout/GridLayout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
+import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridItem from '../GridItem/GridItem';
 import { Layout } from './ReactGridLayout';
@@ -43,12 +43,20 @@ class GridLayout extends React.PureComponent {
             }
             this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (e) => {
+        this._onDropDragOver = (e, gridProperties, layout) => {
             const { editMode, dragOverPlugin, onDropDragOver } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e);
+            let maxW = gridProperties.cols;
+            const maxH = gridProperties.maxRows;
+            if (gridProperties.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+                maxW = this.caclculateEmptyHorizontalSpace(layout, gridProperties.cols);
+            }
+            if (maxW === 0 || maxH === 0) {
+                return false;
+            }
+            return onDropDragOver(e, { maxH, maxW });
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -128,14 +136,33 @@ class GridLayout extends React.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
-    renderGroup(group, renderLayout, renderItems, offset = 0) {
+    caclculateEmptyHorizontalSpace(layout, cols) {
+        return layout.reduce((memo, item) => memo - item.w, cols);
+    }
+    getElementLayout(layout, properties) {
+        let maxH;
+        if (properties.maxRows) {
+            maxH = properties.maxRows;
+        }
+        const leftSpace = this.caclculateEmptyHorizontalSpace(layout, properties.cols);
+        return layout.map((item) => (Object.assign(Object.assign({}, item), { maxW: item.w + leftSpace, maxH })));
+    }
+    renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { key: `group_${group}`, layout: renderLayout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const properties = groupGridProperties
+            ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
+            : registerManager.gridLayout;
+        let { compactType } = properties;
+        if (compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            renderLayout = this.getElementLayout(renderLayout, properties);
+            compactType = 'horizontal';
+        }
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: this._onDropDragOver,
+                onDropDragOver: (e) => this._onDropDragOver(e, properties, renderLayout),
                 onDrop: (...args) => this._onDrop(group, ...args),
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
@@ -191,7 +218,7 @@ class GridLayout extends React.PureComponent {
                     layout = groupedLayout[id] || [];
                     items = itemsByGroup[id] || [];
                 }
-                const element = this.renderGroup(id, layout, items, offset);
+                const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
                 if (group.render) {
                     return group.render(id, element, {

package/build/esm/constants/common.d.ts

@@ -11,3 +11,4 @@ export declare const MenuItems: {
 export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
+export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";

package/build/esm/constants/common.js

@@ -11,3 +11,4 @@ export const MenuItems = {
 export const DEFAULT_WIDGET_HEIGHT = 3;
 export const DEFAULT_WIDGET_WIDTH = 3;
 export const DEFAULT_GROUP = '__default';
+export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

package/build/esm/hocs/withContext.js

@@ -157,7 +157,7 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback(() => {
+    const onDropDragOver = React.useCallback((_e, gridProps = {}) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
@@ -165,7 +165,10 @@ function useMemoStateContext(props) {
         if (dragOverPlugin) {
             const { defaultLayout } = dragOverPlugin;
             const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
-            return { h, w };
+            return {
+                h: gridProps.maxH ? Math.min(h, gridProps.maxH) : h,
+                w: gridProps.maxW ? Math.min(w, gridProps.maxW) : w,
+            };
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);

package/build/esm/typings/config.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react-grid-layout" />
 /// <reference types="react" />
 import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
@@ -18,7 +19,11 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
+export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
+    compactType?: ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+};
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.4.0",
+  "version": "8.5.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {