fix: fix Transition component & add Counter example

Author: fakundo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transitioning",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React components for easily implementing basic CSS animations and transitions",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

src/Transition.tsx

@@ -107,7 +107,7 @@ export type TransitionProps = {
 };
 
 const EVENT_MAP: {
-  [key in TransitionPhase]: [TransitionPhaseEvent, TransitionPhase?, boolean?];
+  [key in TransitionPhase]: [eventName: TransitionPhaseEvent, nextPhase?: TransitionPhase, delay?: boolean];
 } = {
   [TransitionPhase.APPEAR]: [TransitionPhaseEvent.ENTER, TransitionPhase.APPEAR_ACTIVE],
   [TransitionPhase.APPEAR_ACTIVE]: [TransitionPhaseEvent.ENTERING, TransitionPhase.APPEAR_DONE, true],
@@ -159,6 +159,7 @@ export function Transition(props: TransitionProps) {
     const { [eventName]: event } = props;
     event?.();
     let tm = 0;
+    let af = 0;
     if (nextPhase) {
       if (delay) {
         if (addEndListener) {
@@ -167,11 +168,12 @@ export function Transition(props: TransitionProps) {
           tm = setTimeout(setPhase, duration, nextPhase);
         }
       } else {
-        tm = setTimeout(setPhase, 0, nextPhase);
+        af = requestAnimationFrame(() => setPhase(nextPhase));
       }
     }
     return () => {
       clearTimeout(tm);
+      cancelAnimationFrame(af);
     };
   }, [phase, duration]);
 

src/TransitionGroup.tsx

@@ -41,11 +41,6 @@ type VisibleElement = {
   removeTimeout?: number;
 };
 
-const getChildProp = <T,>(child: React.ReactElement<any>, propName: string, defaultValue: T): T => {
-  const { [propName]: prop = defaultValue } = child.props;
-  return prop;
-};
-
 /**
  * The `TransitionGroup` component handles a collection of `Transition` child elements
  * and applies transition animations when elements enter and exit the DOM.
@@ -69,37 +64,32 @@ export function TransitionGroup(props: TransitionGroupProps) {
     }
   });
 
-  const pushVisibleElement = (
+  const addVisibleElement = (
     element: VisibleElement['element'],
     removeTimeout?: VisibleElement['removeTimeout'],
   ) => {
     const elementClone = cloneElement(element, {
-      exit,
-      enter,
-      duration,
       in: !removeTimeout,
-      appear: firstRenderRef.current
-        ? getChildProp(element, 'appear', appear)
-        : getChildProp(element, 'enter', enter),
+      enter: false,
+      appear: firstRenderRef.current ? (element.props.appear ?? appear) : (element.props.enter ?? enter),
+      exit: element.props.exit ?? exit,
+      duration: element.props.duration ?? duration,
     });
 
     nextVisibleElements.push({ element, removeTimeout });
     nextElements.push(elementClone);
   };
 
   const makeRemoveTimeout = (elementToRemove: VisibleElement['element']) =>
-    window.setTimeout(
-      () => {
-        const { current: prevVisibleChildren } = prevVisibleElementsRef;
-        const indexToDelete = prevVisibleChildren.findIndex(
-          ({ element }) => element.key === elementToRemove.key,
-        );
-        if (indexToDelete >= 0) {
-          prevVisibleChildren.splice(indexToDelete, 1);
-        }
-      },
-      getChildProp(elementToRemove, 'duration', duration),
-    );
+    window.setTimeout(() => {
+      const { current: prevVisibleChildren } = prevVisibleElementsRef;
+      const indexToDelete = prevVisibleChildren.findIndex(
+        ({ element }) => element.key === elementToRemove.key,
+      );
+      if (indexToDelete >= 0) {
+        prevVisibleChildren.splice(indexToDelete, 1);
+      }
+    }, elementToRemove.props.duration ?? duration);
 
   let lastAddedElementIndex = 0;
 
@@ -111,12 +101,12 @@ export function TransitionGroup(props: TransitionGroupProps) {
     if (foundIndex < 0) {
       // The visible element already has a removal timeout, which means it's currently exiting
       if (prevRemoveTimeout) {
-        pushVisibleElement(prevElement, prevRemoveTimeout);
+        addVisibleElement(prevElement, prevRemoveTimeout);
       } else {
         // Start the removal timeout, but continue rendering this element
-        const shouldAddTimeout = exit && prevElement.props.exit !== false;
+        const shouldAddTimeout = prevElement.props.exit ?? exit;
         if (shouldAddTimeout) {
-          pushVisibleElement(prevElement, makeRemoveTimeout(prevElement));
+          addVisibleElement(prevElement, makeRemoveTimeout(prevElement));
         }
       }
     } else {
@@ -126,7 +116,7 @@ export function TransitionGroup(props: TransitionGroupProps) {
       }
       // Add derived element along with all previous children
       for (let i = lastAddedElementIndex; i <= foundIndex; i += 1) {
-        pushVisibleElement(derivedElements[i]);
+        addVisibleElement(derivedElements[i]);
       }
     }
     // Save the index to loop only through the remaining element
@@ -135,7 +125,7 @@ export function TransitionGroup(props: TransitionGroupProps) {
 
   // Add the remaining elements
   for (let i = lastAddedElementIndex; i < derivedElements.length; i += 1) {
-    pushVisibleElement(derivedElements[i]);
+    addVisibleElement(derivedElements[i]);
   }
 
   // Save the visible elements

stories/examples/BasicTransition.stories.tsx

@@ -4,8 +4,7 @@ import { Transition } from 'react-transitioning';
 
 const META: Meta = {
   tags: ['!dev'],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: args => {
+  render: () => {
     const [visible, setVisible] = useState(true);
     const [alwaysMounted, setAlwaysMounted] = useState(true);
     const toggleVisibility = () => setVisible(!visible);

stories/examples/ConditionalRender.stories.tsx

@@ -5,8 +5,7 @@ import { FadeTransition } from '../misc/StyleFadeTransition';
 
 const META: Meta = {
   tags: ['!dev'],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: args => {
+  render: () => {
     const [showFirstItem, setShowFirstItem] = useState(true);
     const [showSecondItem, setShowSecondItem] = useState(true);
     const [showThirdItem, setShowThirdItem] = useState(true);

stories/examples/Counter.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as Stories from './Counter.stories';
+
+<Meta title="Examples/Transition Group/Basic Counter" />
+
+# Transition Group Example: Counter
+
+This example demonstrates how to use the `TransitionGroup` component to animate a counter as it updates. Each change in the counter triggers a smooth transition.
+
+## Live Demo
+
+Check out the live demo below to see the `TransitionGroup` in action:
+
+<Canvas of={Stories.Default} />
+
+## Source Code
+
+The source code for this example is available on [GitHub](https://github.com/fakundo/react-transitioning/blob/main/stories/examples/Counter.stories.tsx).

stories/examples/Counter.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TransitionGroup } from 'react-transitioning';
+import { useEffect, useState } from 'react';
+import { FadeTransition } from '../misc/StyleFadeTransition';
+
+const duration = 1000;
+
+const META: Meta = {
+  tags: ['!dev'],
+  render: () => {
+    const [sec, setSec] = useState(0);
+
+    useEffect(() => {
+      const i = setInterval(() => {
+        setSec(prevSec => prevSec + 1);
+      }, duration);
+      return () => {
+        clearInterval(i);
+      };
+    }, []);
+
+    return (
+      <TransitionGroup duration={duration}>
+        <FadeTransition key={sec}>
+          <div style={{ fontSize: 60, fontFamily: 'monospace' }}>{sec}</div>
+        </FadeTransition>
+      </TransitionGroup>
+    );
+  },
+};
+
+export default META;
+
+export const Default: StoryObj<typeof META> = {};

stories/examples/FadeTransitionClassNames.stories.tsx

@@ -4,8 +4,7 @@ import { FadeTransition } from '../misc/CSSFadeTransition';
 
 const META: Meta = {
   tags: ['!dev'],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: args => {
+  render: () => {
     const [visible, setVisible] = useState(true);
     return (
       <>

stories/examples/FadeTransitionStyles.stories.tsx

@@ -4,8 +4,7 @@ import { FadeTransition } from '../misc/StyleFadeTransition';
 
 const META: Meta = {
   tags: ['!dev'],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: args => {
+  render: () => {
     const [visible, setVisible] = useState(true);
     return (
       <>

stories/examples/ItemList.stories.tsx

@@ -7,8 +7,7 @@ const makeItem = () => `ITEM:${Math.random().toString().substring(2, 8)}`;
 
 const META: Meta = {
   tags: ['!dev'],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: args => {
+  render: () => {
     const [shouldAnimateShuffle, setShouldAnimateShuffle] = useState(false);
     const [items, setItems] = useState(() => new Array(10).fill('').map(makeItem));