Fix findDOMNode deprecation by adding refs to transition components (…

…#4704) * Add element ref in `Fade` transition * Add element ref in `Collapse` component * Prettier changes * Add changeset * Remove obsolete `RefCallback` import Co-authored-by: Jed Watson <jed@keystonejs.com>
JedWatson · Sep 2, 2021 · b41f4ce · b41f4ce
1 parent cfd5d9f
commit b41f4ce
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/.changeset/kind-birds-kiss.md b/.changeset/kind-birds-kiss.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix findDOMNode deprecation by adding refs to transition components
diff --git a/packages/react-select/src/animated/transitions.tsx b/packages/react-select/src/animated/transitions.tsx
@@ -1,9 +1,10 @@
 import React, {
   Component,
   ComponentType,
+  createRef,
   CSSProperties,
   ReactNode,
-  RefCallback,
+  useRef,
 } from 'react';
 import { Transition } from 'react-transition-group';
 import {
@@ -28,6 +29,8 @@ export const Fade = <ComponentProps extends {}>({
   onExited,
   ...props
 }: FadeProps<ComponentProps>) => {
+  const nodeRef = useRef<HTMLElement>(null);
+
   const transition: { [K in TransitionStatus]?: CSSProperties } = {
     entering: { opacity: 0 },
     entered: { opacity: 1, transition: `opacity ${duration}ms` },
@@ -36,12 +39,19 @@ export const Fade = <ComponentProps extends {}>({
   };
 
   return (
-    <Transition mountOnEnter unmountOnExit in={inProp} timeout={duration}>
+    <Transition
+      mountOnEnter
+      unmountOnExit
+      in={inProp}
+      timeout={duration}
+      nodeRef={nodeRef}
+    >
       {(state) => {
         const innerProps = {
           style: {
             ...transition[state],
           },
+          ref: nodeRef,
         };
         return <Tag innerProps={innerProps} {...(props as any)} />;
       }}
@@ -75,15 +85,16 @@ export class Collapse extends Component<CollapseProps, CollapseState> {
     exiting: { width: 0, transition: `width ${this.duration}ms ease-out` },
     exited: { width: 0 },
   };
-  componentWillUnmount() {
-    if (this.rafID) {
-      window.cancelAnimationFrame(this.rafID);
-    }
-  }
+  nodeRef = createRef<HTMLDivElement>();
 
-  // width must be calculated; cannot transition from `undefined` to `number`
-  getWidth: RefCallback<HTMLDivElement> = (ref) => {
-    if (ref && isNaN(this.state.width as number)) {
+  componentDidMount() {
+    const { current: ref } = this.nodeRef;
+
+    /*
+      A check on existence of ref should not be necessary at this point,
+      but TypeScript demands it.
+    */
+    if (ref) {
       /*
         Here we're invoking requestAnimationFrame with a callback invoking our
         call to getBoundingClientRect and setState in order to resolve an edge case
@@ -97,7 +108,13 @@ export class Collapse extends Component<CollapseProps, CollapseState> {
         this.setState({ width });
       });
     }
-  };
+  }
+
+  componentWillUnmount() {
+    if (this.rafID) {
+      window.cancelAnimationFrame(this.rafID);
+    }
+  }
 
   // get base styles
   getStyle = (width: Width): CSSProperties => ({
@@ -120,14 +137,15 @@ export class Collapse extends Component<CollapseProps, CollapseState> {
         unmountOnExit
         in={inProp}
         timeout={this.duration}
+        nodeRef={this.nodeRef}
       >
         {(state) => {
           const style = {
             ...this.getStyle(width),
             ...this.getTransition(state),
           };
           return (
-            <div ref={this.getWidth} style={style}>
+            <div ref={this.nodeRef} style={style}>
               {children}
             </div>
           );