contextmenu Esc 可关闭

scss/components/_context-menu.scss

@@ -41,8 +41,7 @@
     box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);
 
     color: rgba(0, 0, 0, 0.75);
-    font-family: -apple-system,
-    Lucida Grande;
+    font-family: -apple-system, Lucida Grande;
     font-size: 14px;
     line-height: 15px;
 
@@ -79,7 +78,7 @@
   &-item {
     position: relative;
 
-    >a {
+    > a {
       white-space: nowrap;
       display: block;
       padding: 0 20px;
@@ -88,7 +87,7 @@
       color: inherit;
     }
 
-    &:not(.is-disabled):hover>a {
+    &:not(.is-disabled):hover > a {
       text-decoration: none;
       color: #fff;
       background: -webkit-linear-gradient(top, #648bf5, #2866f2);
@@ -98,12 +97,12 @@
       cursor: pointer;
     }
 
-    &.is-disabled>a {
+    &.is-disabled > a {
       color: #999;
       pointer-events: none;
     }
 
-    &.has-child>a::after {
+    &.has-child > a::after {
       content: '';
       width: 0;
       height: 0;
@@ -117,17 +116,21 @@
       transform: translateY(-50%);
     }
 
-    &.has-child:hover>a::after {
+    &.has-child:hover > a::after {
       border-color: transparent transparent transparent #fff;
     }
   }
 
+  &-itemIcon {
+    margin-right: 5px;
+  }
+
   &-subList {
     display: none;
     list-style: none;
   }
 
-  &-item:hover>&-subList {
+  &-item:hover > &-subList {
     display: block;
     animation-duration: 0.35s;
     animation-fill-mode: both;
@@ -165,7 +168,7 @@
     }
   }
 
-  &--left &-item:hover>&-subList {
+  &--left &-item:hover > &-subList {
     left: auto;
     right: 100%;
   }
@@ -179,4 +182,4 @@
     bottom: 0;
     background: transparent;
   }
-}
+}

src/components/ContextMenu.tsx

@@ -73,11 +73,13 @@ export class ContextMenu extends React.Component<
 
   componentDidMount() {
     document.body.addEventListener('click', this.handleOutClick, true);
+    document.addEventListener('keyup', this.handleKeyUp);
   }
 
   componentWillUnmount() {
     ContextMenu.instance = null;
     document.body.removeEventListener('click', this.handleOutClick, true);
+    document.removeEventListener('keyup', this.handleKeyUp);
   }
 
   @autobind
@@ -140,6 +142,14 @@ export class ContextMenu extends React.Component<
       );
   }
 
+  @autobind
+  handleKeyUp(e: KeyboardEvent) {
+    if (e.keyCode === 27 && this.state.isOpened) {
+      e.preventDefault();
+      this.close();
+    }
+  }
+
   handleMouseEnter(item: MenuItem) {
     item.disabled || !item.onHighlight || item.onHighlight(true, item.data);
   }
@@ -170,7 +180,9 @@ export class ContextMenu extends React.Component<
             onMouseEnter={this.handleMouseEnter.bind(this, item)}
             onMouseLeave={this.handleMouseLeave.bind(this, item)}
           >
-            {item.icon ? <span className={item.icon} /> : null}
+            {item.icon ? (
+              <span className={cx('ContextMenu-itemIcon', item.icon)} />
+            ) : null}
             {item.label}
           </a>
           {hasChildren ? (