fix: fix conflicts

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     ...fabric.default.rules,
     "no-restricted-syntax": "off",
     "no-plusplus": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/no-object-literal-type-assertion": "off",
   }
 };

package.json

@@ -29,7 +29,9 @@
     "pub:doc": "now --prod"
   },
   "dependencies": {
-    "react-use": "^10.6.2"
+    "react-use": "^10.6.2",
+
+    "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "antd": "^3.20.1",

src/index.ts

@@ -8,6 +8,7 @@ import useDynamicList from './useDynamicList';
 import useEventEmitter from './useEventEmitter';
 import useVirtualList from './useVirtualList';
 import { configResponsive, useResponsive } from './useResponsive';
+import useSize from './useSize';
 import useLocalStorageState from './useLocalStorageState';
 
 export {
@@ -22,6 +23,7 @@ export {
   useResponsive,
   useEventEmitter,
   useLocalStorageState,
+  useSize,
   configResponsive,
   configRequest,
 };

src/useAPI/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useAPI
 route: /useAPI
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useAntdTable/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useAntdTable
 route: /useAntdTable
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useAsync/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useAsync
 route: /useAsync
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useControlledValue/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useControlledValue
 route: /useControlledValue
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useControlledValue/index.ts

@@ -11,10 +11,7 @@ export interface Props {
   [key: string]: any;
 }
 
-export default function useControlledValue<T>(
-  props: Props = {},
-  options: Options = {},
-): [T, (v: T) => void] {
+export default function useControlledValue<T>(props: Props = {}, options: Options = {}) {
   const {
     defaultValuePropName = 'defaultValue',
     valuePropName = 'value',
@@ -55,5 +52,5 @@ export default function useControlledValue<T>(
     [props, valuePropName, trigger],
   );
 
-  return [state, handleSetState];
+  return [state, handleSetState] as const;
 }

src/useDynamicList/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useDynamicList
 route: /useDynamicList
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useEventEmitter/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useEventEmitter
 route: /useEventEmitter
+menu: '高阶 hooks'
 edit: false
 sidebar: true
 ---

src/useLoadMore/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useLoadMore
 route: /useLoadMore
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useLocalStorageState/index.ts

@@ -14,5 +14,5 @@ export default function useLocalStorageState<T extends string = string>(
       setState(value);
     }
   }
-  return [state, updateState] as [typeof state, typeof updateState];
+  return [state, updateState] as const;
 }

src/useResponsive/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useResponsive
 route: /useResponsive
+menu: '基础 hooks'
 edit: false
 sidebar: true
 ---

src/useSearch/index.mdx

@@ -1,6 +1,7 @@
 ---
 name: useSearch
 route: /useSearch
+menu: '中台 hooks'
 edit: false
 sidebar: true
 ---

src/useSize/__test__/index.test.ts

@@ -0,0 +1,22 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useSize from '../index';
+
+// test about Resize Observer see https://github.com/que-etc/resize-observer-polyfill/tree/master/tests
+describe('useSearch', () => {
+  it('should be defined', () => {
+    expect(useSize).toBeDefined();
+  });
+  it('without argument ', () => {
+    const hook = renderHook(() => useSize());
+    expect(hook.result.current.length).toEqual(2);
+    expect(hook.result.current[0].width).toEqual(0);
+    expect(hook.result.current[0].height).toEqual(0);
+    expect(hook.result.current[1].current).toEqual(undefined);
+  });
+  it('with argument', () => {
+    const hook = renderHook(() => useSize<HTMLBodyElement>(document.body));
+    expect(hook.result.current.length).toEqual(1);
+    expect(hook.result.current[0].width).toEqual(0);
+    expect(hook.result.current[0].height).toEqual(0);
+  });
+});

src/useSize/index.mdx

@@ -0,0 +1,93 @@
+---
+name: useSize
+route: /useSize
+menu: '基础 hooks'
+edit: false
+sidebar: true
+---
+
+import { Playground } from 'docz';
+import useSize from './index';
+
+# useSize
+
+一个用于监听 dom 节点尺寸变化的 Hook
+
+## 代码演示
+
+### 基本用法
+
+<Playground>
+{
+  () => {
+    function Demo() {
+      const [state, ref] = useSize()
+      return (
+        <div ref={ref}>
+          try to resize the preview window <br />
+          dimensions -- width: {state.width} px, height: {state.height} px
+        </div>
+      )
+    }
+    return <Demo />
+  }
+}
+</Playground>
+
+### 懒加载（用于监听同一组件内后渲染节点）
+
+<Playground>
+{
+  () => {
+    function Demo() {
+      const [state] = useSize(()=>document.querySelector('#demo2'))
+      return (
+        <div id='demo2'>
+          try to resize the preview window <br />
+          dimensions -- width: {state.width} px, height: {state.height} px
+        </div>
+      )
+    }
+    return <Demo />
+  }
+}
+</Playground>
+
+### 监听提前渲染节点
+
+<Playground>
+{
+  () => {
+    function Demo() {
+      const [state] = useSize(document.querySelector('body'));
+      return (
+        <div>
+          this demo is listening to body size change, try to resize the window instead <br />
+          dimensions -- width: {state.width} px, height: {state.height} px
+        </div>
+      )
+    }
+    return <Demo />
+  }
+}
+</Playground>
+
+## API
+
+```
+const [ state, ref? ] = useSize(dom);
+dom?: HTMLElement | (() => HTMLElement)
+```
+
+### 结果
+
+| 参数     | 说明                                     | 类型       |
+|----------|------------------------------------------|------------|
+| state  | dom 节点的尺寸                             | { width: number, height: number }    |
+| ref     | 当未传入任何参数时，将 ref 绑定给需监听的节点      | -        |
+
+### 参数
+
+| 参数    | 说明                                         | 类型                   | 默认值 |
+|---------|----------------------------------------------|------------------------|--------|
+| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |

src/useSize/index.ts

@@ -0,0 +1,44 @@
+import { useState, useRef, MutableRefObject, useLayoutEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+type Arg = HTMLElement | (() => HTMLElement) | null;
+
+type Size = { width: number; height: number };
+
+function useSize<T extends HTMLElement = HTMLElement>(): [Size, MutableRefObject<T>];
+function useSize<T extends HTMLElement = HTMLElement>(arg: Arg): [Size];
+function useSize<T extends HTMLElement = HTMLElement>(
+  ...args: [Arg] | []
+): [Size, MutableRefObject<T>?] {
+  const element = useRef<T>();
+  const [state, setState] = useState<Size>({ width: 0, height: 0 });
+  const hasPassedInElement = args.length === 1;
+  const arg = args[0];
+
+  useLayoutEffect(() => {
+    const passedInElement = typeof arg === 'function' ? arg() : arg;
+
+    const targetElement = hasPassedInElement ? passedInElement : element.current;
+    if (!targetElement) {
+      return () => {};
+    }
+
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        setState({ width: entry.target.clientWidth, height: entry.target.clientHeight });
+      });
+    });
+
+    resizeObserver.observe(targetElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [element.current, typeof arg === 'function' ? undefined : arg]);
+
+  if (hasPassedInElement) {
+    return [state];
+  }
+  return [state, element as MutableRefObject<T>];
+}
+
+export default useSize;