refactor(Collapse): Rewrite Collapse component as functional component (react-bootstrap#5210)

Author: moh12594

src/Collapse.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import css from 'dom-helpers/css';
 import transitionEnd from 'dom-helpers/transitionEnd';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
@@ -17,7 +17,7 @@ const MARGINS = {
   width: ['marginLeft', 'marginRight'],
 };
 
-function getDimensionValue(dimension, elem) {
+function getDefaultDimensionValue(dimension, elem) {
   let offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
   let value = elem[offset];
   let margins = MARGINS[dimension];
@@ -125,78 +125,81 @@ const defaultProps = {
   mountOnEnter: false,
   unmountOnExit: false,
   appear: false,
-
   dimension: 'height',
-  getDimensionValue,
+  getDimensionValue: getDefaultDimensionValue,
 };
 
-class Collapse extends React.Component {
-  getDimension() {
-    return typeof this.props.dimension === 'function'
-      ? this.props.dimension()
-      : this.props.dimension;
-  }
-
-  /* -- Expanding -- */
-  handleEnter = (elem) => {
-    elem.style[this.getDimension()] = '0';
-  };
-
-  handleEntering = (elem) => {
-    const dimension = this.getDimension();
-    elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
-  };
-
-  handleEntered = (elem) => {
-    elem.style[this.getDimension()] = null;
-  };
-
-  /* -- Collapsing -- */
-  handleExit = (elem) => {
-    const dimension = this.getDimension();
-    elem.style[dimension] = `${this.props.getDimensionValue(
-      dimension,
-      elem,
-    )}px`;
-    triggerBrowserReflow(elem);
-  };
-
-  handleExiting = (elem) => {
-    elem.style[this.getDimension()] = null;
-  };
-
-  // for testing
-  _getScrollDimensionValue(elem, dimension) {
-    const scroll = `scroll${dimension[0].toUpperCase()}${dimension.slice(1)}`;
-    return `${elem[scroll]}px`;
-  }
-
-  render() {
-    const {
+const Collapse = React.forwardRef(
+  (
+    {
       onEnter,
       onEntering,
       onEntered,
       onExit,
       onExiting,
       className,
       children,
+      dimension,
+      getDimensionValue,
       ...props
-    } = this.props;
+    },
+    ref,
+  ) => {
+    /* Compute dimension */
+    const computedDimension =
+      typeof dimension === 'function' ? dimension() : dimension;
+
+    /* -- Expanding -- */
+    const handleEnter = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = '0';
+        }, onEnter),
+      [computedDimension, onEnter],
+    );
+
+    const handleEntering = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          const scroll = `scroll${computedDimension[0].toUpperCase()}${computedDimension.slice(
+            1,
+          )}`;
+          elem.style[dimension] = `${elem[scroll]}px`;
+        }, onEntering),
+      [computedDimension, onEntering, dimension],
+    );
 
-    delete props.dimension;
-    delete props.getDimensionValue;
+    const handleEntered = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = null;
+        }, onEntered),
+      [computedDimension, onEntered],
+    );
 
-    const handleEnter = createChainedFunction(this.handleEnter, onEnter);
-    const handleEntering = createChainedFunction(
-      this.handleEntering,
-      onEntering,
+    /* -- Collapsing -- */
+    const handleExit = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[dimension] = `${getDimensionValue(
+            computedDimension,
+            elem,
+          )}px`;
+          triggerBrowserReflow(elem);
+        }, onExit),
+      [dimension, onExit, getDimensionValue, computedDimension],
+    );
+    const handleExiting = useMemo(
+      () =>
+        createChainedFunction((elem) => {
+          elem.style[computedDimension] = null;
+        }, onExiting),
+      [computedDimension, onExiting],
     );
-    const handleEntered = createChainedFunction(this.handleEntered, onEntered);
-    const handleExit = createChainedFunction(this.handleExit, onExit);
-    const handleExiting = createChainedFunction(this.handleExiting, onExiting);
 
     return (
       <Transition
+        ref={ref}
         addEndListener={transitionEnd}
         {...props}
         aria-expanded={props.role ? props.in : null}
@@ -213,14 +216,14 @@ class Collapse extends React.Component {
               className,
               children.props.className,
               collapseStyles[state],
-              this.getDimension() === 'width' && 'width',
+              computedDimension === 'width' && 'width',
             ),
           })
         }
       </Transition>
     );
-  }
-}
+  },
+);
 
 Collapse.propTypes = propTypes;
 Collapse.defaultProps = defaultProps;

test/CollapseSpec.js

@@ -30,7 +30,7 @@ describe('<Collapse>', () => {
   it('Should default to collapsed', () => {
     wrapper = mount(<Component>Panel content</Component>);
 
-    assert.ok(wrapper.find('Collapse').props().in === false);
+    assert.ok(wrapper.find(Collapse).props().in === false);
   });
 
   it('Should have collapse class', () => {
@@ -40,11 +40,6 @@ describe('<Collapse>', () => {
   describe('from collapsed to expanded', () => {
     beforeEach(() => {
       wrapper = mount(<Component>Panel content</Component>);
-
-      // since scrollHeight is gonna be 0 detached from the DOM
-      sinon
-        .stub(wrapper.instance().collapse, '_getScrollDimensionValue')
-        .returns('15px');
     });
 
     it('Should have collapsing class', () => {
@@ -70,9 +65,8 @@ describe('<Collapse>', () => {
       let node = wrapper.getDOMNode();
 
       assert.equal(node.style.height, '');
-
       wrapper.setState({ in: true });
-      assert.equal(node.style.height, '15px');
+      assert.equal(node.style.height, `${node.scrollHeight}px`);
     });
 
     it('Should transition from collapsing to not collapsing', (done) => {
@@ -99,7 +93,7 @@ describe('<Collapse>', () => {
       assert.equal(node.style.height, '');
 
       wrapper.setState({ in: true, onEntered });
-      assert.equal(node.style.height, '15px');
+      assert.equal(node.style.height, `${node.scrollHeight}px`);
     });
   });
 
@@ -173,18 +167,19 @@ describe('<Collapse>', () => {
       wrapper = mount(<Component>Panel content</Component>);
     });
 
-    it('Defaults to height', () => {
-      assert.equal(wrapper.instance().collapse.getDimension(), 'height');
+    it('Should not have width in class', () => {
+      let node = wrapper.getDOMNode();
+      assert.ok(node.className.indexOf('width') === -1);
     });
 
-    it('Uses getCollapsibleDimension if exists', () => {
+    it('Should have width in class', () => {
       function dimension() {
-        return 'whatevs';
+        return 'width';
       }
 
-      wrapper.setState({ dimension });
-
-      assert.equal(wrapper.instance().collapse.getDimension(), 'whatevs');
+      wrapper.setProps({ dimension });
+      let node = wrapper.getDOMNode();
+      assert.ok(node.className.indexOf('width') !== -1);
     });
   });
 

test/NavbarSpec.js

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 
 import Nav from '../src/Nav';
 import Navbar from '../src/Navbar';
+import Collapse from '../src/Collapse';
 
 describe('<Navbar>', () => {
   it('Should create nav element', () => {
@@ -100,11 +101,12 @@ describe('<Navbar>', () => {
   });
 
   it('Should pass expanded to Collapse', () => {
-    mount(
+    const wrapper = mount(
       <Navbar defaultExpanded>
         <Navbar.Collapse>hello</Navbar.Collapse>
       </Navbar>,
-    ).assertSingle('Collapse[in]');
+    );
+    expect(wrapper.find(Collapse).prop('in')).to.be.true;
   });
 
   it('Should wire the toggle to the collapse', () => {
@@ -116,15 +118,15 @@ describe('<Navbar>', () => {
     );
 
     let toggle = wrapper.find('.navbar-toggler');
-    let collapse = wrapper.find('Collapse');
+    let collapse = wrapper.find(Collapse);
 
     expect(collapse.is('[in=false]')).to.equal(true);
     expect(toggle.hasClass('collapsed')).to.equal(true);
 
     toggle.simulate('click');
 
     toggle = wrapper.find('.navbar-toggler');
-    collapse = wrapper.find('Collapse');
+    collapse = wrapper.find(Collapse);
 
     expect(collapse.is('[in=true]')).to.equal(true);
     expect(toggle.hasClass('collapsed')).to.equal(false);

types/components/Collapse.d.ts

@@ -4,7 +4,7 @@ import { TransitionCallbacks } from './helpers';
 
 export interface CollapseProps
   extends TransitionCallbacks,
-    React.ClassAttributes<Collapse> {
+    React.ComponentPropsWithoutRef<'div'> {
   in?: boolean;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
@@ -18,6 +18,9 @@ export interface CollapseProps
   role?: string;
 }
 
-declare class Collapse extends React.Component<CollapseProps> {}
+declare const Collapse: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  CollapseProps
+>;
 
 export default Collapse;