From 2a477468edabb1963019c8fe8fee1c06c6020956 Mon Sep 17 00:00:00 2001
From: "vicky_primathon.in" <vicky.bansal@primathon.in>
Date: Wed, 3 Jun 2020 12:40:16 +0530
Subject: [PATCH] changes to fix hover issue

---
 .../DynamicAutocompleteInput.tsx              | 34 +++++--
 .../LightningMenu/LightningMenuTrigger.tsx    | 97 +++++++------------
 .../editorComponents/LightningMenu/index.tsx  |  8 +-
 3 files changed, 64 insertions(+), 75 deletions(-)

diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
index b7ac5a39cd..3873b5542d 100644
--- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
+++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
@@ -249,10 +249,13 @@ const IconContainer = styled.div`
   }
 `;
 
+type MenuState = "none" | "default" | "active" | "hover";
+
 const DynamicAutocompleteInputWrapper = styled.div<{
   skin: Skin;
   theme: Theme;
   isActive: boolean;
+  isNotHover: boolean;
 }>`
   width: 100%;
   height: 100%;
@@ -265,6 +268,25 @@ const DynamicAutocompleteInputWrapper = styled.div<{
   &:hover {
     border: ${props =>
       props.skin === Skin.DARK ? "1px solid " + Colors.ALABASTER : "none"};
+    .lightning-menu {
+      background: ${props =>
+        !props.isNotHover
+          ? props.skin === Skin.DARK
+            ? Colors.ALABASTER
+            : Colors.BLUE_CHARCOAL
+          : ""};
+      svg {
+        path,
+        circle {
+          fill: ${props =>
+            !props.isNotHover
+              ? props.skin === Skin.DARK
+                ? Colors.BLUE_CHARCOAL
+                : Colors.WHITE
+              : ""};
+        }
+      }
+    }
   }
 `;
 
@@ -309,7 +331,6 @@ type Props = ReduxStateProps &
 
 type State = {
   isFocused: boolean;
-  isHover: boolean;
   isOpened: boolean;
   autoCompleteVisible: boolean;
 };
@@ -323,7 +344,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     super(props);
     this.state = {
       isFocused: false,
-      isHover: false,
       isOpened: false,
       autoCompleteVisible: false,
     };
@@ -577,24 +597,18 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     }
     return (
       <DynamicAutocompleteInputWrapper
-        onMouseOver={() => {
-          this.setState({ isHover: true });
-        }}
-        onMouseOut={() => {
-          this.setState({ isHover: false });
-        }}
         theme={this.props.theme}
         skin={this.props.theme === "DARK" ? Skin.DARK : Skin.LIGHT}
         isActive={(this.state.isFocused && !hasError) || this.state.isOpened}
+        isNotHover={this.state.isFocused || this.state.isOpened}
       >
         {showLightningMenu !== false && (
           <Suspense fallback={<div />}>
             <LightningMenu
               skin={this.props.theme === "DARK" ? Skin.DARK : Skin.LIGHT}
               updateDynamicInputValue={this.updatePropertyValue}
-              isHover={this.state.isHover}
               isFocused={this.state.isFocused}
-              isClosed={!this.state.isOpened}
+              isOpened={this.state.isOpened}
               onOpenLightningMenu={() => {
                 this.setState({ isOpened: true });
               }}
diff --git a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
index b32bfa6f7b..a44c081393 100644
--- a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
@@ -19,9 +19,8 @@ const LightningIconWrapper = styled.span<{ background: string; skin: Skin }>`
 `;
 
 interface LightningMenuTriggerProps {
-  isHover: boolean;
   isFocused: boolean;
-  isClosed: boolean;
+  isOpened: boolean;
   skin: Skin;
   theme: Theme;
   onOpenLightningMenu: () => void;
@@ -29,66 +28,44 @@ interface LightningMenuTriggerProps {
 
 type MenuState = "none" | "default" | "active" | "hover";
 
-interface LightningMenuTriggerState {
-  menuState: MenuState;
-}
-
-export default class LightningMenuTrigger extends React.Component<
-  LightningMenuTriggerProps,
-  LightningMenuTriggerState
-> {
-  constructor(props: LightningMenuTriggerProps) {
-    super(props);
-    this.state = {
-      menuState: "none",
-    };
-  }
-
-  componentDidUpdate(prevProps: LightningMenuTriggerProps) {
-    const { menuState } = this.state;
-    const { isHover, isFocused, isClosed } = this.props;
-    if (menuState === "none" && isHover) {
-      this.setState({ menuState: "hover" });
-    } else if (menuState === "active" && isFocused) {
-      this.setState({ menuState: "default" });
-    } else if (menuState === "default" && !isFocused) {
-      this.setState({ menuState: "none" });
-    } else if (menuState === "hover" && !isHover) {
-      this.setState({ menuState: "none" });
-    } else if (menuState === "active" && isClosed) {
-      this.setState({ menuState: "none" });
-    } else if (menuState === "none" && isFocused) {
-      this.setState({ menuState: "default" });
+export const LightningMenuTrigger = (props: LightningMenuTriggerProps) => {
+  const getMenuState = () => {
+    let menuState: MenuState = "none";
+    if (props.isOpened) {
+      menuState = "active";
     }
-  }
-
-  updateMenuState = (menuState: MenuState) => {
-    this.setState({ menuState });
-  };
-
-  render() {
-    const { menuState } = this.state;
-    const { skin, theme } = this.props;
+    if (props.isFocused) {
+      menuState = "default";
+    }
+    const { background, color } = props.theme.lightningMenu[props.skin][
+      menuState
+    ];
     const iconProps: IconProps = {
       width: 14,
       height: 14,
-      color: theme.lightningMenu[skin][menuState].color,
+      color: color,
     };
-    return (
-      <LightningIconWrapper
-        background={theme.lightningMenu[skin][menuState].background}
-        onClick={() => {
-          if (this.props.onOpenLightningMenu) {
-            this.props.onOpenLightningMenu();
-          }
-          this.updateMenuState("active");
-        }}
-        skin={skin}
-      >
-        <IconWrapper {...iconProps}>
-          <LightningIcon />
-        </IconWrapper>
-      </LightningIconWrapper>
-    );
-  }
-}
+
+    return {
+      iconProps,
+      background,
+    };
+  };
+  const { background, iconProps } = getMenuState();
+  return (
+    <LightningIconWrapper
+      background={background}
+      onClick={() => {
+        if (props.onOpenLightningMenu) {
+          props.onOpenLightningMenu();
+        }
+      }}
+      skin={props.skin}
+      className="lightning-menu"
+    >
+      <IconWrapper {...iconProps}>
+        <LightningIcon />
+      </IconWrapper>
+    </LightningIconWrapper>
+  );
+};
diff --git a/app/client/src/components/editorComponents/LightningMenu/index.tsx b/app/client/src/components/editorComponents/LightningMenu/index.tsx
index e424074bd8..f3d93c9e49 100644
--- a/app/client/src/components/editorComponents/LightningMenu/index.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/index.tsx
@@ -9,7 +9,7 @@ import { RestAction } from "api/ActionAPI";
 import { WidgetProps } from "widgets/BaseWidget";
 import { LIGHTNING_MENU_DATA_TOOLTIP } from "constants/messages";
 import { getLightningMenuOptions } from "./helpers";
-import LightningMenuTrigger from "./LightningMenuTrigger";
+import { LightningMenuTrigger } from "./LightningMenuTrigger";
 import { useActions, useWidgets, usePageId } from "./hooks";
 import { Theme, Skin } from "constants/DefaultTheme";
 import { withTheme } from "styled-components";
@@ -59,9 +59,8 @@ const lightningMenuOptions = (
 };
 
 type LightningMenuProps = {
-  isHover: boolean;
   isFocused: boolean;
-  isClosed: boolean;
+  isOpened: boolean;
   onSelect?: (value: string) => void;
   onOpenLightningMenu: () => void;
   onCloseLightningMenu?: () => void;
@@ -89,9 +88,8 @@ export const LightningMenu = (props: LightningMenuProps) => {
         <LightningMenuTrigger
           skin={props.skin}
           theme={props.theme}
-          isHover={props.isHover}
           isFocused={props.isFocused}
-          isClosed={props.isClosed}
+          isOpened={props.isOpened}
           onOpenLightningMenu={props.onOpenLightningMenu}
         />,
         props.onCloseLightningMenu,