UNPKG

@atlaskit/motion

Version:

A set of utilities to apply motion in your application.

66 lines (65 loc) 2 kB
import React, { type Context, type ReactNode } from 'react'; export interface ExitingPersistenceProps { /** * Children can be any valid react node. * Either a single element, * multiple elements, * or multiple elements in an array. */ children?: ReactNode; /** * When elements are exiting will exit all elements first and then mount the new ones. * Defaults to `false`. */ exitThenEnter?: boolean; /** * When initially mounting if set to `true` all child motions will animate in. */ appear?: boolean; } /** * Internal data passed to child motions. */ export interface ExitingChildContext { /** * Whether this value was provided by an ExitingPersistence boundary. */ isInsideExitingPersistence: boolean; /** * Will perform an exit animation instead of an enter animation. */ isExiting: boolean; /** * Will be called when the animation has completed. */ onFinish?: () => void; /** * Used to tell the child motions to animate in when initially mounting. */ appear: boolean; } /** * __Exiting context__ * * An exiting context. */ export declare const ExitingContext: Context<ExitingChildContext>; /** * How does this component work? * * It looks at changes in its children to see what is removed. * * If a child is removed it clones it and wraps it with context providing an `onFinish` callback. * * The cloned child will call the `onFinish` when it finishes its exit animation, * which lets `ExitingPersistence` know to stop rendering it. */ /** * __ExitingPersistence__ * * Useful for enabling elements to persist and animate away when they are removed from the DOM. * * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motion) */ declare const ExitingPersistence: React.MemoExoticComponent<({ appear, children, exitThenEnter }: ExitingPersistenceProps) => any>; export default ExitingPersistence;