From 8185cf7a6343e588cb73eeda3ccb4e87da91c757 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Tue, 19 Nov 2019 18:59:06 +0800
Subject: [PATCH] =?UTF-8?q?contextmenu=20=E6=94=AF=E6=8C=81=20hover=20?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_context-menu.scss |  1 +
 src/components/ContextMenu.tsx     | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/scss/components/_context-menu.scss b/scss/components/_context-menu.scss
index c7e220f9..1fc823a5 100644
--- a/scss/components/_context-menu.scss
+++ b/scss/components/_context-menu.scss
@@ -93,6 +93,7 @@
       background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);
       border-top: 1px solid #5a82eb;
       border-bottom: 1px solid #1758e7;
+      cursor: pointer;
     }
 
     &.is-disabled > a {
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index d810f695..b4136464 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -30,6 +30,7 @@ export type MenuItem = {
   children?: Array<MenuItem | MenuDivider>;
   data?: any;
   onSelect?: (data: any) => void;
+  onHighlight?: (isHiglight: boolean, data: any) => void;
 };
 
 export type MenuDivider = '|';
@@ -124,6 +125,14 @@ export class ContextMenu extends React.Component<
       );
   }
 
+  handleMouseEnter(item: MenuItem) {
+    item.disabled || !item.onHighlight || item.onHighlight(true, item.data);
+  }
+
+  handleMouseLeave(item: MenuItem) {
+    item.disabled || !item.onHighlight || item.onHighlight(false, item.data);
+  }
+
   renderMenus(menus: Array<MenuItem | MenuDivider>) {
     const {classnames: cx} = this.props;
 
@@ -141,7 +150,11 @@ export class ContextMenu extends React.Component<
             'is-disabled': item.disabled
           })}
         >
-          <a onClick={this.handleClick.bind(this, item)}>
+          <a
+            onClick={this.handleClick.bind(this, item)}
+            onMouseEnter={this.handleMouseEnter.bind(this, item)}
+            onMouseLeave={this.handleMouseLeave.bind(this, item)}
+          >
             {item.icon ? <span className={item.icon} /> : null}
             {item.label}
           </a>