lightning menu changes merged

app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx

@@ -251,10 +251,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%;
@@ -270,6 +273,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
+              : ""};
+        }
+      }
+    }
   }
 `;
 
@@ -314,7 +336,6 @@ type Props = ReduxStateProps &
 
 type State = {
   isFocused: boolean;
-  isHover: boolean;
   isOpened: boolean;
   autoCompleteVisible: boolean;
 };
@@ -328,7 +349,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     super(props);
     this.state = {
       isFocused: false,
-      isHover: false,
       isOpened: false,
       autoCompleteVisible: false,
     };
@@ -596,20 +616,18 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     }
     return (
       <DynamicAutocompleteInputWrapper
-        onMouseOver={this.onMouseOver}
-        onMouseOut={this.onMouseOut}
         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 });
               }}

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,77 +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") {
-    //   console.log(
-    //     "isHover, isFocused, isClosed",
-    //     isHover,
-    //     isFocused,
-    //     isClosed,
-    //     menuState,
-    //   );
-    // }
-    if (menuState === "none" && isHover) {
-      this.setState({ menuState: "hover" });
-    } else if (
-      (menuState === "active" && isFocused) ||
-      (menuState === "none" && isFocused)
-    ) {
-      this.setState({ menuState: "default" });
-    } else if (
-      (menuState === "default" && !isFocused) ||
-      (menuState === "hover" && !isHover) ||
-      (menuState === "active" && isClosed) ||
-      (menuState !== "none" && !isHover && !isFocused && isClosed)
-    ) {
-      this.setState({ menuState: "none" });
+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>
+  );
+};

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,