From dfaf32f6cc7de47b0f4c25b023ab13fbcad4bd91 Mon Sep 17 00:00:00 2001 From: eternallycyf <969475322@qq.com> Date: Sun, 1 Oct 2023 11:37:40 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(hooks):=20remove=20useResize?= =?UTF-8?q?=20and=20useResizeEffect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/hooks/useResize.md | 51 --------------------------- docs/hooks/useResizeEffect.md | 50 -------------------------- packages/hooks/src/index.ts | 2 -- packages/hooks/src/useResize.ts | 47 ------------------------ packages/hooks/src/useResizeEffect.ts | 29 --------------- 5 files changed, 179 deletions(-) delete mode 100644 docs/hooks/useResize.md delete mode 100644 docs/hooks/useResizeEffect.md delete mode 100644 packages/hooks/src/useResize.ts delete mode 100644 packages/hooks/src/useResizeEffect.ts diff --git a/docs/hooks/useResize.md b/docs/hooks/useResize.md deleted file mode 100644 index 2e78162..0000000 --- a/docs/hooks/useResize.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: useResize -order: 8 ---- - -## useResize - -```ts -import React, { useEffect } from 'react'; - -const map = new WeakMap(); -const ob = new ResizeObserver((entries) => { - for (const entry of entries) { - const { width, height } = entry.contentRect; - const handler = map.get(entry.target); - if (handler) { - handler(entry, { width, height }); - } - } -}); - -interface IProps { - node: React.RefObject; - cb: (entry: ResizeObserverEntry, size: { width: number; height: number }) => void; -} - -const useResize = (props: IProps) => { - const { node, cb } = props; - useEffect(() => { - ob.observe(node.current); - map.set(node.current, cb); - return () => { - ob.unobserve(node.current); - }; - }, []); -}; - -export default useResize; -``` - -## Params - -| 属性 | 说明 | 类型 | 默认值 | -| ---- | ---- | ------------------------------------------------------------------------------- | ------ | -| node | 节点 | `React.RefObject` | - | -| cb | 回调 | `(entry: ResizeObserverEntry, size: { width: number; height: number }) => void` | - | - -## Result - -| 属性 | 说明 | 类型 | -| ---- | ---- | ---- | diff --git a/docs/hooks/useResizeEffect.md b/docs/hooks/useResizeEffect.md deleted file mode 100644 index 1e9f3db..0000000 --- a/docs/hooks/useResizeEffect.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: useResizeEffect -order: 9 ---- - -## useResizeEffect - -```ts -import { RefObject } from 'react'; -import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; -import useMemoizedFn from './useMemoizedFn'; - -const useResizeEffect = ( - effect: (target: T) => void, - targetRef: RefObject, -) => { - const fn = useMemoizedFn(effect); - useIsomorphicLayoutEffect(() => { - const target = targetRef.current; - if (!target) return; - if (window.ResizeObserver) { - let animationFrame: number; - const observer = new ResizeObserver(() => { - animationFrame = window.requestAnimationFrame(() => fn(target)); - }); - observer.observe(target); - return () => { - window.cancelAnimationFrame(animationFrame); - observer.disconnect(); - }; - } else { - fn(target); - } - }, [targetRef]); -}; - -export default useResizeEffect; -``` - -## Params - -| 属性 | 说明 | 类型 | 默认值 | -| --------- | -------------- | -------------- | ------ | -| target | 目标元素 | `RefObject` | - | -| targetRef | 目标元素的 ref | `RefObject` | - | - -## Result - -| 属性 | 说明 | 类型 | -| ---- | ---- | ---- | diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index b2ffa6e..4f106b7 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -5,8 +5,6 @@ export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffec export { default as useMemoizedFn } from './useMemoizedFn'; export { default as useOverFlowScroll } from './useOverFlowScroll'; export { default as usePatchElement } from './usePatchElement'; -export { default as useResize } from './useResize'; -export { default as useResizeEffect } from './useResizeEffect'; export { default as useStateCallback } from './useStateCallback'; export { default as useSyncState } from './useSyncState'; export { default as useVirtualList } from './useVirtualList'; diff --git a/packages/hooks/src/useResize.ts b/packages/hooks/src/useResize.ts deleted file mode 100644 index d6a1710..0000000 --- a/packages/hooks/src/useResize.ts +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useEffect } from 'react'; - -const map = new WeakMap(); -const ob = new ResizeObserver((entries) => { - for (const entry of entries) { - const { width, height } = entry.contentRect; - const handler = map.get(entry.target); - if (handler) { - handler(entry, { width, height }); - } - } -}); - -interface IProps { - node: React.RefObject; - cb: (entry: ResizeObserverEntry, size: { width: number; height: number }) => void; -} - -const useResize = (props: IProps) => { - const { node, cb } = props; - useEffect(() => { - ob.observe(node.current); - map.set(node.current, cb); - return () => { - ob.unobserve(node.current); - }; - }, []); -}; - -export default useResize; - -// import useResize from './useResize'; -// import React, { useRef } from 'react'; -// const handelChange = (e, w) => { -// console.log(e, w); -// }; - -// const IndexPage = () => { -// const node = useRef(null); -// const result = useResize({ node, cb: handelChange }); - -// return ( -//
sad
-// ); -// }; - -// export default IndexPage; diff --git a/packages/hooks/src/useResizeEffect.ts b/packages/hooks/src/useResizeEffect.ts deleted file mode 100644 index a169e3f..0000000 --- a/packages/hooks/src/useResizeEffect.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { RefObject } from 'react'; -import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; -import useMemoizedFn from './useMemoizedFn'; - -const useResizeEffect = ( - effect: (target: T) => void, - targetRef: RefObject, -) => { - const fn = useMemoizedFn(effect); - useIsomorphicLayoutEffect(() => { - const target = targetRef.current; - if (!target) return; - if (window.ResizeObserver) { - let animationFrame: number; - const observer = new ResizeObserver(() => { - animationFrame = window.requestAnimationFrame(() => fn(target)); - }); - observer.observe(target); - return () => { - window.cancelAnimationFrame(animationFrame); - observer.disconnect(); - }; - } else { - fn(target); - } - }, [targetRef]); -}; - -export default useResizeEffect;