refactor: switchWindow to refactor as hooks (#327)

* refactor: switchWindow to refactor as hooks

* fix: change hooks to use && make sure event unique

* fix: fix test unit

---------

Co-authored-by: beier <[email protected]>

Author: shiqiWang0

src/index.ts

@@ -22,5 +22,5 @@ export { default as Resize } from './resize';
 export { default as SlidePane } from './slidePane';
 export { default as SpreadSheet } from './spreadSheet';
 export { default as StatusTag } from './statusTag';
-export { default as SwitchWindow } from './switchWindow';
+export { default as useWindowSwitchListener } from './switchWindow';
 export { default as useCookieListener } from './cookies';

src/switchWindow/__tests__/switchWindow.test.tsx

@@ -0,0 +1,21 @@
+import useWindowSwitchListener from '../index';
+import { cleanup, renderHook } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('test useWindowSwitchListener hooks', () => {
+    afterEach(() => {
+        cleanup();
+        jest.resetAllMocks();
+    });
+    test('test callBack to called', () => {
+        const fn = jest.fn();
+        renderHook(() =>
+            useWindowSwitchListener(() => {
+                fn();
+            })
+        );
+        window.dispatchEvent(new Event('focus'));
+        expect(fn).toHaveBeenCalled();
+        expect(fn).toHaveBeenCalledTimes(1);
+    });
+});

src/switchWindow/demos/basic.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { useWindowSwitchListener } from 'dt-react-component';
+
+export default () => {
+    const [msg, setMsg] = useState('hello world');
+    const handleSwitch = () => {
+        setMsg('window listener');
+        console.log('window listener');
+    };
+    useWindowSwitchListener(() => {
+        handleSwitch();
+    });
+
+    return (
+        <div
+            style={{
+                height: '100%',
+                width: '100%',
+            }}
+        >
+            {msg}
+        </div>
+    );
+};

src/switchWindow/index.md

@@ -1,51 +1,20 @@
 ---
-title: SwitchWindow 窗口切换事件监听
+title: useWindowSwitchListener 监听窗口触发焦点事件
 group: 组件
 toc: content
 demo:
     cols: 2
 ---
 
-# SwitchWindow 窗口切换事件监听
+# useWindowSwitchListener 监听窗口触发焦点事件
 
 ## 何时使用
 
-窗口切换事件监听
+监听当前窗口获取焦点时，执行某个回调时使用
 
 ## 示例
 
-```jsx
-/**
- * title: "基础使用"
- */
-import React, { useState } from 'react';
-import { SwitchWindow } from 'dt-react-component';
-
-export default () => {
-    const [msg, setMsg] = useState('hello world');
-
-    return (
-        <>
-            <SwitchWindow
-                onSwitch={() => {
-                    setMsg('window listener');
-                    console.log('window listener');
-                }}
-            >
-                <div
-                    id="box"
-                    style={{
-                        height: '100%',
-                        width: '100%',
-                    }}
-                >
-                    {msg}
-                </div>
-            </SwitchWindow>
-        </>
-    );
-};
-```
+<code src='./demos/basic.tsx' title='基础使用'></code>
 
 ## API
 

src/switchWindow/index.tsx

@@ -1,36 +1,25 @@
-import React from 'react';
-export interface SwitchWindowProps {
-    onSwitch?: (evt) => void;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-}
-/**
- * 窗口切换事件监听，
- * 用法：
- * <SwitchWindow onSwitch={}></SwitchWindow>
- */
-class SwitchWindow extends React.Component<SwitchWindowProps, any> {
-    componentDidMount() {
-        this.initEvent();
-    }
+import { useCallback, useEffect } from 'react';
 
-    listener = (e: any) => {
-        const { onSwitch } = this.props;
-        console.log('switch window is focusing!', window.location);
-        if (onSwitch) onSwitch(e);
+const useWindowSwitchListener = (onSwitch: (evt: FocusEvent) => void) => {
+    useEffect(() => {
+        const eventListener = (e: FocusEvent) => listener(e);
+        handleAddListener(eventListener);
+        return () => {
+            handleRemoveListener(eventListener);
+        };
+    }, []);
+    const listener = useCallback(
+        (e: FocusEvent) => {
+            return onSwitch(e);
+        },
+        [onSwitch]
+    );
+    const handleAddListener = (eventListener: (e: FocusEvent) => void) => {
+        window.addEventListener('focus', eventListener);
     };
-
-    componentWillUnmount() {
-        window.removeEventListener('focus', this.listener);
-    }
-
-    initEvent = () => {
-        window.addEventListener('focus', this.listener);
+    const handleRemoveListener = (eventListener: (e: FocusEvent) => void) => {
+        window.removeEventListener('focus', eventListener);
     };
+};
 
-    render() {
-        return <React.Fragment>{this.props.children}</React.Fragment>;
-    }
-}
-
-export default SwitchWindow;
+export default useWindowSwitchListener;