diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 8a4c8a92f6..687b0e89e5 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 scrollIntoView from 'scroll-into-view-if-needed'; @@ -317,10 +316,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 827e571631..80d6e07f69 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; @@ -48,22 +46,18 @@ const BackTop: React.FC = (props) => { }, ); - const bindScrollEvent = () => { - const getTarget = target || getDefaultTarget; - const container = getTarget(); - scrollEvent.current = addEventListener(container, 'scroll', handleScroll); - handleScroll({ target: container }); - }; - if (process.env.NODE_ENV !== 'production') { warning(false, 'BackTop', '`BackTop` is deprecated, please use `FloatButton.BackTop` instead.'); } React.useEffect(() => { - bindScrollEvent(); + const getTarget = target || getDefaultTarget; + const container = getTarget(); + handleScroll({ target: container }); + container?.addEventListener('scroll', handleScroll); return () => { handleScroll.cancel(); - scrollEvent.current?.remove(); + container?.removeEventListener('scroll', handleScroll); }; }, [target]); diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 827086bfd8..749e7bec9d 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; @@ -42,18 +40,14 @@ const BackTop: React.FC = (props) => { }, ); - const bindScrollEvent = () => { + useEffect(() => { const getTarget = target || getDefaultTarget; const container = getTarget(); - scrollEvent.current = addEventListener(container, 'scroll', handleScroll); handleScroll({ target: container }); - }; - - useEffect(() => { - bindScrollEvent(); + container?.addEventListener('scroll', handleScroll); return () => { handleScroll.cancel(); - scrollEvent.current?.remove(); + container?.removeEventListener('scroll', handleScroll); }; }, [target]);