All files / src/motion/features animations.ts

100% Statements 23/23
86.36% Branches 19/22
100% Functions 4/4
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4533x 33x 33x 33x 33x 33x 33x     33x   932x           932x         932x 72x         412x 206x 206x   206x 52x 52x           52x        
import { useContext, useEffect } from "react"
import { isAnimationControls } from "../../animation/utils/is-animation-controls"
import { usePresence } from "../../components/AnimatePresence/use-presence"
import { PresenceContext } from "../../context/PresenceContext"
import { createAnimationState } from "../../render/utils/animation-state"
import { AnimationType } from "../../render/utils/types"
import { makeRenderlessComponent } from "../utils/make-renderless-component"
import { FeatureComponents, FeatureProps } from "./types"
 
export const animations: FeatureComponents = {
    animation: makeRenderlessComponent(
        ({ visualElement, animate }: FeatureProps) => {
            /**
             * We dynamically generate the AnimationState manager as it contains a reference
             * to the underlying animation library. We only want to load that if we load this,
             * so people can optionally code split it out using the `m` component.
             */
            visualElement.animationState ||= createAnimationState(visualElement)
 
            /**
             * Subscribe any provided AnimationControls to the component's VisualElement
             */
            if (isAnimationControls(animate)) {
                useEffect(() => animate.subscribe(visualElement), [animate])
            }
        }
    ),
    exit: makeRenderlessComponent((props: FeatureProps) => {
        const { custom, visualElement } = props
        const [isPresent, safeToRemove] = usePresence()
        const presenceContext = useContext(PresenceContext)
 
        useEffect(() => {
            visualElement.isPresent = isPresent
            const animation = visualElement.animationState?.setActive(
                AnimationType.Exit,
                !isPresent,
                { custom: presenceContext?.custom ?? custom }
            )
 
            !isPresent && animation?.then(safeToRemove)
        }, [isPresent])
    }),
}