chore: remove rc-util/addEventListener (#39923)

* chore: remove rc-utils/addEventListener * fix * fix
ant-design · Dec 30, 2022 · a80b39d · a80b39d
1 parent 06de226
commit a80b39d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git 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<InternalAnchorProps> = (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
@@ -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<BackTopProps> = (props) => {
   const [visible, setVisible] = React.useState<boolean>(visibilityHeight === 0);
 
   const ref = React.useRef<HTMLDivElement>(null);
-  const scrollEvent = React.useRef<ReturnType<typeof addEventListener> | null>(null);
 
   const getDefaultTarget = (): HTMLElement | Document | Window =>
     ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
@@ -48,22 +46,18 @@ const BackTop: React.FC<BackTopProps> = (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
@@ -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<BackTopProps> = (props) => {
   const [visible, setVisible] = useState<boolean>(visibilityHeight === 0);
 
   const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
-  const scrollEvent = useRef<ReturnType<typeof addEventListener> | null>(null);
 
   const getDefaultTarget = (): HTMLElement | Document | Window =>
     ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
@@ -42,18 +40,14 @@ const BackTop: React.FC<BackTopProps> = (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]);