Merge pull request #1992 from GabrielMajeri/update-react-transition-g…

…roup Fix strict mode warnings for Collapse component
reactstrap · Jul 26, 2022 · 5108720 · 5108720
2 parents 71d3322 + b923820
commit 5108720
Show file tree

Hide file tree

Showing 2 changed files with 30 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,40 +62,51 @@ class Collapse extends Component {
       dimension: null,
     };
 
+    this.nodeRef = props.innerRef || React.createRef();
+
     ['onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].forEach(
       (name) => {
         this[name] = this[name].bind(this);
       },
     );
   }
 
-  onEntering(node, isAppearing) {
+  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);
   }
 
+  getNode() {
+    return this.nodeRef.current;
+  }
+
   getDimension(node) {
     return this.props.horizontal ? node.scrollWidth : node.scrollHeight;
   }
@@ -125,6 +132,7 @@ class Collapse extends Component {
       <Transition
         {...transitionProps}
         in={isOpen}
+        nodeRef={this.nodeRef}
         onEntering={this.onEntering}
         onEntered={this.onEntered}
         onExit={this.onExit}
@@ -151,7 +159,7 @@ class Collapse extends Component {
               {...childProps}
               style={{ ...childProps.style, ...style }}
               className={classes}
-              ref={this.props.innerRef}
+              ref={this.nodeRef}
             >
               {children}
             </Tag>

diff --git a/src/__tests__/Collapse.spec.js b/src/__tests__/Collapse.spec.js
@@ -32,6 +32,17 @@ describe('Collapse', () => {
     expect(wrapper.find('p').text()).toBe('hello');
   });
 
+  it('works with strict mode', () => {
+    const spy = jest.spyOn(console, 'error');
+    wrapper = mount(
+      <React.StrictMode>
+        <Collapse />
+      </React.StrictMode>,
+    );
+    expect(wrapper.instance()).toBeTruthy();
+    expect(spy).not.toHaveBeenCalled();
+  });
+
   it('should have default isOpen value', () => {
     wrapper = shallow(<Collapse />);
     expect(wrapper.instance().props.isOpen).toEqual(false);