refactor: update animations

Author: mrholek

src/components/alert/CAlert.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 
 import { Colors, colorPropType } from '../Types'
 import { CButtonClose } from '../button/CButtonClose'
@@ -57,53 +57,36 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     },
     ref,
   ) => {
+    const [_visible, setVisible] = useState(visible)
+
     const _className = classNames(
       'alert',
       variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
-      { 'alert-dismissible fade': dismissible },
+      {
+        'alert-dismissible fade': dismissible,
+        show: _visible && dismissible,
+      },
       className,
     )
-    const [_visible, setVisible] = useState(visible)
-
-    const duration = 150
-
-    const defaultStyle = {
-      opacity: 0,
-    }
-
-    const transitionStyles = {
-      entering: { opacity: 1 },
-      entered: { opacity: 1 },
-      exiting: { opacity: 0 },
-      exited: { opacity: 0 },
-    }
 
     return (
-      <Transition
+      <CSSTransition
         in={_visible}
-        timeout={duration}
+        timeout={150}
         onExit={onDismiss}
         onExited={onDismissed}
         unmountOnExit
       >
-        {(state) => {
-          return (
-            <div
-              className={_className}
-              role="alert"
-              style={{
-                ...defaultStyle,
-                ...transitionStyles[state],
-              }}
-              {...rest}
-              ref={ref}
-            >
-              {children}
-              {dismissible && <CButtonClose onClick={() => setVisible(false)} />}
-            </div>
-          )
-        }}
-      </Transition>
+        <div
+          className={_className}
+          role="alert"
+          {...rest}
+          ref={ref}
+        >
+          {children}
+          {dismissible && <CButtonClose onClick={() => setVisible(false)} />}
+        </div>
+      </CSSTransition>
     )
   },
 )

src/components/collapse/CCollapse.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, forwardRef, HTMLAttributes, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Transition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 
 import { useForkedRef } from '../../utils/hooks'
 
@@ -22,10 +22,6 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     const collapseRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, collapseRef)
 
-    const style: CSSProperties = {
-      transition: 'height 350ms ease 0s',
-    }
-
     const getTransitionClass = (state: string) => {
       return state === 'entering'
         ? 'collapsing'
@@ -49,8 +45,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     }
 
     const onExiting = () => {
-      // @ts-expect-error
-      const reflow = collapseRef && collapseRef.current && collapseRef.current.offsetHeight
+      // const reflow = collapseRef && collapseRef.current && collapseRef.current.offsetHeight
       setHeight(0)
     }
 
@@ -61,7 +56,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     const _className = classNames(className)
 
     return (
-      <Transition
+      <CSSTransition
         in={visible}
         timeout={350}
         onEntering={onEntering}
@@ -76,15 +71,15 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
           return (
             <div
               className={classNames(_className, transitionClass)}
-              style={{ ...style, ...currentHeight }}
+              style={{ ...currentHeight }}
               {...rest}
               ref={forkedRef}
             >
               {children}
             </div>
           )
         }}
-      </Transition>
+      </CSSTransition>
     )
   },
 )

src/components/popover/CPopover.tsx

@@ -1,10 +1,10 @@
 // TODO: fix possition
 
 import React, { FC, ReactNode, useState } from 'react'
-import PropTypes from 'prop-types'
 import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
 import { Manager, Popper, Reference } from 'react-popper'
-import { Transition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 
 import { CPopoverContent } from './CPopoverContent'
 import { Placements, Triggers, triggerPropType } from '../Types'
@@ -81,7 +81,7 @@ export const CPopover: FC<CPopoverProps> = ({
       </Reference>
       {typeof window !== 'undefined' &&
         createPortal(
-          <Transition
+          <CSSTransition
             in={_visible}
             timeout={{
               enter: 0,
@@ -105,7 +105,7 @@ export const CPopover: FC<CPopoverProps> = ({
                 </Popper>
               )
             }}
-          </Transition>,
+          </CSSTransition>,
           document.body,
         )}
     </Manager>

src/components/tooltip/CTooltip.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, useState } from 'react'
 import PropTypes from "prop-types";
 import { createPortal } from 'react-dom'
 import { Manager, Popper, Reference } from 'react-popper'
-import { Transition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 
 import { CTooltipContent } from './CTooltipContent'
 import { Placements, Triggers, triggerPropType } from '../Types'
@@ -74,7 +74,7 @@ export const CTooltip: FC<CTooltipProps> = ({
       </Reference>
       {typeof window !== 'undefined' &&
         createPortal(
-          <Transition
+          <CSSTransition
             in={_visible}
             timeout={{
               enter: 0,
@@ -98,7 +98,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                 </Popper>
               )
             }}
-          </Transition>,
+          </CSSTransition>,
           document.body,
         )}
     </Manager>