[Fix] set the value of isPlaying correctly when calling play #98

src/useAnimateGroup.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 import useAnimateGroup from './useAnimateGroup';
-import { act } from 'react-test-renderer';
+import { act } from 'react-dom/test-utils';
 
 jest.mock('./utils/createRandomName', () => ({
   default: () => 'test',
@@ -49,17 +49,55 @@ describe('useAnimateGroup', () => {
       undefined,
     ]);
 
+    const forwardStyles = [
+      { opacity: 1, transition: 'all 0.3s linear 0s' },
+      { animation: '0.3s linear 0.3s 1 normal none running test' },
+      { opacity: 1, transition: 'all 0.3s linear 0.6s' },
+      {
+        animation: '0.3s linear 0.8999999999999999s 1 normal none running test',
+      },
+    ];
+    const reverseStyles = [
+      { opacity: 0, transition: 'all 0.3s linear 0.8999999999999999s' },
+      { animation: '0.3s linear 0.6s 1 normal none running test' },
+      { opacity: 0, transition: 'all 0.3s linear 0.3s' },
+      {
+        animation: '0.3s linear 0s 1 normal none running test',
+      },
+    ];
+
+    act(() => {
+      UseAnimateGroup.play(true);
+    });
+    expect(componentStyle).toEqual(forwardStyles);
+
+    act(() => {
+      UseAnimateGroup.play(false);
+    });
+    expect(componentStyle).toEqual(reverseStyles);
+  });
+
+  it('should update isPlaying after calling play', () => {
+    TestComponent(() => {
+      UseAnimateGroup = useAnimateGroup({
+        sequences: [],
+      });
+      return UseAnimateGroup;
+    });
+
+    act(() => {
+      UseAnimateGroup.play(true);
+    });
+    expect(UseAnimateGroup.isPlaying).toEqual(true);
+
+    act(() => {
+      UseAnimateGroup.play(false);
+    });
+    expect(UseAnimateGroup.isPlaying).toEqual(false);
+
     act(() => {
       UseAnimateGroup.play(true);
-      expect(componentStyle).toEqual([
-        { opacity: 1, transition: 'all 0.3s linear 0s' },
-        { animation: '0.3s linear 0.3s 1 normal none running test' },
-        { opacity: 1, transition: 'all 0.3s linear 0.6s' },
-        {
-          animation:
-            '0.3s linear 0.8999999999999999s 1 normal none running test',
-        },
-      ]);
     });
+    expect(UseAnimateGroup.isPlaying).toEqual(true);
   });
 });

src/useAnimateGroup.ts

@@ -35,7 +35,6 @@ export default function useAnimateGroup(props: Props): {
   const styleTagRef = React.useRef<{ forward?: string; reverse?: string }[]>(
     [],
   );
-  const playRef = React.useRef<(isPlay: boolean) => void>();
 
   React.useEffect(() => {
     sequences.forEach(({ keyframes = false }, i): void => {
@@ -76,51 +75,48 @@ export default function useAnimateGroup(props: Props): {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  playRef.current = playRef.current
-    ? playRef.current
-    : (isPlay: boolean) => {
-        let totalDuration = 0;
-        const animationRefWithOrder = isPlay
-          ? animationNamesRef.current
-          : [...animationNamesRef.current].reverse();
-        const styles = (isPlay ? sequences : [...sequences].reverse()).map(
-          (current, currentIndex): React.CSSProperties => {
-            const {
-              duration = DEFAULT_DURATION,
-              delay = 0,
-              overlay,
-              keyframes,
-              iterationCount = 1,
-              easeType = DEFAULT_EASE_TYPE,
-              direction = DEFAULT_DIRECTION,
-              fillMode = DEFAULT_FILLMODE,
-              end = {},
-              start = {},
-            } = current;
-            const delayDuration = currentIndex === 0 ? delay : totalDuration;
-            const transition = `${ALL} ${duration}s ${easeType} ${delayDuration}s`;
-            totalDuration =
-              calculateTotalDuration({ duration, delay, overlay }) +
-              totalDuration;
+  const play = React.useCallback((isPlay: boolean) => {
+    let totalDuration = 0;
+    const animationRefWithOrder = isPlay
+      ? animationNamesRef.current
+      : [...animationNamesRef.current].reverse();
+    const styles = (isPlay ? sequences : [...sequences].reverse()).map(
+      (current, currentIndex): React.CSSProperties => {
+        const {
+          duration = DEFAULT_DURATION,
+          delay = 0,
+          overlay,
+          keyframes,
+          iterationCount = 1,
+          easeType = DEFAULT_EASE_TYPE,
+          direction = DEFAULT_DIRECTION,
+          fillMode = DEFAULT_FILLMODE,
+          end = {},
+          start = {},
+        } = current;
+        const delayDuration = currentIndex === 0 ? delay : totalDuration;
+        const transition = `${ALL} ${duration}s ${easeType} ${delayDuration}s`;
+        totalDuration =
+          calculateTotalDuration({ duration, delay, overlay }) + totalDuration;
 
-            return keyframes
-              ? {
-                  animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${RUNNING} ${
-                    isPlay
-                      ? animationRefWithOrder[currentIndex].forward
-                      : animationRefWithOrder[currentIndex].reverse
-                  }`,
-                }
-              : {
-                  ...(isPlay ? end : start),
-                  transition,
-                };
-          },
-        );
+        return keyframes
+          ? {
+              animation: `${duration}s ${easeType} ${delayDuration}s ${iterationCount} ${direction} ${fillMode} ${RUNNING} ${
+                isPlay
+                  ? animationRefWithOrder[currentIndex].forward
+                  : animationRefWithOrder[currentIndex].reverse
+              }`,
+            }
+          : {
+              ...(isPlay ? end : start),
+              transition,
+            };
+      },
+    );
 
-        setStyles(isPlay ? styles : [...styles].reverse());
-        setPlaying(!isPlaying);
-      };
+    setStyles(isPlay ? styles : [...styles].reverse());
+    setPlaying(isPlay);
+  }, []);
 
-  return { styles, play: playRef.current, isPlaying };
+  return { styles, play, isPlaying };
 }