enhancement: replace findDOMNode

* enhance: findDOMNode * enhance: findDOMNode
xulingling0 · Jun 11, 2024 · 07fc257 · 07fc257
1 parent bf99b3e
commit 07fc257
Show file tree

Hide file tree

Showing 64 changed files with 635 additions and 158 deletions.
diff --git a/components/Affix/index.tsx b/components/Affix/index.tsx
@@ -166,10 +166,13 @@ function Affix(baseProps: PropsWithChildren<AffixProps>, ref) {
 
   useImperativeHandle<any, AffixHandle>(ref, () => ({
     updatePosition,
+    getRootDOMNode: () => {
+      return wrapperRef.current;
+    },
   }));
 
   return (
-    <ResizeObserver onResize={updatePosition}>
+    <ResizeObserver onResize={updatePosition} getTargetDOMNode={() => wrapperRef.current}>
       <div className={cs(className)} style={style} ref={wrapperRef} {...rest}>
         {isFixed && <div style={sizeStyles} />}
         <div

diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useContext, ReactNode, forwardRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import IconCheckCircleFill from '../../icon/react-icon/IconCheckCircleFill';
 import IconCloseCircleFill from '../../icon/react-icon/IconCloseCircleFill';
 import IconInfoCircleFill from '../../icon/react-icon/IconInfoCircleFill';
@@ -9,6 +8,7 @@ import cs from '../_util/classNames';
 import { ConfigContext } from '../ConfigProvider';
 import { AlertProps } from './interface';
 import useMergeProps from '../_util/hooks/useMergeProps';
+import ArcoCSSTransition from '../_util/CSSTransition';
 
 const defaultProps: AlertProps = {
   showIcon: true,
@@ -75,7 +75,7 @@ function Alert(baseProps: AlertProps, ref) {
   const _closable = 'closeable' in props ? closeable : closable;
 
   return (
-    <CSSTransition
+    <ArcoCSSTransition
       in={visible}
       timeout={300}
       classNames="zoomInTop"
@@ -97,7 +97,7 @@ function Alert(baseProps: AlertProps, ref) {
           </button>
         )}
       </div>
-    </CSSTransition>
+    </ArcoCSSTransition>
   );
 }
 

diff --git a/components/Anchor/anchor.tsx b/components/Anchor/anchor.tsx
@@ -88,6 +88,7 @@ function Anchor(baseProps: AnchorPropsWithChildren, ref) {
     ref,
     () => ({
       dom: wrapperRef.current,
+      getRootDOMNode: () => wrapperRef.current,
     }),
     []
   );

diff --git a/components/BackTop/index.tsx b/components/BackTop/index.tsx
@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, forwardRef, useState, useEffect, useContext, memo } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import BTween from 'b-tween';
 import { pickDataAttributes } from '../_util/pick';
 import cs from '../_util/classNames';
@@ -10,6 +9,7 @@ import throttleByRaf from '../_util/throttleByRaf';
 import { BackTopProps } from './interface';
 import useMergeProps from '../_util/hooks/useMergeProps';
 import useKeyboardEvent from '../_util/hooks/useKeyboardEvent';
+import ArcoCSSTransition from '../_util/CSSTransition';
 
 const defaultProps: BackTopProps = {
   visibleHeight: 400,
@@ -81,13 +81,13 @@ function BackTop(baseProps: PropsWithChildren<BackTopProps>, ref) {
         onPressEnter: scrollToTop,
       })}
     >
-      <CSSTransition in={visible} timeout={100} classNames="fadeIn" unmountOnExit>
+      <ArcoCSSTransition in={visible} timeout={100} classNames="fadeIn" unmountOnExit>
         {props.children || (
           <button className={`${prefixCls}-button`}>
             <IconToTop />
           </button>
         )}
-      </CSSTransition>
+      </ArcoCSSTransition>
     </div>
   );
 }

diff --git a/components/Badge/count.tsx b/components/Badge/count.tsx
@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import cs from '../_util/classNames';
 import usePrevious from '../_util/hooks/usePrevious';
+import ArcoCSSTransition from '../_util/CSSTransition';
 
-export default function Count({ prefixCls, maxCount, count, className, style }) {
+function Count({ prefixCls, maxCount, count, className, style }) {
   const [isEntered, setIsEntered] = useState(false);
   const oldCount = usePrevious(count);
   const isChanged = count !== oldCount;
 
   return (
-    <CSSTransition
+    <ArcoCSSTransition
       classNames="badge-zoom"
       in={count > 0}
       timeout={300}
@@ -25,6 +25,8 @@ export default function Count({ prefixCls, maxCount, count, className, style })
           {maxCount && count > maxCount ? `${maxCount}+` : count}
         </span>
       </span>
-    </CSSTransition>
+    </ArcoCSSTransition>
   );
 }
+
+export default Count;
diff --git a/components/Badge/index.tsx b/components/Badge/index.tsx
@@ -1,11 +1,11 @@
 import React, { useContext, forwardRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import cs from '../_util/classNames';
 import { ConfigContext } from '../ConfigProvider';
 import { isObject } from '../_util/is';
 import Count from './count';
 import { BadgeProps } from './interface';
 import useMergeProps from '../_util/hooks/useMergeProps';
+import ArcoCSSTransition from '../_util/CSSTransition';
 
 const InnerColors = [
   'red',
@@ -95,7 +95,7 @@ function Badge(baseProps: BadgeProps, ref) {
     }
     if ((dot || color) && count > 0) {
       return (
-        <CSSTransition
+        <ArcoCSSTransition
           classNames="badge-zoom"
           in={dot || !!color}
           timeout={200}
@@ -113,7 +113,7 @@ function Badge(baseProps: BadgeProps, ref) {
             )}
             style={{ ...colorStyle, ...dotStyle }}
           />
-        </CSSTransition>
+        </ArcoCSSTransition>
       );
     }
     return (

diff --git a/components/Carousel/index.tsx b/components/Carousel/index.tsx
@@ -122,6 +122,7 @@ function Carousel(baseProps: CarouselProps, ref) {
   useImperativeHandle(carousel, () => {
     return {
       dom: refDom.current,
+      getRootDOMNode: () => refDom.current,
       goto: ({ index, isNegative, isManual, resetAutoPlayInterval }) => {
         slideTo({
           targetIndex: getValidIndex(index),
@@ -272,7 +273,7 @@ function Carousel(baseProps: CarouselProps, ref) {
   }
 
   return (
-    <ResizeObserver onResize={computeStyle}>
+    <ResizeObserver onResize={computeStyle} getTargetDOMNode={() => refDom.current}>
       <div
         ref={(_ref) => {
           ref = _ref;

diff --git a/components/Cascader/panel/list.tsx b/components/Cascader/panel/list.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import isEqualWith from 'lodash/isEqualWith';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
 import cs from '../../_util/classNames';
 import Option from './option';
 import { isFunction, isObject, isString } from '../../_util/is';
@@ -13,6 +13,7 @@ import Node from '../base/node';
 import { getMultipleCheckValue } from '../util';
 import VirtualList, { VirtualListHandle } from '../../_class/VirtualList';
 import { on, off } from '../../_util/dom';
+import ArcoCSSTransition from '../../_util/CSSTransition';
 
 const getLegalActiveNode = (options) => {
   for (let index = 0; index < options.length; index++) {
@@ -269,20 +270,23 @@ const ListPanel = <T extends OptionProps>(props: CascaderPanelProps<T>) => {
         const footer = renderFooter ? renderFooter(level, activeNode || null) : null;
 
         return list.length === 0 && !showEmptyChildren ? null : (
-          <CSSTransition
+          <ArcoCSSTransition
             key={level}
             timeout={{
               enter: 300,
               exit: 0,
             }}
             classNames="cascaderSlide"
             onEnter={(e: HTMLDivElement) => {
+              if (!e) return;
               e.style.marginLeft = `-${e.scrollWidth}px`;
             }}
             onEntering={(e: HTMLDivElement) => {
+              if (!e) return;
               e.style.marginLeft = `0px`;
             }}
             onEntered={(e) => {
+              if (!e) return;
               e.style.marginLeft = '';
             }}
           >
@@ -397,7 +401,7 @@ const ListPanel = <T extends OptionProps>(props: CascaderPanelProps<T>) => {
                 level
               )}
             </div>
-          </CSSTransition>
+          </ArcoCSSTransition>
         );
       })}
     </TransitionGroup>

diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
@@ -7,9 +7,9 @@ import React, {
   useState,
   useImperativeHandle,
 } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import FocusLock from 'react-focus-lock';
-import { findDOMNode } from 'react-dom';
+import ArcoCSSTransition from '../_util/CSSTransition';
+import { findDOMNode } from '../_util/react-dom';
 import IconClose from '../../icon/react-icon/IconClose';
 import cs from '../_util/classNames';
 import Button from '../Button';
@@ -235,7 +235,7 @@ function Drawer(baseProps: DrawerProps, ref) {
         }
       >
         {mask ? (
-          <CSSTransition
+          <ArcoCSSTransition
             in={visible}
             appear
             timeout={300}
@@ -252,10 +252,10 @@ function Drawer(baseProps: DrawerProps, ref) {
                 }
               }}
             />
-          </CSSTransition>
+          </ArcoCSSTransition>
         ) : null}
 
-        <CSSTransition
+        <ArcoCSSTransition
           in={visible}
           appear
           timeout={300}
@@ -270,6 +270,7 @@ function Drawer(baseProps: DrawerProps, ref) {
           mountOnEnter={mountOnEnter}
           unmountOnExit={unmountOnExit}
           onEnter={(e) => {
+            if (!e) return;
             e.parentNode.style.display = 'block';
             setInExit(false);
           }}
@@ -282,6 +283,7 @@ function Drawer(baseProps: DrawerProps, ref) {
             setInExit(true);
           }}
           onExited={(e) => {
+            if (!e) return;
             setInExit(false);
             e.parentNode.style.display = ''; // don't set display='none'
             afterClose?.();
@@ -301,7 +303,7 @@ function Drawer(baseProps: DrawerProps, ref) {
               </ConfigProvider>
             </div>
           </div>
-        </CSSTransition>
+        </ArcoCSSTransition>
       </div>
     </Portal>
   );

diff --git a/components/Form/form-item.tsx b/components/Form/form-item.tsx
@@ -10,7 +10,6 @@ import React, {
   ReactNode,
   useRef,
 } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import cs from '../_util/classNames';
 import { isArray, isFunction, isUndefined, isObject } from '../_util/is';
 import Grid from '../Grid';
@@ -33,6 +32,7 @@ import { ConfigContext } from '../ConfigProvider';
 import omit from '../_util/omit';
 import FormItemLabel from './form-label';
 import { formatValidateMsg } from './utils';
+import ArcoCSSTransition from '../_util/CSSTransition';
 
 const Row = Grid.Row;
 const Col = Grid.Col;
@@ -71,7 +71,7 @@ const FormItemTip: React.FC<FormItemTipProps> = ({
 
   return (
     visible && (
-      <CSSTransition in={visible} appear classNames="formblink" timeout={300} unmountOnExit>
+      <ArcoCSSTransition in={visible} appear classNames="formblink" timeout={300} unmountOnExit>
         <div
           className={cs(`${prefixCls}-message`, {
             [`${prefixCls}-message-help`]: isHelpTip,
@@ -86,7 +86,7 @@ const FormItemTip: React.FC<FormItemTipProps> = ({
             </>
           )}
         </div>
-      </CSSTransition>
+      </ArcoCSSTransition>
     )
   );
 };

diff --git a/components/Image/image-preview.tsx b/components/Image/image-preview.tsx
@@ -9,8 +9,8 @@ import React, {
   useMemo,
   WheelEvent,
 } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { findDOMNode } from 'react-dom';
+import ArcoCSSTransition from '../_util/CSSTransition';
+import { findDOMNode } from '../_util/react-dom';
 import useMergeProps from '../_util/hooks/useMergeProps';
 import useMergeValue from '../_util/hooks/useMergeValue';
 import cs from '../_util/classNames';
@@ -110,6 +110,7 @@ function Preview(baseProps: ImagePreviewProps, ref) {
   const refImage = useRef<HTMLImageElement>();
   const refImageContainer = useRef<HTMLDivElement>();
   const refWrapper = useRef<HTMLDivElement>();
+  const refRootWrapper = useRef<HTMLDivElement>();
   const keyboardEventOn = useRef<boolean>(false);
 
   const refMoveData = useRef({
@@ -149,6 +150,7 @@ function Preview(baseProps: ImagePreviewProps, ref) {
 
   useImperativeHandle<ImagePreviewHandle, ImagePreviewHandle>(ref, () => ({
     reset,
+    getRootDOMNode: () => refRootWrapper.current,
   }));
 
   const [container, setContainer] = useState<HTMLElement>();
@@ -489,27 +491,30 @@ function Preview(baseProps: ImagePreviewProps, ref) {
             ...(style || {}),
             ...(isFixed ? {} : { zIndex: 'inherit', position: 'absolute' }),
           }}
+          ref={refRootWrapper}
         >
-          <CSSTransition
+          <ArcoCSSTransition
             in={visible}
             timeout={400}
             appear
             classNames="fadeImage"
             mountOnEnter
             unmountOnExit={false}
             onEnter={(e) => {
+              if (!e) return;
               e.parentNode.style.display = 'block';
               e.style.display = 'block';
             }}
             onExited={(e) => {
+              if (!e) return;
               e.parentNode.style.display = '';
               e.style.display = 'none';
             }}
           >
             <div className={`${previewPrefixCls}-mask`} />
-          </CSSTransition>
+          </ArcoCSSTransition>
           {visible && (
-            <ResizeObserver onResize={onWrapperResize}>
+            <ResizeObserver onResize={onWrapperResize} getTargetDOMNode={() => refWrapper.current}>
               <div
                 ref={refWrapper}
                 className={`${previewPrefixCls}-wrapper`}
@@ -528,7 +533,7 @@ function Preview(baseProps: ImagePreviewProps, ref) {
                     </div>
                   )}
                 </div>
-                <CSSTransition
+                <ArcoCSSTransition
                   in={scaleValueVisible}
                   timeout={400}
                   appear
@@ -538,7 +543,7 @@ function Preview(baseProps: ImagePreviewProps, ref) {
                   <div className={`${previewPrefixCls}-scale-value`}>
                     {(scale * 100).toFixed(0)}%
                   </div>
-                </CSSTransition>
+                </ArcoCSSTransition>
                 {isLoaded && (
                   <ImagePreviewToolbar
                     prefixCls={prefixCls}

diff --git a/components/Input/input-element.tsx b/components/Input/input-element.tsx
@@ -173,6 +173,7 @@ const InputComponent = React.forwardRef<RefInputType, InputComponentProps>(
       () => {
         return {
           dom: refInput.current,
+          getRootDOMNode: () => refInput.current,
           focus: () => {
             refInput.current && refInput.current.focus && refInput.current.focus();
           },
@@ -272,6 +273,7 @@ const InputComponent = React.forwardRef<RefInputType, InputComponentProps>(
         )}
         {autoFitWidth && (
           <ResizeObserver
+            getTargetDOMNode={() => refInputMirror.current}
             onResize={() => {
               const inputWidth = refInputMirror.current.offsetWidth;
               if (typeof autoFitWidth === 'object') {
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,7 @@ function Anchor(baseProps: AnchorPropsWithChildren, ref) { @@
         ref,
         () => ({
           dom: wrapperRef.current,
+          getRootDOMNode: () => wrapperRef.current,
         }),
         []
       );
@@ Expand Down @@