feat(react): 新增 useWindowSize

src/react/index.ts

@@ -8,7 +8,7 @@
 
 export * from 'react-use'
 
-// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle,useInterval,useSearchParam,useLocalStorage}.*'], f => `export * from '${f.path}'`)
+// @index(['./**/*.ts', '!./**/*.{test,taro}.*', '!./{useToggle,createGlobalState,useTitle,useInterval,useSearchParam,useLocalStorage,useWindowSize}.*'], f => `export * from '${f.path}'`)
 export * from './useClassName'
 export * from './useLoadMore'
 export * from './useReachBottom'
@@ -29,3 +29,4 @@ export { useTitle } from './useTitle'
 export { useInterval, UseIntervalResult } from './useInterval'
 export { useSearchParam } from './useSearchParam'
 export { useLocalStorage, UseLocalStorageResult } from './useLocalStorage'
+export { useWindowSize } from './useWindowSize'

src/react/useWindowSize.taro.test.ts

@@ -0,0 +1,59 @@
+import * as Taro from '@tarojs/taro'
+import { AnyFunction } from '../types'
+import { renderHook } from '@testing-library/react-hooks'
+
+describe('useWindowSize.taro', () => {
+  const getSystemInfoSync: any = jest.fn().mockImplementation(() => ({
+    model: 'iPhone 5',
+    pixelRatio: 2,
+    windowWidth: 320,
+    windowHeight: 520,
+    system: 'iOS 10.0.1',
+    language: 'zh_CN',
+    version: '7.0.4',
+    screenWidth: 320,
+    screenHeight: 568,
+    SDKVersion: '2.8.0',
+    brand: 'devtools',
+    fontSizeSetting: 16,
+    batteryLevel: 100,
+    statusBarHeight: 20,
+    safeArea: {
+      right: 320,
+      bottom: 568,
+      left: 0,
+      top: 20,
+      width: 320,
+      height: 548,
+    },
+    deviceOrientation: 'portrait',
+    platform: 'devtools',
+  }))
+  const onWindowResize: AnyFunction = jest.fn()
+  const offWindowResize: AnyFunction = jest.fn()
+
+  beforeAll(() => {
+    jest.mock(
+      '@tarojs/taro',
+      () =>
+        ({
+          getSystemInfoSync: getSystemInfoSync,
+          onWindowResize: onWindowResize,
+          offWindowResize: offWindowResize,
+        } as typeof Taro),
+    )
+  })
+
+  test('表现正常', async () => {
+    const { useWindowSize } = await import('./useWindowSize.taro')
+    const { result } = renderHook(() => useWindowSize())
+
+    expect(getSystemInfoSync).toBeCalled().toBeCalledTimes(1)
+    expect(onWindowResize).toBeCalled().toBeCalledTimes(1)
+
+    expect(result.current).toEqual({
+      width: 320,
+      height: 520,
+    })
+  })
+})

src/react/useWindowSize.taro.ts

@@ -0,0 +1,31 @@
+import { useWindowSize as _useWindowSize } from './useWindowSize'
+import {
+  getSystemInfoSync,
+  offWindowResize,
+  onWindowResize,
+} from '@tarojs/taro'
+import { useEffect, useState } from 'react'
+
+const getWindowSize = function (): ReturnType<typeof _useWindowSize> {
+  const { windowWidth: width, windowHeight: height } = getSystemInfoSync()
+  return { width, height }
+}
+
+export const useWindowSize: typeof _useWindowSize = function (
+  // 不支持
+  _initialWidth,
+  // 不支持
+  _initialHeight,
+) {
+  const [size, setSize] = useState(getWindowSize)
+  useEffect(() => {
+    const getWindowSizeCallback = () => {
+      setSize(getWindowSize())
+    }
+    onWindowResize?.(getWindowSizeCallback)
+    return () => {
+      offWindowResize?.(getWindowSizeCallback)
+    }
+  }, [])
+  return size
+}

src/react/useWindowSize.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { useWindowSize } from 'react-use'