fix: Use the new nodeRef API for Collapse

reactstrap · Jul 24, 2022 · 9527654 · 9527654
1 parent b7390d6
commit 9527654
Showing 1 changed file with 22 additions and 11 deletions.
diff --git a/src/Collapse.js b/src/Collapse.js
@@ -29,11 +29,7 @@ const propTypes = {
   navbar: PropTypes.bool,
   /** Change underlying component's CSS base class name */
   cssModule: PropTypes.object,
-  innerRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-    PropTypes.object,
-  ]),
+  innerRef: PropTypes.shape({ current: PropTypes.object }),
 };
 
 const defaultProps = {
@@ -66,36 +62,48 @@ class Collapse extends Component {
       dimension: null,
     };
 
+    this.nodeRef = React.createRef();
+
     ['onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].forEach(
       (name) => {
         this[name] = this[name].bind(this);
       },
     );
   }
 
-  onEntering(node, isAppearing) {
+  getNode() {
+    const nodeRef = this.props.innerRef || this.nodeRef;
+    return nodeRef.current;
+  }
+
+  onEntering(_, isAppearing) {
+    const node = this.getNode();
     this.setState({ dimension: this.getDimension(node) });
     this.props.onEntering(node, isAppearing);
   }
 
-  onEntered(node, isAppearing) {
+  onEntered(_, isAppearing) {
+    const node = this.getNode();
     this.setState({ dimension: null });
     this.props.onEntered(node, isAppearing);
   }
 
-  onExit(node) {
+  onExit() {
+    const node = this.getNode();
     this.setState({ dimension: this.getDimension(node) });
     this.props.onExit(node);
   }
 
-  onExiting(node) {
+  onExiting() {
+    const node = this.getNode();
     // getting this variable triggers a reflow
     const _unused = this.getDimension(node); // eslint-disable-line no-unused-vars
     this.setState({ dimension: 0 });
     this.props.onExiting(node);
   }
 
-  onExited(node) {
+  onExited() {
+    const node = this.getNode();
     this.setState({ dimension: null });
     this.props.onExited(node);
   }
@@ -117,6 +125,8 @@ class Collapse extends Component {
       ...otherProps
     } = this.props;
 
+    const nodeRef = innerRef || this.nodeRef;
+
     const { dimension } = this.state;
 
     const transitionProps = pick(otherProps, TransitionPropTypeKeys);
@@ -125,6 +135,7 @@ class Collapse extends Component {
       <Transition
         {...transitionProps}
         in={isOpen}
+        nodeRef={nodeRef}
         onEntering={this.onEntering}
         onEntered={this.onEntered}
         onExit={this.onExit}
@@ -151,7 +162,7 @@ class Collapse extends Component {
               {...childProps}
               style={{ ...childProps.style, ...style }}
               className={classes}
-              ref={this.props.innerRef}
+              ref={nodeRef}
             >
               {children}
             </Tag>