fix: make components using Transition component use new API #127

Author: woothu

src/carousel/CCarouselItem.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, createRef, useEffect } from 'react'
+import React, { useState, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
@@ -20,10 +20,9 @@ const CCarouselItem = props => {
   const {
     children,
     className,
-    //
     innerRef,
     ...attributes
-  } = props;
+  } = props
 
   const {
     animate,
@@ -34,8 +33,9 @@ const CCarouselItem = props => {
     setAnimating
   } = useContext(Context)
 
-  const ref = createRef()
-  innerRef && innerRef(ref)
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
   const [isIn, setIsIn] = useState()
 
   useEffect(() => {
@@ -49,9 +49,9 @@ const CCarouselItem = props => {
     setAnimating(false)
   }
 
-  const onEntering = (node) => {
+  const onEntering = () => {
     /* eslint-disable no-unused-vars */
-    const offsetHeight = node.offsetHeight
+    const offsetHeight = ref.current.offsetHeight
     setAnimating(true)
     /* eslint-enable no-unused-vars */
   }
@@ -68,6 +68,7 @@ const CCarouselItem = props => {
     setAnimating(false)
   }
 
+  // const nodeRef = React.useRef()
 
   //render
   if (!animate || state[0] === null) {
@@ -96,6 +97,7 @@ const CCarouselItem = props => {
       onExit={onExit}
       onExiting={onExiting}
       onExited={onExited}
+      nodeRef={ref}
     >
       {(status) => {
         const direction = getDirection(state)
@@ -133,8 +135,7 @@ const CCarouselItem = props => {
 CCarouselItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-};
+}
 
 export default CCarouselItem

src/collapse/CCollapse.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
@@ -24,20 +24,23 @@ const CCollapse = props => {
 
   const [height, setHeight] = useState()
 
-  const onEntering = node => {
-    setHeight(node.scrollHeight)
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+  const onEntering = () => {
+    setHeight(ref.current.scrollHeight)
   }
 
   const onEntered = () => {
     setHeight(null)
   }
 
-  const onExit = node => {
-    setHeight(node.scrollHeight)
+  const onExit = () => {
+    setHeight(ref.current.scrollHeight)
   }
 
-  const onExiting = node => {
-    const _unused = node.offsetHeight // eslint-disable-line no-unused-vars
+  const onExiting = () => {
+    const _unused = ref.current.offsetHeight // eslint-disable-line no-unused-vars
     setHeight(0)
   }
 
@@ -58,6 +61,7 @@ const CCollapse = props => {
       onExit={onExit}
       onExiting={onExiting}
       onExited={onExited}
+      nodeRef={ref}
     >
       {(status) => {
         let collapseClass = getTransitionClass(status)
@@ -72,7 +76,7 @@ const CCollapse = props => {
             {...attributes}
             style={{ ...attributes.style, ...style }}
             className={classes}
-            ref={innerRef}
+            ref={ref}
           >
             {children}
           </div>
@@ -94,8 +98,4 @@ CCollapse.propTypes = {
   navbar: PropTypes.bool
 }
 
-CCollapse.defaultProps = {
-  show: false
-}
-
 export default CCollapse

src/fade/CFade.js

@@ -23,10 +23,13 @@ const CFade = props => {
   const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
   const childProps = omitByKeys(rest, TransitionPropTypeKeys)
 
-  const childRef = useRef()
+  const ref = typeof innerRef === 'object' ? innerRef : useRef()
+  typeof innerRef === 'function' && innerRef(ref)
+
+
 
   return (
-    <Transition {...transitionProps} nodeRef={childRef}>
+    <Transition {...transitionProps} nodeRef={ref}>
       {(status) => {
         const isActive = status === 'entered'
         const classes = classNames(
@@ -35,7 +38,7 @@ const CFade = props => {
           isActive && baseClassActive
         )
         return (
-          <Tag className={classes} {...childProps} ref={innerRef}>
+          <Tag className={classes} {...childProps} ref={ref}>
             {children}
           </Tag>
         )