From a80b39d34d46034ae35751dd82ce6db0458e8f7c Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 30 Dec 2022 17:15:54 +0800 Subject: [PATCH] chore: remove rc-util/addEventListener (#39923) * chore: remove rc-utils/addEventListener * fix * fix --- components/anchor/Anchor.tsx | 5 ++--- components/back-top/index.tsx | 16 +++++----------- components/float-button/BackTop.tsx | 12 +++--------- 3 files changed, 10 insertions(+), 23 deletions(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 6ca13b0701..22e84f2219 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 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]);