@gravity-ui/dashkit 6.5.0-beta.1 → 6.5.1-beta.0

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

@@ -21,10 +21,6 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
-    hideWidgetOverlayControl: (args: {
-        id: string;
-        controlId: string;
-    }) => void;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
@@ -50,14 +46,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
     getItemsMeta(): any;
-    /**
-     * public method for hiding overlayControl item by id
-     * for ex. can be triggered after data render
-     * @param args
-     */
-    hideWidgetOverlayControl(args: {
-        id: string;
-        controlId: string;
-    }): any;
 }
 export {};

package/build/cjs/components/DashKit/DashKit.js

@@ -54,21 +54,11 @@ class DashKit extends react_1.default.PureComponent {
         var _a;
         return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
     }
-    /**
-     * public method for hiding overlayControl item by id
-     * for ex. can be triggered after data render
-     * @param args
-     */
-    hideWidgetOverlayControl(args) {
-        var _a;
-        return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.hideWidgetOverlayControl(args);
-    }
 }
 exports.DashKit = DashKit;
 DashKit.defaultProps = {
     onItemEdit: noop_1.default,
     onChange: noop_1.default,
-    hideWidgetOverlayControl: noop_1.default,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},

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

@@ -18,7 +18,9 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         adjustedWidgetLayout: any;
     }) => void;
     getItemsMeta: () => any;
-    hideWidgetOverlayControl: (args: any) => any;
+    getAutoupdateIntervalMs(): number;
+    getReloadIntervalRemains(): number;
+    startReloadItems(): any;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;

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

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
 const DashKitContext_1 = require("../../context/DashKitContext");
+const constants_1 = require("../../constants");
 const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
@@ -30,11 +31,6 @@ class GridLayout extends react_1.default.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
-        this.hideWidgetOverlayControl = (args) => {
-            const { hideWidgetOverlayControl } = this.context;
-            const plugin = this.pluginsRefs.find((item) => item.props.id);
-            return hideWidgetOverlayControl(Object.assign(Object.assign({}, args), { plugin }));
-        };
         this._onStart = () => {
             this.setState({ isDragging: true });
         };
@@ -61,16 +57,37 @@ class GridLayout extends react_1.default.PureComponent {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
     }
-    reloadItems() {
-        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
-        const { isPageHidden } = this.state;
+    getAutoupdateIntervalMs() {
+        const { settings: { autoupdateInterval } = {} } = this.context;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
+        return autoupdateIntervalMs;
+    }
+    getReloadIntervalRemains() {
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
+        const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
+        const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
+        return reloadIntervalRemains;
+    }
+    startReloadItems() {
+        const { editMode, settings: { silentLoading } = {}, reloadItems } = this.context;
+        const { isPageHidden } = this.state;
+        if (!isPageHidden && !editMode) {
+            this._lastReloadAt = new Date().getTime();
+            return reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+        }
+        return Promise.resolve();
+    }
+    reloadItems() {
+        const { settings: { realtimeMode } = {} } = this.context;
+        if (realtimeMode) {
+            this.startReloadItems().then(() => this.reloadItems());
+            return;
+        }
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
+        const reloadIntervalRemains = this.getReloadIntervalRemains();
         if (autoupdateIntervalMs) {
-            const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
-            const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
-            if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
-                this._lastReloadAt = new Date().getTime();
-                reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+            if (reloadIntervalRemains <= 0) {
+                this.startReloadItems();
             }
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
@@ -80,7 +97,7 @@ class GridLayout extends react_1.default.PureComponent {
         this.pluginsRefs.length = config.items.length;
         return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null)), config.items.map((item, i) => {
+            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
                 }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));

package/build/cjs/components/OverlayControls/OverlayControls.js

@@ -12,7 +12,7 @@ const DotsIcon_1 = require("../../icons/DotsIcon");
 const CogIcon_1 = require("../../icons/CogIcon");
 const CloseIcon_1 = require("../../icons/CloseIcon");
 const cn_1 = require("../../utils/cn");
-const b = (0, cn_1.cn)('dashkit-overlay-controls');
+const b = (0, cn_1.cn)(constants_1.OVERLAY_CONTROLS_CLASS_NAME);
 var OverlayControlsPosition;
 (function (OverlayControlsPosition) {
     OverlayControlsPosition["TopRight"] = "top_right";

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

@@ -1,5 +1,6 @@
 export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
+export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
 export declare const MenuItems: {
     readonly Copy: "copy";
     readonly Delete: "delete";

package/build/cjs/constants/common.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItems = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.MenuItems = 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';
 exports.MenuItems = {
     Copy: 'copy',
     Delete: 'delete',

package/build/cjs/hocs/withContext.js

@@ -15,7 +15,6 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = react_1.default.useRef({});
     const adjustedLayouts = react_1.default.useRef({});
-    const [filteredOverlayControls, setFilteredOverlayControls] = react_1.default.useState(props.overlayControls || []);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
     const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -111,10 +110,6 @@ function useMemoStateContext(props) {
         })
             .filter(Boolean);
     }, []);
-    const hideWidgetOverlayControl = react_1.default.useCallback((args) => {
-        const newOverlayControls = props.overlayControls.allWidgetsControls.filter((item) => item.id !== args.controlId);
-        setFilteredOverlayControls(Object.assign(Object.assign({}, props.overlayControls), { allWidgetsControls: newOverlayControls }));
-    }, [props.overlayControls]);
     const resultLayout = react_1.default.useMemo(() => {
         return props.layout.map((item) => {
             if (item.i in adjustedLayouts.current) {
@@ -126,7 +121,8 @@ function useMemoStateContext(props) {
         });
     }, [props.layout, layoutUpdateCounter]);
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
-        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+        const promises = pluginsRefs.map((ref) => ref && ref.reload && ref.reload(data));
+        return Promise.all(promises);
     }, []);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
@@ -145,8 +141,6 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
-        hideWidgetOverlayControl,
-        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
@@ -168,8 +162,6 @@ function useMemoStateContext(props) {
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
-        hideWidgetOverlayControl,
-        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
@@ -180,9 +172,8 @@ function useMemoStateContext(props) {
 function withContext(Component) {
     const WithContext = (props) => {
         const contextValue = useMemoStateContext(props);
-        const overlayControls = contextValue.filteredOverlayControls;
         return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
-            react_1.default.createElement(Component, { overlayControls: overlayControls })));
+            react_1.default.createElement(Component, { overlayControls: props.overlayControls })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

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

@@ -11,6 +11,7 @@ export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCusto
 export interface SettingsProps {
     autoupdateInterval: number;
     silentLoading: boolean;
+    realtimeMode?: boolean;
 }
 export interface ContextProps {
     [key: string]: any;

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

@@ -21,10 +21,6 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
-    hideWidgetOverlayControl: (args: {
-        id: string;
-        controlId: string;
-    }) => void;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
@@ -50,14 +46,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
     getItemsMeta(): any;
-    /**
-     * public method for hiding overlayControl item by id
-     * for ex. can be triggered after data render
-     * @param args
-     */
-    hideWidgetOverlayControl(args: {
-        id: string;
-        controlId: string;
-    }): any;
 }
 export {};

package/build/esm/components/DashKit/DashKit.js

@@ -50,20 +50,10 @@ export class DashKit extends React.PureComponent {
         var _a;
         return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
     }
-    /**
-     * public method for hiding overlayControl item by id
-     * for ex. can be triggered after data render
-     * @param args
-     */
-    hideWidgetOverlayControl(args) {
-        var _a;
-        return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.hideWidgetOverlayControl(args);
-    }
 }
 DashKit.defaultProps = {
     onItemEdit: noop,
     onChange: noop,
-    hideWidgetOverlayControl: noop,
     defaultGlobalParams: {},
     globalParams: {},
     itemsStateAndParams: {},

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

@@ -18,7 +18,9 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         adjustedWidgetLayout: any;
     }) => void;
     getItemsMeta: () => any;
-    hideWidgetOverlayControl: (args: any) => any;
+    getAutoupdateIntervalMs(): number;
+    getReloadIntervalRemains(): number;
+    startReloadItems(): any;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (newLayout: any) => void;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
 import GridItem from '../GridItem/GridItem';
 import { DashKitContext } from '../../context/DashKitContext';
+import { OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
 const Layout = WidthProvider(ReactGridLayout); // eslint-disable-line new-cap
 export default class GridLayout extends React.PureComponent {
     constructor(props, context) {
@@ -27,11 +28,6 @@ export default class GridLayout extends React.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
-        this.hideWidgetOverlayControl = (args) => {
-            const { hideWidgetOverlayControl } = this.context;
-            const plugin = this.pluginsRefs.find((item) => item.props.id);
-            return hideWidgetOverlayControl(Object.assign(Object.assign({}, args), { plugin }));
-        };
         this._onStart = () => {
             this.setState({ isDragging: true });
         };
@@ -58,16 +54,37 @@ export default class GridLayout extends React.PureComponent {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
     }
-    reloadItems() {
-        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
-        const { isPageHidden } = this.state;
+    getAutoupdateIntervalMs() {
+        const { settings: { autoupdateInterval } = {} } = this.context;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
+        return autoupdateIntervalMs;
+    }
+    getReloadIntervalRemains() {
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
+        const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
+        const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
+        return reloadIntervalRemains;
+    }
+    startReloadItems() {
+        const { editMode, settings: { silentLoading } = {}, reloadItems } = this.context;
+        const { isPageHidden } = this.state;
+        if (!isPageHidden && !editMode) {
+            this._lastReloadAt = new Date().getTime();
+            return reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+        }
+        return Promise.resolve();
+    }
+    reloadItems() {
+        const { settings: { realtimeMode } = {} } = this.context;
+        if (realtimeMode) {
+            this.startReloadItems().then(() => this.reloadItems());
+            return;
+        }
+        const autoupdateIntervalMs = this.getAutoupdateIntervalMs();
+        const reloadIntervalRemains = this.getReloadIntervalRemains();
         if (autoupdateIntervalMs) {
-            const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
-            const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
-            if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
-                this._lastReloadAt = new Date().getTime();
-                reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+            if (reloadIntervalRemains <= 0) {
+                this.startReloadItems();
             }
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
@@ -77,7 +94,7 @@ export default class GridLayout extends React.PureComponent {
         this.pluginsRefs.length = config.items.length;
         return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
-            : null)), config.items.map((item, i) => {
+            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
             return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
                     this.pluginsRefs[i] = pluginRef;
                 }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -3,13 +3,13 @@ import i18n from '../../i18n';
 import noop from 'lodash/noop';
 import { DashKitContext } from '../../context/DashKitContext';
 import { Icon, DropdownMenu, Button, } from '@gravity-ui/uikit';
-import { COPIED_WIDGET_STORE_KEY, MenuItems } from '../../constants';
+import { COPIED_WIDGET_STORE_KEY, OVERLAY_CONTROLS_CLASS_NAME, MenuItems } from '../../constants';
 import { DotsIcon } from '../../icons/DotsIcon';
 import { CogIcon } from '../../icons/CogIcon';
 import { CloseIcon } from '../../icons/CloseIcon';
 import { cn } from '../../utils/cn';
 import './OverlayControls.css';
-const b = cn('dashkit-overlay-controls');
+const b = cn(OVERLAY_CONTROLS_CLASS_NAME);
 export var OverlayControlsPosition;
 (function (OverlayControlsPosition) {
     OverlayControlsPosition["TopRight"] = "top_right";

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

@@ -1,5 +1,6 @@
 export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
+export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
 export declare const MenuItems: {
     readonly Copy: "copy";
     readonly Delete: "delete";

package/build/esm/constants/common.js

@@ -1,5 +1,6 @@
 export const COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 export const DEFAULT_NAMESPACE = 'default';
+export const OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
 export const MenuItems = {
     Copy: 'copy',
     Delete: 'delete',

package/build/esm/hocs/withContext.js

@@ -11,7 +11,6 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
-    const [filteredOverlayControls, setFilteredOverlayControls] = React.useState(props.overlayControls || []);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
     const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -107,10 +106,6 @@ function useMemoStateContext(props) {
         })
             .filter(Boolean);
     }, []);
-    const hideWidgetOverlayControl = React.useCallback((args) => {
-        const newOverlayControls = props.overlayControls.allWidgetsControls.filter((item) => item.id !== args.controlId);
-        setFilteredOverlayControls(Object.assign(Object.assign({}, props.overlayControls), { allWidgetsControls: newOverlayControls }));
-    }, [props.overlayControls]);
     const resultLayout = React.useMemo(() => {
         return props.layout.map((item) => {
             if (item.i in adjustedLayouts.current) {
@@ -122,7 +117,8 @@ function useMemoStateContext(props) {
         });
     }, [props.layout, layoutUpdateCounter]);
     const reloadItems = React.useCallback((pluginsRefs, data) => {
-        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+        const promises = pluginsRefs.map((ref) => ref && ref.reload && ref.reload(data));
+        return Promise.all(promises);
     }, []);
     return React.useMemo(() => ({
         layout: resultLayout,
@@ -141,8 +137,6 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
-        hideWidgetOverlayControl,
-        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
@@ -164,8 +158,6 @@ function useMemoStateContext(props) {
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
-        hideWidgetOverlayControl,
-        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
@@ -176,9 +168,8 @@ function useMemoStateContext(props) {
 export function withContext(Component) {
     const WithContext = (props) => {
         const contextValue = useMemoStateContext(props);
-        const overlayControls = contextValue.filteredOverlayControls;
         return (React.createElement(DashKitContext.Provider, { value: contextValue },
-            React.createElement(Component, { overlayControls: overlayControls })));
+            React.createElement(Component, { overlayControls: props.overlayControls })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

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

@@ -11,6 +11,7 @@ export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCusto
 export interface SettingsProps {
     autoupdateInterval: number;
     silentLoading: boolean;
+    realtimeMode?: boolean;
 }
 export interface ContextProps {
     [key: string]: any;

package/package.json

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