@gravity-ui/dashkit 8.1.0-beta.1 → 8.1.0-beta.2

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

@@ -1,14 +1,5 @@
-import React from 'react';
-import { ActionPanelProps } from './types';
-export type ActionPanelItem = {
-    id: string;
-    icon: React.ReactNode;
-    title: string;
-    onClick?: () => void;
-    className?: string;
-    qa?: string;
-    pluginType?: string;
-};
+/// <reference types="react" />
+import { ActionPanelItem, ActionPanelProps } from './types';
 export declare const ActionPanelItemContainer: ({ item }: {
     item: ActionPanelItem;
 }) => JSX.Element;

package/build/cjs/components/ActionPanel/ActionPanel.js

@@ -10,13 +10,13 @@ const b = (0, cn_1.cn)('dashkit-action-panel');
 const ActionPanelItemContainer = ({ item }) => {
     const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
     const onDragStart = react_1.default.useCallback((e) => {
-        dragContext.onDragStart(e, item.pluginType);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
     const onDragEnd = react_1.default.useCallback((e) => {
-        dragContext.onDragEnd(e);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
     }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
     let dndProps = {};
-    if (item.pluginType) {
+    if (item.dragProps) {
         dndProps = {
             draggable: true,
             unselectable: 'on',

package/build/cjs/components/ActionPanel/types.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DragProps } from '../../shared';
 export type ActionPanelItem = {
     id: string;
     icon: React.ReactNode;
@@ -6,7 +7,7 @@ export type ActionPanelItem = {
     onClick?: () => void;
     className?: string;
     qa?: string;
-    pluginType?: string;
+    dragProps?: DragProps;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, ConfigLayout, DragProps, GlobalParams, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -17,7 +17,7 @@ interface DashKitDefaultProps {
     }) => void;
     onDrop: (dropProps: {
         commit: () => void;
-        pluginType: string;
+        dragProps: DragProps;
         itemLayout: ConfigLayout;
         newLayout: ConfigLayout[];
     }) => void;

package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -5,20 +5,20 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext_1 = require("../../context/DashKitContext");
 const DashKitDnDWrapper = (props) => {
-    const [dragPluginType, setDragPluginType] = react_1.default.useState(null);
-    const onDragStart = react_1.default.useCallback((_, type) => {
-        setDragPluginType(type);
-    }, [setDragPluginType]);
+    const [dragProps, setDragProps] = react_1.default.useState(null);
+    const onDragStart = react_1.default.useCallback((_, currentProps) => {
+        setDragProps(currentProps);
+    }, [setDragProps]);
     const onDragEnd = react_1.default.useCallback((_) => {
-        setDragPluginType(null);
-    }, [setDragPluginType]);
+        setDragProps(null);
+    }, [setDragProps]);
     const contextValue = react_1.default.useMemo(() => {
         return {
-            dragPluginType,
+            dragProps,
             onDragStart,
             onDragEnd,
         };
-    }, [dragPluginType, onDragStart, onDragEnd]);
+    }, [dragProps, onDragStart, onDragEnd]);
     return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };
 exports.DashKitDnDWrapper = DashKitDnDWrapper;

package/build/cjs/components/GridItem/GridItem.js

@@ -58,9 +58,9 @@ class GridItem extends react_1.default.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls } = this.props;
+        const { overlayControls, isPlaceholder } = this.props;
         const { editMode } = this.context;
-        if (!editMode || this.props.item.data._editActive) {
+        if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;

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

@@ -24,12 +24,12 @@ class DragOverLayout extends react_grid_layout_1.default {
         window.removeEventListener('dragend', this.dragReset);
     }
     processGridItem(child, isDroppingItem) {
+        const gridItem = super.processGridItem(child, isDroppingItem);
         if (isDroppingItem) {
             // Drop item from outside gets 0,0 droppingPosition
             // centering cursor on newly creted grid item
             // And cause grid-layout using it's own GridItem to make it look
             // like overlay adding className
-            const gridItem = super.processGridItem(child, isDroppingItem);
             if (!gridItem)
                 return null;
             const { props } = gridItem;
@@ -41,7 +41,7 @@ class DragOverLayout extends react_grid_layout_1.default {
                 droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
             });
         }
-        return super.processGridItem(child, isDroppingItem);
+        return gridItem;
     }
 }
 const Layout = (0, react_grid_layout_1.WidthProvider)(DragOverLayout); // eslint-disable-line new-cap
@@ -85,17 +85,16 @@ class GridLayout extends react_1.default.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode) {
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode || !dragOverPlugin || temporaryLayout) {
                 return false;
             }
-            const result = onDropDragOver(e);
-            if (temporaryLayout) {
-                return false;
-            }
-            return result;
+            return onDropDragOver(e);
         };
         this._onDrop = (layout, item, e) => {
+            if (!item) {
+                return false;
+            }
             const { editMode, temporaryLayout, onDrop } = this.context;
             if (!editMode && temporaryLayout) {
                 return false;

package/build/cjs/hocs/withContext.js

@@ -8,6 +8,8 @@ const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
+const DEFAULT_HEIGHT = 3;
+const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -144,20 +146,11 @@ function useMemoStateContext(props) {
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const draggedPluginRef = react_1.default.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
-    react_1.default.useEffect(() => {
-        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
-            draggedPluginRef.current = null;
-        }
-        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
-            draggedPluginRef.current = dndContext.dragPluginType;
-        }
-    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
-    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = react_1.default.useMemo(() => {
-        const pluginType = dndPluginType;
-        if (pluginType === null && temporaryLayout === null)
+        if (!dragProps && temporaryLayout === null)
             return null;
+        const pluginType = dragProps.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -166,22 +159,27 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    }, [dragProps, temporaryLayout, props.registerManager]);
     const onDropDragOver = react_1.default.useCallback(() => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
-            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
             return { h, w };
         }
         return false;
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
         setTemporaryLayout(newLayout);
         const { i, w, h, x, y } = item;
-        props.onDrop({
+        onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== i) {
                     memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -189,10 +187,10 @@ function useMemoStateContext(props) {
                 return memo;
             }, []),
             itemLayout: { w, h, x, y },
-            pluginType: dndPluginType,
             commit: resetTemporaryLayout,
+            dragProps,
         });
-    }, [dndPluginType, props.onDrop]);
+    }, [dragProps, onDropProp, resetTemporaryLayout]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/cjs/shared/types/config.d.ts

@@ -1,4 +1,9 @@
 import { StringParams } from './common';
+export type DragProps = {
+    type: string;
+    w?: number;
+    h?: number;
+};
 export interface ConfigLayout {
     i: string;
     h: number;

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

@@ -1,15 +1,6 @@
-import React from 'react';
-import { ActionPanelProps } from './types';
+/// <reference types="react" />
+import { ActionPanelItem, ActionPanelProps } from './types';
 import './ActionPanel.css';
-export type ActionPanelItem = {
-    id: string;
-    icon: React.ReactNode;
-    title: string;
-    onClick?: () => void;
-    className?: string;
-    qa?: string;
-    pluginType?: string;
-};
 export declare const ActionPanelItemContainer: ({ item }: {
     item: ActionPanelItem;
 }) => JSX.Element;

package/build/esm/components/ActionPanel/ActionPanel.js

@@ -7,13 +7,13 @@ const b = cn('dashkit-action-panel');
 export const ActionPanelItemContainer = ({ item }) => {
     const dragContext = React.useContext(DashKitDnDContext);
     const onDragStart = React.useCallback((e) => {
-        dragContext.onDragStart(e, item.pluginType);
-    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.pluginType]);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart(e, item.dragProps);
+    }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragStart, item.dragProps]);
     const onDragEnd = React.useCallback((e) => {
-        dragContext.onDragEnd(e);
+        dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd(e);
     }, [dragContext === null || dragContext === void 0 ? void 0 : dragContext.onDragEnd]);
     let dndProps = {};
-    if (item.pluginType) {
+    if (item.dragProps) {
         dndProps = {
             draggable: true,
             unselectable: 'on',

package/build/esm/components/ActionPanel/types.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DragProps } from '../../shared';
 export type ActionPanelItem = {
     id: string;
     icon: React.ReactNode;
@@ -6,7 +7,7 @@ export type ActionPanelItem = {
     onClick?: () => void;
     className?: string;
     qa?: string;
-    pluginType?: string;
+    dragProps?: DragProps;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemsStateAndParams } from '../../shared';
+import type { Config, ConfigItem, ConfigLayout, DragProps, GlobalParams, ItemsStateAndParams } from '../../shared';
 import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
@@ -17,7 +17,7 @@ interface DashKitDefaultProps {
     }) => void;
     onDrop: (dropProps: {
         commit: () => void;
-        pluginType: string;
+        dragProps: DragProps;
         itemLayout: ConfigLayout;
         newLayout: ConfigLayout[];
     }) => void;

package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import { DashKitDnDContext } from '../../context/DashKitContext';
 export const DashKitDnDWrapper = (props) => {
-    const [dragPluginType, setDragPluginType] = React.useState(null);
-    const onDragStart = React.useCallback((_, type) => {
-        setDragPluginType(type);
-    }, [setDragPluginType]);
+    const [dragProps, setDragProps] = React.useState(null);
+    const onDragStart = React.useCallback((_, currentProps) => {
+        setDragProps(currentProps);
+    }, [setDragProps]);
     const onDragEnd = React.useCallback((_) => {
-        setDragPluginType(null);
-    }, [setDragPluginType]);
+        setDragProps(null);
+    }, [setDragProps]);
     const contextValue = React.useMemo(() => {
         return {
-            dragPluginType,
+            dragProps,
             onDragStart,
             onDragEnd,
         };
-    }, [dragPluginType, onDragStart, onDragEnd]);
+    }, [dragProps, onDragStart, onDragEnd]);
     return (React.createElement(DashKitDnDContext.Provider, { value: contextValue }, props.children));
 };

package/build/esm/components/GridItem/GridItem.js

@@ -56,9 +56,9 @@ class GridItem extends React.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls } = this.props;
+        const { overlayControls, isPlaceholder } = this.props;
         const { editMode } = this.context;
-        if (!editMode || this.props.item.data._editActive) {
+        if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;

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

@@ -21,12 +21,12 @@ class DragOverLayout extends ReactGridLayout {
         window.removeEventListener('dragend', this.dragReset);
     }
     processGridItem(child, isDroppingItem) {
+        const gridItem = super.processGridItem(child, isDroppingItem);
         if (isDroppingItem) {
             // Drop item from outside gets 0,0 droppingPosition
             // centering cursor on newly creted grid item
             // And cause grid-layout using it's own GridItem to make it look
             // like overlay adding className
-            const gridItem = super.processGridItem(child, isDroppingItem);
             if (!gridItem)
                 return null;
             const { props } = gridItem;
@@ -38,7 +38,7 @@ class DragOverLayout extends ReactGridLayout {
                 droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
             });
         }
-        return super.processGridItem(child, isDroppingItem);
+        return gridItem;
     }
 }
 const Layout = WidthProvider(DragOverLayout); // eslint-disable-line new-cap
@@ -82,17 +82,16 @@ class GridLayout extends React.PureComponent {
             this.setState({ isDragging: false });
         };
         this._onDropDragOver = (e) => {
-            const { editMode, onDropDragOver, temporaryLayout } = this.context;
-            if (!editMode) {
+            const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
+            if (!editMode || !dragOverPlugin || temporaryLayout) {
                 return false;
             }
-            const result = onDropDragOver(e);
-            if (temporaryLayout) {
-                return false;
-            }
-            return result;
+            return onDropDragOver(e);
         };
         this._onDrop = (layout, item, e) => {
+            if (!item) {
+                return false;
+            }
             const { editMode, temporaryLayout, onDrop } = this.context;
             if (!editMode && temporaryLayout) {
                 return false;

package/build/esm/hocs/withContext.js

@@ -4,6 +4,8 @@ import { TEMPORARY_ITEM_ID } from '../constants/common';
 import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
+const DEFAULT_HEIGHT = 3;
+const DEFAULT_WIDTH = 3;
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -140,20 +142,11 @@ function useMemoStateContext(props) {
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
-    const draggedPluginRef = React.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
-    React.useEffect(() => {
-        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
-            draggedPluginRef.current = null;
-        }
-        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
-            draggedPluginRef.current = dndContext.dragPluginType;
-        }
-    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
-    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragProps = dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragProps;
     const dragOverPlugin = React.useMemo(() => {
-        const pluginType = dndPluginType;
-        if (pluginType === null && temporaryLayout === null)
+        if (!dragProps && temporaryLayout === null)
             return null;
+        const pluginType = dragProps.type;
         if (props.registerManager.check(pluginType)) {
             return props.registerManager.getItem(pluginType);
         }
@@ -162,22 +155,27 @@ function useMemoStateContext(props) {
             console.error(`Uknown pluginType: ${pluginType}`);
             return null;
         }
-    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    }, [dragProps, temporaryLayout, props.registerManager]);
     const onDropDragOver = React.useCallback(() => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
-            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+        if (dragOverPlugin) {
+            const { defaultLayout } = dragOverPlugin;
+            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDTH } = dragProps;
             return { h, w };
         }
         return false;
-    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
+        if (!dragProps) {
+            return;
+        }
         setTemporaryLayout(newLayout);
         const { i, w, h, x, y } = item;
-        props.onDrop({
+        onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== i) {
                     memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -185,10 +183,10 @@ function useMemoStateContext(props) {
                 return memo;
             }, []),
             itemLayout: { w, h, x, y },
-            pluginType: dndPluginType,
             commit: resetTemporaryLayout,
+            dragProps,
         });
-    }, [dndPluginType, props.onDrop]);
+    }, [dragProps, onDropProp, resetTemporaryLayout]);
     return React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,

package/build/esm/shared/types/config.d.ts

@@ -1,4 +1,9 @@
 import { StringParams } from './common';
+export type DragProps = {
+    type: string;
+    w?: number;
+    h?: number;
+};
 export interface ConfigLayout {
     i: string;
     h: number;

package/package.json

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