Merge pull request #475 from wellyshen/fix/on-finish

fix: `onFinish` event not working properly

Author: wellyshen

README.md

@@ -34,7 +34,7 @@ Using [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_
 - 🔩 Supports custom `refs` for [some reasons](#use-your-own-ref).
 - 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition.
 - 🗄️ Server-side rendering compatibility.
-- 🦔 Tiny size ([~ 4.4KB gzipped](https://bundlephobia.com/result?p=@wellyshen/use-web-animations)). No external dependencies, aside for the `react`.
+- 🦔 Tiny size ([~ 4.4kB gzipped](https://bundlephobia.com/result?p=@wellyshen/use-web-animations)). No external dependencies, aside for the `react`.
 
 ## Requirement
 

src/__tests__/useWebAnimations.ts

@@ -33,7 +33,6 @@ describe("useWebAnimations", () => {
     pending: true,
     playState: "pause",
     ready: Promise.resolve(e),
-    finished: Promise.resolve(e),
     pause: jest.fn(),
     finish: jest.fn(),
     cancel: jest.fn(),
@@ -69,8 +68,9 @@ describe("useWebAnimations", () => {
   it("should call onFinish correctly", async () => {
     console.error = jest.fn();
     const onFinish = jest.fn();
-    const { waitForNextUpdate } = renderHelper({ onFinish });
-    await waitForNextUpdate();
+    renderHelper({ onFinish });
+    // @ts-expect-error
+    el.animate.mock.results[0].value.onfinish({ target: e });
     expect(onFinish).toHaveBeenCalledWith({
       playState: e.playState,
       animation: e,
@@ -228,11 +228,6 @@ describe("useWebAnimations", () => {
     // @ts-expect-error
     animation.ready = null;
     renderHelper({ onReady: () => null });
-    expect(console.error).toHaveBeenCalledWith(eventErr("onReady"));
-
-    // @ts-expect-error
-    animation.finished = null;
-    renderHelper({ onFinish: () => null });
-    expect(console.error).toHaveBeenLastCalledWith(eventErr("onFinish"));
+    expect(console.error).toHaveBeenCalledWith(eventErr);
   });
 });

src/useWebAnimations.ts

@@ -4,8 +4,7 @@ import useLatest from "./useLatest";
 
 export const polyfillErr =
   "💡 use-web-animations: please install polyfill to use this hook. See https://github.com/wellyshen/use-web-animations##use-polyfill";
-export const eventErr = (type: string): string =>
-  `💡 use-web-animations: the browser doesn't support ${type} event, please use "onUpdate" to monitor the animation's state instead. See https://github.com/wellyshen/use-web-animations#basic-usage`;
+export const eventErr = `💡 use-web-animations: the browser doesn't support "onReady" event, please use "onUpdate" to monitor the animation's state instead. See https://github.com/wellyshen/use-web-animations#basic-usage`;
 
 type Keyframes = Keyframe[] | PropertyIndexedKeyframes;
 type PlayState = AnimationPlayState | undefined;
@@ -96,25 +95,23 @@ const useWebAnimations = <T extends HTMLElement | null>({
             });
           });
         } else {
-          console.error(eventErr("onReady"));
+          console.error(eventErr);
         }
       }
 
       if (onFinishRef.current) {
-        if (anim.finished) {
-          anim.finished.then((animation) => {
-            if (!hasUnmountedRef.current) {
-              // @ts-expect-error
-              onFinishRef.current({
-                playState: animation.playState,
-                animate,
-                animation,
-              });
-            }
-          });
-        } else {
-          console.error(eventErr("onFinish"));
-        }
+        anim.onfinish = (e) => {
+          const animation = e.target as Animation;
+
+          if (!hasUnmountedRef.current) {
+            // @ts-expect-error
+            onFinishRef.current({
+              playState: animation.playState,
+              animate,
+              animation,
+            });
+          }
+        };
       }
 
       prevPlayStateRef.current = undefined;