diff --git a/src/Collapse.js b/src/Collapse.js
index 0e20b4c5c0..0977325789 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -130,97 +130,89 @@ const defaultProps = {
getDimensionValue,
};
-class Collapse extends React.Component {
- getDimension() {
- return typeof this.props.dimension === 'function'
- ? this.props.dimension()
- : this.props.dimension;
- }
+const Collapse = React.forwardRef((props, ref) => {
+ const {
+ onEnter,
+ onEntering,
+ onEntered,
+ onExit,
+ onExiting,
+ children,
+ className,
+ ...otherProps
+ } = props;
+
+ const getDimension = () =>
+ typeof otherProps.dimension === 'function'
+ ? otherProps.dimension()
+ : otherProps.dimension;
+
+ // for testing
+ const _getScrollDimensionValue = (elem, dimension) => {
+ const scroll = `scroll${dimension[0].toUpperCase()}${dimension.slice(1)}`;
+ return `${elem[scroll]}px`;
+ };
/* -- Expanding -- */
- handleEnter = elem => {
- elem.style[this.getDimension()] = '0';
+ const _handleEnter = elem => {
+ elem.style[getDimension()] = '0';
};
- handleEntering = elem => {
- const dimension = this.getDimension();
- elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
+ const _handleEntering = elem => {
+ const dimension = getDimension();
+ elem.style[dimension] = _getScrollDimensionValue(elem, dimension);
};
- handleEntered = elem => {
- elem.style[this.getDimension()] = null;
+ const _handleEntered = elem => {
+ elem.style[getDimension()] = null;
};
/* -- Collapsing -- */
- handleExit = elem => {
- const dimension = this.getDimension();
- elem.style[dimension] = `${this.props.getDimensionValue(
+ const _handleExit = elem => {
+ const dimension = getDimension();
+ elem.style[dimension] = `${otherProps.getDimensionValue(
dimension,
elem,
)}px`;
triggerBrowserReflow(elem);
};
- handleExiting = elem => {
- elem.style[this.getDimension()] = null;
+ const _handleExiting = elem => {
+ elem.style[getDimension()] = null;
};
- // for testing
- _getScrollDimensionValue(elem, dimension) {
- const scroll = `scroll${dimension[0].toUpperCase()}${dimension.slice(1)}`;
- return `${elem[scroll]}px`;
- }
-
- render() {
- const {
- onEnter,
- onEntering,
- onEntered,
- onExit,
- onExiting,
- className,
- children,
- ...props
- } = this.props;
-
- delete props.dimension;
- delete props.getDimensionValue;
-
- const handleEnter = createChainedFunction(this.handleEnter, onEnter);
- const handleEntering = createChainedFunction(
- this.handleEntering,
- onEntering,
- );
- const handleEntered = createChainedFunction(this.handleEntered, onEntered);
- const handleExit = createChainedFunction(this.handleExit, onExit);
- const handleExiting = createChainedFunction(this.handleExiting, onExiting);
-
- return (
-
- {(state, innerProps) =>
- React.cloneElement(children, {
- ...innerProps,
- className: classNames(
- className,
- children.props.className,
- collapseStyles[state],
- this.getDimension() === 'width' && 'width',
- ),
- })
- }
-
- );
- }
-}
+ const handleEnter = createChainedFunction(_handleEnter, onEnter);
+ const handleEntering = createChainedFunction(_handleEntering, onEntering);
+ const handleEntered = createChainedFunction(_handleEntered, onEntered);
+ const handleExit = createChainedFunction(_handleExit, onExit);
+ const handleExiting = createChainedFunction(_handleExiting, onExiting);
+
+ return (
+
+ {(state, innerProps) =>
+ React.cloneElement(children, {
+ ...innerProps,
+ className: classNames(
+ className,
+ children.props.className,
+ collapseStyles[state],
+ getDimension() === 'width' && 'width',
+ ),
+ })
+ }
+
+ );
+});
Collapse.propTypes = propTypes;
Collapse.defaultProps = defaultProps;