feat: support close popups by escape key

Author: aojunhao123

src/hooks/useEscCancel.ts

@@ -0,0 +1,89 @@
+import useEvent from '@rc-component/util/lib/hooks/useEvent';
+import * as React from 'react';
+import { getWin } from '../util';
+
+interface EscEntry {
+  id: string;
+  win: Window;
+  triggerOpen: (open: boolean) => void;
+}
+
+const stackMap = new Map<Window, EscEntry[]>();
+const handlerMap = new Map<Window, (event: KeyboardEvent) => void>();
+
+function addEscListener(win: Window) {
+  if (handlerMap.has(win)) {
+    return;
+  }
+
+  const handler = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    const stack = stackMap.get(win);
+
+    const top = stack[stack.length - 1];
+    top.triggerOpen(false);
+  };
+
+  win.addEventListener('keydown', handler);
+  handlerMap.set(win, handler);
+}
+
+function removeEscListener(win: Window) {
+  const handler = handlerMap.get(win);
+  win.removeEventListener('keydown', handler);
+  handlerMap.delete(win);
+}
+
+function unregisterEscEntry(id: string, win: Window) {
+  const stack = stackMap.get(win);
+  if (!stack) {
+    return;
+  }
+
+  const next = stack.filter((item) => item.id !== id);
+
+  if (next.length) {
+    stackMap.set(win, next);
+  } else {
+    stackMap.delete(win);
+    removeEscListener(win);
+  }
+}
+
+function registerEscEntry(entry: EscEntry) {
+  const { win, id } = entry;
+  const prev = stackMap.get(win) || [];
+  const next = prev.filter((item) => item.id !== id);
+  next.push(entry);
+  stackMap.set(win, next);
+  addEscListener(win);
+}
+
+export default function useEscCancel(
+  popupId: string,
+  open: boolean,
+  popupEle: HTMLElement,
+  triggerOpen: (open: boolean) => void,
+) {
+  const memoTriggerOpen = useEvent((nextOpen: boolean) => {
+    triggerOpen(nextOpen);
+  });
+
+  React.useEffect(() => {
+    if (!open || !popupEle) {
+      return;
+    }
+
+    const win = getWin(popupEle);
+    registerEscEntry({
+      id: popupId,
+      win,
+      triggerOpen: memoTriggerOpen,
+    });
+
+    return () => unregisterEscEntry(popupId, win);
+  }, [popupId, open, popupEle, memoTriggerOpen]);
+}

src/index.tsx

@@ -16,6 +16,7 @@ import useAlign from './hooks/useAlign';
 import useDelay from './hooks/useDelay';
 import useWatch from './hooks/useWatch';
 import useWinClick from './hooks/useWinClick';
+import useEscCancel from './hooks/useEscCancel';
 import type {
   ActionType,
   AlignType,
@@ -647,6 +648,8 @@ export function generateTrigger(
       triggerOpen,
     );
 
+    useEscCancel(id, mergedOpen, popupEle, triggerOpen);
+
     // ======================= Action: Hover ========================
     const hoverToShow = showActions.has('hover');
     const hoverToHide = hideActions.has('hover');

tests/basic.test.jsx

@@ -1200,4 +1200,72 @@ describe('Trigger.Basic', () => {
     await awaitFakeTimer();
     expect(isPopupHidden()).toBeTruthy();
   });
+
+  describe('keyboard', () => {
+    it('esc should close popup', async () => {
+      const { container } = render(
+        <Trigger action="click" popup={<strong>trigger</strong>}>
+          <div className="target" />
+        </Trigger>,
+      );
+
+      trigger(container, '.target');
+      expect(isPopupHidden()).toBeFalsy();
+
+      fireEvent.keyDown(window, { key: 'Escape' });
+      await awaitFakeTimer();
+      expect(isPopupHidden()).toBeTruthy();
+    });
+
+    it('esc should close nested popup from inside out', async () => {
+      const useIdModule = require('@rc-component/util/lib/hooks/useId');
+      let seed = 0;
+      const useIdSpy = jest
+        .spyOn(useIdModule, 'default')
+        .mockImplementation(() => `nested-popup-${(seed += 1)}`);
+
+      try {
+        const NestedPopup = () => (
+          <Trigger
+            action="click"
+            popupClassName="inner-popup"
+            popup={<div>Inner Content</div>}
+          >
+            <button type="button" className="inner-target">
+              Inner Target
+            </button>
+          </Trigger>
+        );
+
+        const { container } = render(
+          <Trigger
+            action="click"
+            popupClassName="outer-popup"
+            popup={
+              <div className="outer-popup-content">
+                <NestedPopup />
+              </div>
+            }
+          >
+            <div className="outer-target" />
+          </Trigger>,
+        );
+
+        trigger(container, '.outer-target');
+        expect(isPopupClassHidden('.outer-popup')).toBeFalsy();
+
+        fireEvent.click(document.querySelector('.inner-target'));
+        expect(isPopupClassHidden('.inner-popup')).toBeFalsy();
+
+        fireEvent.keyDown(window, { key: 'Escape' });
+        expect(isPopupClassHidden('.inner-popup')).toBeTruthy();
+        expect(isPopupClassHidden('.outer-popup')).toBeFalsy();
+
+        fireEvent.keyDown(window, { key: 'Escape' });
+        expect(isPopupClassHidden('.outer-popup')).toBeTruthy();
+      } finally {
+        useIdSpy.mockRestore();
+      }
+    });
+  });
 });