@patreon/studio/module/hooks/useMountTransition/index.d.ts

Patreon Studio Design System

import type { SimpleInterpolation, FlattenInterpolation, ThemeProps } from 'styled-components';
import type { Theme } from '../../types/theme';
export declare type TransitionPhase = 'setup' | 'started' | 'complete';
interface UseMountTransitionProps {
    isActive: boolean;
    animationDuration: number;
    onAnimationComplete: () => void;
}
/**
 * This hook is used to manage the transition phases of a component that is being mounted or unmounted,
 * and provides a way to animate the component during these transitions.
 *
 * @param isActive - A boolean flag that determines if the component is currently active or not, e.g. for a dialog whether it's open or closed.
 * @param animationDuration - The duration of the animation in milliseconds.
 * @param onAnimationComplete - A callback function that is called when the animation is complete.
 *
 * @returns An object with the following properties:
 * - isMounted: A boolean flag that determines if the component should be mounted
 * - transitionPhase: A flag that represents the current transition phase.
 *
 * @deprecated This hook is deprecated and will be removed in a future release. Use the `Overlay` family of components instead.
 */
export declare function useMountTransition({ isActive, animationDuration, onAnimationComplete }: UseMountTransitionProps): {
    isMounted: boolean;
    transitionPhase: TransitionPhase;
};
interface MountTransitionProps {
    isActive: boolean;
    transitionPhase: TransitionPhase;
    transition: SimpleInterpolation | FlattenInterpolation<ThemeProps<Theme>>;
    mounted: SimpleInterpolation | FlattenInterpolation<ThemeProps<Theme>>;
    unmounted: SimpleInterpolation | FlattenInterpolation<ThemeProps<Theme>>;
}
/**
 * The `mountTransition` function is used in conjunction with the `useMountTransition` hook to
 * generate the CSS for animating a component when it is mounted or unmounted. This function
 * should be used in a styled component to apply the transition styles.
 
 * @param isActive - A boolean flag that determines if the component is active
 * @param transitionPhase - A flag that represents the current transition phase.
 * @param transition - The CSS transition styles to apply to the component during animation.
 * @param mounted - The CSS styles to apply to the component when it is mounted.
 * @param unmounted - The CSS styles to apply to the component when it is unmounted.
 *
 * @returns The CSS styles to apply to the component during the transition.
 *
 * @deprecated This function is deprecated and will be removed in a future release. Use the `Overlay` family of components instead.
 */
export declare function cssForMountTransition({ isActive, transitionPhase, transition, mounted, unmounted, }: MountTransitionProps): FlattenInterpolation<ThemeProps<any>>;
export {};