Refactor/resize (#324)

* refactor: add custom element observe

* test: supply Resize unit test

* docs: supply Resize component demos

Author: kongshan-zhuyu

src/resize/__tests__/index.test.tsx

@@ -1,42 +1,52 @@
 import React from 'react';
 import Resize from '../index';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-class Component extends React.PureComponent {
-    state = {
-        count: 0,
-    };
-    render() {
-        const { count } = this.state;
-        return (
-            <Resize onResize={() => this.setState({ count: count + 1 })}>
-                <div
-                    data-testid="test"
-                    style={{
-                        height: '240px',
-                        width: '100%',
-                    }}
-                >
-                    {count}
-                </div>
-            </Resize>
-        );
-    }
-}
-
-describe('test Resize', () => {
-    let wrapper: any, element: any;
+describe('Resize', () => {
+    let originalResizeObserver: typeof global.ResizeObserver;
     beforeEach(() => {
-        wrapper = render(<Component />);
-        element = wrapper.getByTestId('test');
+        originalResizeObserver = global.ResizeObserver;
+        global.ResizeObserver = class {
+            callback: any;
+            constructor(callback: any) {
+                this.callback = callback;
+            }
+            observe() {
+                this.callback();
+            }
+            unobserve() {}
+            disconnect() {}
+        };
     });
+
     afterEach(() => {
-        cleanup();
+        global.ResizeObserver = originalResizeObserver;
     });
-    test('should calculate current width', () => {
-        expect(element.firstChild).toMatchInlineSnapshot('0');
+
+    test('should render children', () => {
+        const { getByText } = render(<Resize>test</Resize>);
+        expect(getByText('test')).toBeInTheDocument();
+    });
+
+    test('should add resize event listener to window if observerEle is not provided', () => {
+        const onResize = jest.fn();
+        const { unmount } = render(<Resize onResize={onResize} />);
         fireEvent(window, new Event('resize'));
-        expect(element.firstChild).toMatchInlineSnapshot('1');
+
+        expect(onResize).toBeCalledTimes(1);
+        unmount();
+    });
+
+    test('should add resize observer to observerEle if observerEle is provided', () => {
+        const onResize = jest.fn();
+        const observerEle = document.createElement('div');
+        const { unmount } = render(<Resize onResize={onResize} observerEle={observerEle} />);
+        observerEle.style.width = '100px';
+        observerEle.style.height = '100px';
+        global.dispatchEvent(new Event('resize'));
+
+        expect(onResize).toHaveBeenCalled();
+        unmount();
     });
 });

src/resize/demos/basic.tsx

@@ -0,0 +1,21 @@
+import React, { useState, useCallback } from 'react';
+import { Resize } from 'dt-react-component';
+
+export default () => {
+    const [innerWidth, setInnerWidth] = useState(window.innerWidth);
+    const [innerHeight, setInnerHeight] = useState(window.innerHeight);
+
+    const onResize = useCallback(() => {
+        setInnerWidth(window.innerWidth);
+        setInnerHeight(window.innerHeight);
+    }, []);
+
+    return (
+        <Resize onResize={onResize}>
+            <div>
+                <pre>window高度: {innerWidth}</pre>
+                <pre>window宽度: {innerHeight}</pre>
+            </div>
+        </Resize>
+    );
+};

src/resize/demos/observerEle.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { Resize } from 'dt-react-component';
+
+export default () => {
+    const [clientWidth, setWidth] = useState(0);
+    const [clientHegiht, setHegiht] = useState(0);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const onResize = useCallback(() => {
+        setWidth(textareaRef.current!.clientWidth);
+        setHegiht(textareaRef.current!.clientHeight);
+    }, []);
+
+    return (
+        <Resize onResize={onResize} observerEle={textareaRef.current}>
+            <textarea
+                ref={textareaRef}
+                style={{
+                    resize: 'both',
+                    maxWidth: '100%',
+                }}
+            />
+            <pre>当前元素的可视宽: {clientWidth}</pre>
+            <pre>当前元素的可视宽: {clientHegiht}</pre>
+        </Resize>
+    );
+};

src/resize/index.md

@@ -8,51 +8,23 @@ demo:
 
 # Resize Resize 事件监听
 
+用于监听 window 或者是其他元素的尺寸变化
+
 ## 何时使用
 
 元素大小自适应调整，常用于图表
 
 ## 示例
 
-```jsx
-/**
- * title: "基础使用"
- * description: "请调整窗口大小以查看效果"
- */
-import React, { useState } from 'react';
-import { Resize } from 'dt-react-component';
-
-export default () => {
-    const [clientWidth, setWidth] = useState(0);
-
-    return (
-        <>
-            <Resize
-                onResize={() => {
-                    const box = document.getElementById('box');
-                    setWidth(box.clientWidth);
-                }}
-            >
-                <div
-                    id="box"
-                    style={{
-                        height: '240px',
-                        width: '100%',
-                        padding: '10px',
-                        border: '1px solid rgba(0,0,0,.1)',
-                    }}
-                >
-                    <pre>width: {clientWidth}</pre>
-                </div>
-            </Resize>
-        </>
-    );
-};
-```
+<code src="./demos/basic.tsx" description="请调整窗口大小以查看效果">基础使用</code>
+<code src="./demos/observerEle.tsx" description="请调整元素大小以查看效果，通过设置`observerEle`自定义监听元素">监听自定义元素</code>
 
 ## API
 
-| 参数     | 说明               | 类型              | 默认值 |
-| -------- | ------------------ | ----------------- | ------ |
-| onResize | 重置元素大小的函数 | `Function`        | -      |
-| children | 子元素             | `React.ReactNode` | -      |
+### Resize
+
+| 参数        | 说明                                     | 类型              | 默认值 |
+| ----------- | ---------------------------------------- | ----------------- | ------ |
+| children    | 子元素                                   | `React.ReactNode` | -      |
+| observerEle | 监听的元素,传入元素不存在默认监听 window | `HTMLElement`     | -      |
+| onResize    | 重置元素大小的函数                       | `() => void`      | -      |

src/resize/index.tsx

@@ -1,24 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export interface ResizeProps {
-    onResize?: Function;
+    observerEle?: HTMLElement | null;
     children?: React.ReactNode;
+    onResize?: () => void;
 }
-export default class Resize extends React.Component<ResizeProps, any> {
-    componentDidMount() {
-        window.addEventListener('resize', this.resize, false);
-    }
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.resize, false);
-    }
+const Resize: React.FC<ResizeProps> = ({ observerEle, onResize, children }) => {
+    useEffect(() => {
+        if (typeof onResize !== 'function') return;
+        if (!observerEle) {
+            window.addEventListener('resize', onResize, false);
+            return () => {
+                window.removeEventListener('resize', onResize, false);
+            };
+        } else {
+            const resizeObserver = new ResizeObserver(onResize);
+            resizeObserver.observe(observerEle);
+            return () => {
+                resizeObserver.unobserve(observerEle);
+            };
+        }
+    }, [onResize, observerEle]);
 
-    resize = () => {
-        const { onResize } = this.props;
-        if (onResize) onResize();
-    };
+    return <>{children}</>;
+};
 
-    render() {
-        return this.props.children;
-    }
-}
+export default Resize;