Fix context menu closeanimation

Feature #13784

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx
index 67fbb826f2cb1184df1df0c8ae1a38f17e3f9c80..f519e301f6337fb540fcd96e02536aa7239bfc6b 100644 (file)
--- a/src/components/context-menu/context-menu.tsx
+++ b/src/components/context-menu/context-menu.tsx
@@ -16,16 +16,17 @@ export type ContextMenuItemGroup = ContextMenuItem[];
 export interface ContextMenuProps {
     anchorEl?: HTMLElement;
     items: ContextMenuItemGroup[];
+    open: boolean;
     onItemClick: (action: ContextMenuItem) => void;
     onClose: () => void;
 }
 
 export class ContextMenu extends React.PureComponent<ContextMenuProps> {
     render() {
-        const { anchorEl, items, onClose, onItemClick } = this.props;
+        const { anchorEl, items, open, onClose, onItemClick } = this.props;
         return <Popover
             anchorEl={anchorEl}
-            open={!!anchorEl}
+            open={open}
             onClose={onClose}
             transformOrigin={DefaultTransformOrigin}
             anchorOrigin={DefaultTransformOrigin}

diff --git a/src/store/context-menu/context-menu-reducer.ts b/src/store/context-menu/context-menu-reducer.ts
index b20ad723f23d9aec615ab4700ca48db90be9f840..d0ad85e32e91365e2f5ae0d892bdebef724520b1 100644 (file)
--- a/src/store/context-menu/context-menu-reducer.ts
+++ b/src/store/context-menu/context-menu-reducer.ts
@@ -6,6 +6,7 @@ import { ResourceKind } from "../../models/resource";
 import { contextMenuActions, ContextMenuAction } from "./context-menu-actions";
 
 export interface ContextMenuState {
+    open: boolean;
     position: ContextMenuPosition;
     resource?: ContextMenuResource;
 }
@@ -21,13 +22,14 @@ export interface ContextMenuResource {
 }
 
 const initialState = {
+    open: false,
     position: { x: 0, y: 0 }
 };
 
 export const contextMenuReducer = (state: ContextMenuState = initialState, action: ContextMenuAction) =>
     contextMenuActions.match(action, {
         default: () => state,
-        OPEN_CONTEXT_MENU: ({resource, position}) => ({ resource, position }),
-        CLOSE_CONTEXT_MENU: () => ({ position: state.position })
+        OPEN_CONTEXT_MENU: ({ resource, position }) => ({ open: true, resource, position }),
+        CLOSE_CONTEXT_MENU: () => ({ ...state, open: false })
     });
 

diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx
index cc2fcb31b71a8b3e7416ef8e2f952df0a3b9bddc..f1e0645f52fbda841fc67192e226adac7fee0b9c 100644 (file)
--- a/src/views-components/context-menu/context-menu.tsx
+++ b/src/views-components/context-menu/context-menu.tsx
@@ -11,12 +11,13 @@ import { ContextMenuResource } from "../../store/context-menu/context-menu-reduc
 import { ContextMenuActionSet, ContextMenuAction } from "./context-menu-action-set";
 import { Dispatch } from "redux";
 
-type DataProps = Pick<ContextMenuProps, "anchorEl" | "items"> & { resource?: ContextMenuResource };
+type DataProps = Pick<ContextMenuProps, "anchorEl" | "items" | "open"> & { resource?: ContextMenuResource };
 const mapStateToProps = (state: RootState): DataProps => {
-    const { position, resource } = state.contextMenu;
+    const { open, position, resource } = state.contextMenu;
     return {
         anchorEl: resource ? createAnchorAt(position) : undefined,
         items: getMenuActionSet(resource),
+        open,
         resource
     };
 };