From c50e6a64213bdbbd9f019949616ff292d178b391 Mon Sep 17 00:00:00 2001 From: coderluojz <929747115@qq.com> Date: Tue, 28 Feb 2023 18:27:20 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E8=81=9A=E7=84=A6=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/hooks/src/useInViewport/demo/demo3.tsx | 16 +++++++++------- packages/hooks/src/useInViewport/index.en-US.md | 3 +-- packages/hooks/src/useInViewport/index.ts | 17 ++++++++--------- packages/hooks/src/useInViewport/index.zh-CN.md | 11 +++++------ 4 files changed, 23 insertions(+), 24 deletions(-) diff --git a/packages/hooks/src/useInViewport/demo/demo3.tsx b/packages/hooks/src/useInViewport/demo/demo3.tsx index 5acb54db12..68ef9c8f28 100644 --- a/packages/hooks/src/useInViewport/demo/demo3.tsx +++ b/packages/hooks/src/useInViewport/demo/demo3.tsx @@ -3,10 +3,10 @@ * desc: Pass in 'callback', you can customize the control to trigger the event when the visible area reaches this proportion. In this example, scroll to the element area and select the corresponding menu. * * title.zh-CN: 监听内容滚动选中菜单 - * desc.zh-CN: 传入 `callback`, 可以自定义控制在可见区域达到该比例时触发事件，在这个例子中，滚动到元素区域中选中对应菜单。 + * desc.zh-CN: 传入 `callback`, 可以自定义控制在可视区域达到该比例时触发事件，在这个例子中，滚动到元素区域中选中对应菜单。 */ -import React, { useRef, useState } from 'react'; import { useInViewport } from 'ahooks'; +import React, { useRef, useState } from 'react'; const menus = ['menu-1', 'menu-2', 'menu-3']; const content = { @@ -20,11 +20,13 @@ export default () => { const [activeMenu, setActiveMenu] = useState(menus[0]); - useInViewport(menuRef.current, { threshold: 0.1 }, (entry) => { - if (entry.isIntersecting) { - const active = entry.target.getAttribute('id') || ''; - setActiveMenu(active); - } + useInViewport(menuRef.current, { + callback: (entry) => { + if (entry.isIntersecting) { + const active = entry.target.getAttribute('id') || ''; + setActiveMenu(active); + } + }, }); const handleMenuClick = (menu) => { diff --git a/packages/hooks/src/useInViewport/index.en-US.md b/packages/hooks/src/useInViewport/index.en-US.md index 6637b55f63..1b6db8e0e8 100644 --- a/packages/hooks/src/useInViewport/index.en-US.md +++ b/packages/hooks/src/useInViewport/index.en-US.md @@ -27,7 +27,6 @@ Observe whether the element is in the visible area, and the visible area ratio o const [inViewport, ratio] = useInViewport( target, options?: Options - callback?: (entry: IntersectionObserverEntry) => void ); ``` @@ -37,7 +36,6 @@ const [inViewport, ratio] = useInViewport( | -------- | ------------------ | ----------------------------------------------------------- | ------- | | target | DOM element or ref | `Element` \| `() => Element` \| `MutableRefObject` | - | | options | Setting | `Options` | - | -| callback | Callback | `(entry: IntersectionObserverEntry) => void` | - | ### Options @@ -48,6 +46,7 @@ More information refer to [Intersection Observer API](https://developer.mozilla. | threshold | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the ratio should be executed | `number` \| `number[]` | - | | rootMargin | Margin around the root | `string` | - | | root | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. | `Element` \| `Document` \| `() => (Element/Document)` \| `MutableRefObject` | - | +| callback | You can customize the control to trigger the event when the visual area reaches this ratio | `(entry: IntersectionObserverEntry) => void` | - | ### Result diff --git a/packages/hooks/src/useInViewport/index.ts b/packages/hooks/src/useInViewport/index.ts index d9a1899068..851a549fc7 100644 --- a/packages/hooks/src/useInViewport/index.ts +++ b/packages/hooks/src/useInViewport/index.ts @@ -4,19 +4,16 @@ import type { BasicTarget } from '../utils/domTarget'; import { getTargetElement } from '../utils/domTarget'; import useEffectWithTarget from '../utils/useEffectWithTarget'; +type CallbackType = (entry: IntersectionObserverEntry) => void; + export interface Options { rootMargin?: string; threshold?: number | number[]; root?: BasicTarget; + callback?: CallbackType; } -type CallbackType = (entry: IntersectionObserverEntry) => void; - -function useInViewport( - target: BasicTarget | BasicTarget[], - options?: Options, - callback?: CallbackType, -) { +function useInViewport(target: BasicTarget | BasicTarget[], options?: Options) { const [state, setState] = useState(); const [ratio, setRatio] = useState(); @@ -30,6 +27,8 @@ function useInViewport( return; } + const { callback, ...option } = options || {}; + const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { @@ -41,8 +40,8 @@ function useInViewport( } }, { - ...options, - root: getTargetElement(options?.root), + ...option, + root: getTargetElement(option?.root), }, ); diff --git a/packages/hooks/src/useInViewport/index.zh-CN.md b/packages/hooks/src/useInViewport/index.zh-CN.md index 3bcf864ad3..9ad1a35002 100644 --- a/packages/hooks/src/useInViewport/index.zh-CN.md +++ b/packages/hooks/src/useInViewport/index.zh-CN.md @@ -27,17 +27,15 @@ nav: const [inViewport, ratio] = useInViewport( target, options?: Options - callback?: (entry: IntersectionObserverEntry) => void ); ``` ### Params -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ---------------- | ----------------------------------------------------------- | ------ | -| target | DOM 节点或者 ref | `Element` \| `() => Element` \| `MutableRefObject` | - | -| options | 设置 | `Options` | - | -| callback | 回调 | `(entry: IntersectionObserverEntry) => void` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------- | ---------------- | ----------------------------------------------------------- | ------ | +| target | DOM 节点或者 ref | `Element` \| `() => Element` \| `MutableRefObject` | - | +| options | 设置 | `Options` | - | ### Options @@ -48,6 +46,7 @@ const [inViewport, ratio] = useInViewport( | threshold | 可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 ratio 会被更新 | `number` \| `number[]` | - | | rootMargin | 根(root)元素的外边距 | `string` | - | | root | 指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素，如果未指定或者为 null，则默认为浏览器视窗。 | `Element` \| `Document` \| `() => (Element/Document)` \| `MutableRefObject` | - | +| callback | 可以自定义控制在可见区域达到该比例时触发事件 | `(entry: IntersectionObserverEntry) => void` | - | ### Result