@gravity-ui/dashkit 6.4.0 → 6.5.0-beta.1

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

@@ -21,7 +21,10 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
-    _experimentDisableItemAnimation: boolean;
+    hideWidgetOverlayControl: (args: {
+        id: string;
+        controlId: string;
+    }) => void;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
@@ -47,5 +50,14 @@ 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,11 +54,21 @@ 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: {},
@@ -68,5 +78,4 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
-    _experimentDisableItemAnimation: false,
 };

package/build/cjs/components/GridItem/GridItem.css

@@ -30,14 +30,6 @@
   transition: height 200ms ease;
 }
 
-.react-grid-item {
-  transition: all 200ms ease;
-  transition-property: left, top;
-}
-.react-grid-item.dashkit-grid-item_disable-animation {
-  transition: none;
-}
-
 .react-grid-item.cssTransforms {
   transition-property: transform;
 }

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

@@ -25,7 +25,7 @@ class GridItem extends react_1.default.PureComponent {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
         const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, withCustomHandle, } = this.props;
-        const { editMode, _experimentDisableItemAnimation } = this.context;
+        const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
@@ -40,7 +40,6 @@ class GridItem extends react_1.default.PureComponent {
         return (react_1.default.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
                 'with-custom-handle': withCustomHandle,
-                'disable-animation': _experimentDisableItemAnimation,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
                 react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),

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

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

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

@@ -30,6 +30,11 @@ 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 });
         };

package/build/cjs/hocs/withContext.js

@@ -15,6 +15,7 @@ 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 }) => {
@@ -110,6 +111,10 @@ 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) {
@@ -140,12 +145,13 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
+        hideWidgetOverlayControl,
+        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
-        _experimentDisableItemAnimation: props._experimentDisableItemAnimation,
     }), [
         resultLayout,
         props.config,
@@ -162,19 +168,21 @@ function useMemoStateContext(props) {
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
+        hideWidgetOverlayControl,
+        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
-        props._experimentDisableItemAnimation,
     ]);
 }
 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: props.overlayControls })));
+            react_1.default.createElement(Component, { overlayControls: overlayControls })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

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

@@ -21,7 +21,10 @@ interface DashKitDefaultProps {
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
-    _experimentDisableItemAnimation: boolean;
+    hideWidgetOverlayControl: (args: {
+        id: string;
+        controlId: string;
+    }) => void;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
@@ -47,5 +50,14 @@ 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,10 +50,20 @@ 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: {},
@@ -63,5 +73,4 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
-    _experimentDisableItemAnimation: false,
 };

package/build/esm/components/GridItem/GridItem.css

@@ -30,14 +30,6 @@
   transition: height 200ms ease;
 }
 
-.react-grid-item {
-  transition: all 200ms ease;
-  transition-property: left, top;
-}
-.react-grid-item.dashkit-grid-item_disable-animation {
-  transition: none;
-}
-
 .react-grid-item.cssTransforms {
   transition-property: transform;
 }

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

@@ -23,7 +23,7 @@ class GridItem extends React.PureComponent {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
         const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, withCustomHandle, } = this.props;
-        const { editMode, _experimentDisableItemAnimation } = this.context;
+        const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
         const transform = style.transform;
@@ -38,7 +38,6 @@ class GridItem extends React.PureComponent {
         return (React.createElement("div", Object.assign({ className: b({
                 'is-dragging': isDragging,
                 'with-custom-handle': withCustomHandle,
-                'disable-animation': _experimentDisableItemAnimation,
             }, preparedClassName), "data-qa": "dashkit-grid-item", style: style, ref: this.props.forwardedRef }, reactGridLayoutProps),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
                 React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),

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

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

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

@@ -27,6 +27,11 @@ 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 });
         };

package/build/esm/hocs/withContext.js

@@ -11,6 +11,7 @@ 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 }) => {
@@ -106,6 +107,10 @@ 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) {
@@ -136,12 +141,13 @@ function useMemoStateContext(props) {
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
+        hideWidgetOverlayControl,
+        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
-        _experimentDisableItemAnimation: props._experimentDisableItemAnimation,
     }), [
         resultLayout,
         props.config,
@@ -158,19 +164,21 @@ function useMemoStateContext(props) {
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
+        hideWidgetOverlayControl,
+        filteredOverlayControls,
         reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
-        props._experimentDisableItemAnimation,
     ]);
 }
 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: props.overlayControls })));
+            React.createElement(Component, { overlayControls: overlayControls })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

package/package.json

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