feat: support for array as event parameter in useEventListener (#2598)

* style: change the default import to import on demand * feat: support for array as event parameter in useEventListener * feat: review后修改 --------- Co-authored-by: lxr <1076629390@qq.com>
alibaba · Aug 21, 2024 · eb700b9 · eb700b9
1 parent 7947903
commit eb700b9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 19 deletions.
diff --git a/packages/hooks/src/useEventListener/__tests__/index.test.ts b/packages/hooks/src/useEventListener/__tests__/index.test.ts
@@ -32,6 +32,34 @@ describe('useEventListener', () => {
     expect(state).toBe(1);
   });
 
+  it('test on event list listener', async () => {
+    let state: number = 0;
+    const onClick = () => {
+      state++;
+    };
+    const onKeydown = () => {
+      state++;
+    };
+    const { rerender, unmount } = renderHook(
+      () => (
+        useEventListener('click', onClick, { target: () => container }),
+        useEventListener('keydown', onKeydown, { target: () => container })
+      ),
+    );
+
+    document.body.click();
+    document.body.dispatchEvent(new KeyboardEvent('keydown'));
+    expect(state).toBe(0);
+    rerender();
+    container.click();
+    container.dispatchEvent(new KeyboardEvent('keydown'));
+    expect(state).toBe(2);
+    unmount();
+    document.body.click();
+    document.body.dispatchEvent(new KeyboardEvent('keydown'));
+    expect(state).toBe(2);
+  });
+
   it('test "enable" parameter', () => {
     let state = 0;
     let enable = true;

diff --git a/packages/hooks/src/useEventListener/demo/demo3.tsx b/packages/hooks/src/useEventListener/demo/demo3.tsx
@@ -0,0 +1,29 @@
+/**
+ * title: Listen to multiple events.
+ * desc: Mouse hover or over the button to preview.
+ *
+ * title.zh-CN: 监听多个事件
+ * desc.zh-CN: 鼠标移入移出按钮查看效果。
+ */
+
+import React, { useRef, useState } from 'react';
+import { useEventListener } from 'ahooks';
+
+export default () => {
+  const ref = useRef(null);
+  const [value, setValue] = useState('');
+
+  useEventListener(
+    ['mouseenter', 'mouseleave'],
+    (ev) => {
+      setValue(ev.type);
+    },
+    { target: ref },
+  );
+
+  return (
+    <button ref={ref} type="button">
+      You Option is {value}
+    </button>
+  );
+};
diff --git a/packages/hooks/src/useEventListener/index.en-US.md b/packages/hooks/src/useEventListener/index.en-US.md
@@ -17,6 +17,10 @@ Use addEventListener elegant by Hook.
 
 <code src="./demo/demo2.tsx" />
 
+### Listen for multiple events
+
+<code src="./demo/demo3.tsx" />
+
 ## API
 
 ```typescript
@@ -29,11 +33,11 @@ useEventListener(
 
 ### Property
 
-| Property  | Description            | type                  | default |
-| --------- | ---------------------- | --------------------- | ------- |
-| eventName | Event name             | `string`              | -       |
-| handler   | Callback function      | `(ev: Event) => void` | -       |
-| options   | More options(optional) | `Options`             | -       |
+| Property  | Description            | type                   | default |
+| --------- | ---------------------- | ---------------------- | ------- |
+| eventName | Event name             | `string` \| `string[]` | -       |
+| handler   | Callback function      | `(ev: Event) => void`  | -       |
+| options   | More options(optional) | `Options`              | -       |
 
 ### Options
 

diff --git a/packages/hooks/src/useEventListener/index.ts b/packages/hooks/src/useEventListener/index.ts
@@ -36,13 +36,13 @@ function useEventListener<K extends keyof WindowEventMap>(
   options?: Options<Window>,
 ): void;
 function useEventListener(
-  eventName: string,
+  eventName: string | string[],
   handler: (event: Event) => void,
   options?: Options<Window>,
 ): void;
-function useEventListener(eventName: string, handler: noop, options: Options): void;
+function useEventListener(eventName: string | string[], handler: noop, options: Options): void;
 
-function useEventListener(eventName: string, handler: noop, options: Options = {}) {
+function useEventListener(eventName: string | string[], handler: noop, options: Options = {}) {
   const { enable = true } = options;
 
   const handlerRef = useLatest(handler);
@@ -62,15 +62,21 @@ function useEventListener(eventName: string, handler: noop, options: Options = {
         return handlerRef.current(event);
       };
 
-      targetElement.addEventListener(eventName, eventListener, {
-        capture: options.capture,
-        once: options.once,
-        passive: options.passive,
+      const eventNameArray = Array.isArray(eventName) ? eventName : [eventName];
+
+      eventNameArray.forEach((event) => {
+        targetElement.addEventListener(event, eventListener, {
+          capture: options.capture,
+          once: options.once,
+          passive: options.passive,
+        });
       });
 
       return () => {
-        targetElement.removeEventListener(eventName, eventListener, {
-          capture: options.capture,
+        eventNameArray.forEach((event) => {
+          targetElement.removeEventListener(event, eventListener, {
+            capture: options.capture,
+          });
         });
       };
     },

diff --git a/packages/hooks/src/useEventListener/index.zh-CN.md b/packages/hooks/src/useEventListener/index.zh-CN.md
@@ -17,6 +17,10 @@ nav:
 
 <code src="./demo/demo2.tsx" />
 
+### 监听多个事件
+
+<code src="./demo/demo3.tsx" />
+
 ## API
 
 ```typescript
@@ -29,11 +33,11 @@ useEventListener(
 
 ### Params
 
-| 参数      | 说明       | 类型                  | 默认值 |
-| --------- | ---------- | --------------------- | ------ |
-| eventName | 事件名称   | `string`              | -      |
-| handler   | 处理函数   | `(ev: Event) => void` | -      |
-| options   | 设置(可选) | `Options`             | -      |
+| 参数      | 说明       | 类型                   | 默认值 |
+| --------- | ---------- | ---------------------- | ------ |
+| eventName | 事件名称   | `string` \| `string[]` | -      |
+| handler   | 处理函数   | `(ev: Event) => void`  | -      |
+| options   | 设置(可选) | `Options`              | -      |
 
 ### Options