refactor(animation): Use react-transition-state instead of -group

Bojagi · Nov 27, 2024 · cf205b6 · cf205b6
1 parent 0f8278d
commit cf205b6
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -65,7 +65,6 @@
     "@types/jest": "^26.0.19",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/react-transition-group": "^4.4.11",
     "@types/requestidlecallback": "^0.3.1",
     "@types/styled-system": "^5.1.10",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
@@ -115,7 +114,7 @@
     "deepmerge": "^4.2.2",
     "isobject": "^4.0.0",
     "nanopop": "^2.4.2",
-    "react-transition-group": "^4.4.5",
+    "react-transition-state": "^2.2.0",
     "use-resize-observer": "^9.1.0"
   },
   "resolutions": {

diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx
@@ -64,6 +64,8 @@ const StyledIconButton = styled.button<IconButtonProps>`
 
   ${getCustomStyles('iconButton.styles', 'root')}
 
+  ${(props) => props.css}
+
   ${(props) =>
     props.active
       ? css`

diff --git a/src/ToastCard/ToastCard.tsx b/src/ToastCard/ToastCard.tsx
@@ -72,6 +72,7 @@ export const ToastCard = forwardRef<HTMLDivElement, ToastCardProps>(
     const generatedId = useUniqueId();
     const titleId = `${generatedId}-title`;
     const descriptionId = `${generatedId}-title`;
+    console.log('color', color);
 
     return (
       <CardWrapper
@@ -109,7 +110,7 @@ export const ToastCard = forwardRef<HTMLDivElement, ToastCardProps>(
               {closable && (
                 <IconButton
                   data-testid="pbl-toastcard-closebtn"
-                  mx={-5}
+                  mx={-1.5}
                   onClick={onClose}
                   size="small"
                   css={(props) =>

diff --git a/src/ToastProvider/ToastProvider.tsx b/src/ToastProvider/ToastProvider.tsx
@@ -38,8 +38,6 @@ export function ToastProvider({ children, side = 'bottom-right' }: ToastProvider
 
   const removeMessage = useCallback(
     (id: string) => {
-      console.log('xxxxxx');
-
       if (mountedRef.current) {
         dispatchMessage({
           type: 'remove',
@@ -99,7 +97,7 @@ export function ToastProvider({ children, side = 'bottom-right' }: ToastProvider
                   role={isAlert ? 'alert' : 'status'}
                   aria-atomic="true"
                   {...message}
-                  mb={4}
+                  mb={1.5}
                   onClose={() => hideMessage(message.id!)}
                 />
               </StackAnimation>

diff --git a/src/animation/InOutAnimation.tsx b/src/animation/InOutAnimation.tsx
@@ -1,11 +1,9 @@
-import React, { forwardRef, type ReactNode, useState, useEffect } from 'react';
-import { Transition } from 'react-transition-group';
+import React, { forwardRef, type ReactNode, useEffect } from 'react';
 import styled from '@emotion/styled';
 import useResizeObserver from 'use-resize-observer';
 import { useForwardRef } from '../utils/useForwardRef';
-import { useMountedRef } from '../utils/useMountedRef';
-import type { TransitionStatus } from 'react-transition-group';
 import type { Interpolation } from '@emotion/react';
+import { TransitionStatus, useTransitionState } from 'react-transition-state';
 
 export interface InnerInOutAnimationProps {
   state?: TransitionStatus;
@@ -57,33 +55,35 @@ export interface CreateInOutAnimationOptions {
 
 const InOutAnimation = forwardRef<HTMLDivElement, InOutAnimationProps>(
   ({ visible, onExited, duration, children, ...additionalProps }, ref) => {
-    const [animationIn, setAnimationIn] = useState(false);
     const [innerRef, setInnerRef] = useForwardRef(ref);
-    const mountedRef = useMountedRef();
     const { width, height } = useResizeObserver<HTMLDivElement>({ ref: innerRef });
 
+    const [{ status }, toggle] = useTransitionState({
+      timeout: duration,
+      preEnter: true,
+      onStateChange: (newStatus) => {
+        if (newStatus.current.status === 'exited' && onExited) {
+          onExited();
+        }
+      },
+    });
+
     useEffect(() => {
-      const requestCallback =
-        (window as any).requestIdleCallback || requestAnimationFrame || setTimeout;
-      requestCallback(() => mountedRef.current && setAnimationIn(visible));
-    }, [visible, mountedRef]);
+      toggle(visible);
+    }, [toggle, visible]);
 
     return (
-      <Transition in={animationIn} timeout={duration} onExited={onExited}>
-        {(state) => (
-          <InnerInOutAnimation
-            ref={setInnerRef}
-            data-testid="pbl-animation-inner"
-            duration={duration}
-            selfWidth={width}
-            selfHeight={height}
-            state={state}
-            {...additionalProps}
-          >
-            {children}
-          </InnerInOutAnimation>
-        )}
-      </Transition>
+      <InnerInOutAnimation
+        ref={setInnerRef}
+        data-testid="pbl-animation-inner"
+        duration={duration}
+        selfWidth={width}
+        selfHeight={height}
+        state={status}
+        {...additionalProps}
+      >
+        {children}
+      </InnerInOutAnimation>
     );
   }
 );

diff --git a/yarn.lock b/yarn.lock
@@ -8874,6 +8874,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-transition-state@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-transition-state/-/react-transition-state-2.2.0.tgz#3a9f37c0553a865b6110ae8eaf7ed4db22633577"
+  integrity sha512-D3EyLku1Sdxrxq26Fo4Jh0q1BLEFQfDOxKKiSuyqWH84+hM6y0Guc0hcW2IXMXY5l5gQCgkOQ9y90xx6mNoj5w==
+
 [email protected], react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"