From bb9a3f49508c3f1517d771b7eaa29af41cebc243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 30 Dec 2022 16:01:29 +0800 Subject: [PATCH 1/3] chore: remove rc-utils/addEventListener --- components/anchor/Anchor.tsx | 5 ++--- components/back-top/index.tsx | 11 +++++++---- components/float-button/BackTop.tsx | 11 +++++++---- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 6ca13b070134..22e84f2219e8 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import addEventListener from 'rc-util/lib/Dom/addEventListener'; import * as React from 'react'; import Affix from '../affix'; import type { ConfigConsumerProps } from '../config-provider'; @@ -297,10 +296,10 @@ const AnchorContent: React.FC = (props) => { React.useEffect(() => { const scrollContainer = getCurrentContainer(); - const scrollEvent = addEventListener(scrollContainer, 'scroll', handleScroll); handleScroll(); + scrollContainer?.addEventListener('scroll', handleScroll); return () => { - scrollEvent?.remove(); + scrollContainer?.removeEventListener('scroll', handleScroll); }; }, [dependencyListItem]); diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 827e57163115..cf73677bc980 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -1,7 +1,6 @@ import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; -import addEventListener from 'rc-util/lib/Dom/addEventListener'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import type { ConfigConsumerProps } from '../config-provider'; @@ -36,7 +35,6 @@ const BackTop: React.FC = (props) => { const [visible, setVisible] = React.useState(visibilityHeight === 0); const ref = React.useRef(null); - const scrollEvent = React.useRef | null>(null); const getDefaultTarget = (): HTMLElement | Document | Window => ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window; @@ -51,8 +49,13 @@ const BackTop: React.FC = (props) => { const bindScrollEvent = () => { const getTarget = target || getDefaultTarget; const container = getTarget(); - scrollEvent.current = addEventListener(container, 'scroll', handleScroll); + container?.addEventListener('scroll', handleScroll); handleScroll({ target: container }); + return { + remove() { + container?.removeEventListener('scroll', handleScroll); + }, + }; }; if (process.env.NODE_ENV !== 'production') { @@ -63,7 +66,7 @@ const BackTop: React.FC = (props) => { bindScrollEvent(); return () => { handleScroll.cancel(); - scrollEvent.current?.remove(); + bindScrollEvent().remove(); }; }, [target]); diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 827086bfd80f..8098d9aa703a 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -1,7 +1,6 @@ import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; -import addEventListener from 'rc-util/lib/Dom/addEventListener'; import React, { memo, useContext, useEffect, useRef, useState } from 'react'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; import type { ConfigConsumerProps } from '../config-provider'; @@ -30,7 +29,6 @@ const BackTop: React.FC = (props) => { const [visible, setVisible] = useState(visibilityHeight === 0); const ref = useRef(null); - const scrollEvent = useRef | null>(null); const getDefaultTarget = (): HTMLElement | Document | Window => ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window; @@ -45,15 +43,20 @@ const BackTop: React.FC = (props) => { const bindScrollEvent = () => { const getTarget = target || getDefaultTarget; const container = getTarget(); - scrollEvent.current = addEventListener(container, 'scroll', handleScroll); + container?.addEventListener('scroll', handleScroll); handleScroll({ target: container }); + return { + remove() { + container?.removeEventListener('scroll', handleScroll); + }, + }; }; useEffect(() => { bindScrollEvent(); return () => { handleScroll.cancel(); - scrollEvent.current?.remove(); + bindScrollEvent().remove(); }; }, [target]); From 9e28abb9f77ca2f1294625ff47dbaf3bb835e3fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 30 Dec 2022 16:35:46 +0800 Subject: [PATCH 2/3] fix --- components/back-top/index.tsx | 18 ++++++------------ components/float-button/BackTop.tsx | 18 ++++++------------ 2 files changed, 12 insertions(+), 24 deletions(-) diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index cf73677bc980..bc4c0ae9c2ea 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -46,27 +46,21 @@ const BackTop: React.FC = (props) => { }, ); - const bindScrollEvent = () => { + const container = React.useMemo(() => { const getTarget = target || getDefaultTarget; - const container = getTarget(); - container?.addEventListener('scroll', handleScroll); - handleScroll({ target: container }); - return { - remove() { - container?.removeEventListener('scroll', handleScroll); - }, - }; - }; + return getTarget(); + }, [target]); if (process.env.NODE_ENV !== 'production') { warning(false, 'BackTop', '`BackTop` is deprecated, please use `FloatButton.BackTop` instead.'); } React.useEffect(() => { - bindScrollEvent(); + handleScroll({ target: container }); + container?.addEventListener('scroll', handleScroll); return () => { handleScroll.cancel(); - bindScrollEvent().remove(); + container?.removeEventListener('scroll', handleScroll); }; }, [target]); diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 8098d9aa703a..108d2283e8aa 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -40,23 +40,17 @@ const BackTop: React.FC = (props) => { }, ); - const bindScrollEvent = () => { + const container = React.useMemo(() => { const getTarget = target || getDefaultTarget; - const container = getTarget(); - container?.addEventListener('scroll', handleScroll); - handleScroll({ target: container }); - return { - remove() { - container?.removeEventListener('scroll', handleScroll); - }, - }; - }; + return getTarget(); + }, [target]); useEffect(() => { - bindScrollEvent(); + handleScroll({ target: container }); + container?.addEventListener('scroll', handleScroll); return () => { handleScroll.cancel(); - bindScrollEvent().remove(); + container?.removeEventListener('scroll', handleScroll); }; }, [target]); From 901d0d6139e6067ec0f241dea6c28a5c39df2636 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Fri, 30 Dec 2022 16:47:04 +0800 Subject: [PATCH 3/3] fix --- components/back-top/index.tsx | 7 ++----- components/float-button/BackTop.tsx | 7 ++----- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index bc4c0ae9c2ea..80d6e07f699b 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -46,16 +46,13 @@ const BackTop: React.FC = (props) => { }, ); - const container = React.useMemo(() => { - const getTarget = target || getDefaultTarget; - return getTarget(); - }, [target]); - if (process.env.NODE_ENV !== 'production') { warning(false, 'BackTop', '`BackTop` is deprecated, please use `FloatButton.BackTop` instead.'); } React.useEffect(() => { + const getTarget = target || getDefaultTarget; + const container = getTarget(); handleScroll({ target: container }); container?.addEventListener('scroll', handleScroll); return () => { diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 108d2283e8aa..749e7bec9d62 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -40,12 +40,9 @@ const BackTop: React.FC = (props) => { }, ); - const container = React.useMemo(() => { - const getTarget = target || getDefaultTarget; - return getTarget(); - }, [target]); - useEffect(() => { + const getTarget = target || getDefaultTarget; + const container = getTarget(); handleScroll({ target: container }); container?.addEventListener('scroll', handleScroll); return () => {