@alifd/next/types/animate/types.d.ts

import React, { type ReactElement } from 'react';
import type { CommonProps } from '../util';
export interface AnimateChildProps {
    names?: {
        appear: string | undefined;
        appearActive: string;
        enter: string;
        enterActive: string;
        leave: string;
        leaveActive: string;
    };
    onAppear?: (node: HTMLElement) => void;
    onAppeared?: (node: HTMLElement) => void;
    onAppearing?: (node: HTMLElement) => void;
    onEnter?: (node: HTMLElement) => void;
    onEntering?: (node: HTMLElement) => void;
    onEntered?: (node: HTMLElement) => void;
    onExit?: (node: HTMLElement) => void;
    onExiting?: (node: HTMLElement) => void;
    onExited?: (node: HTMLElement) => void;
}
/**
 * @api Animate
 */
export interface AnimateProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
    /**
     * 动画 className
     * @en The animation className
     */
    animation?: string | Partial<Record<'appear' | 'enter' | 'leave', string>>;
    /**
     * 子元素第一次挂载时是否执行动画
     * @en Whether to execute animation on the first mount
     * @defaultValue true
     */
    animationAppear?: boolean;
    /**
     * 包裹子元素的标签
     * @en The tag of the wrapper
     * @defaultValue 'div'
     */
    component?: React.ElementType;
    /**
     * 是否只有单个子元素，如果有多个子元素，请设置为 false
     * @en Whether to only have a single child
     * @defaultValue true
     */
    singleMode?: boolean;
    /**
     * 执行第一次挂载动画前触发的回调函数
     * @en Callback fired before the "entering" status of the first mount is applied
     */
    beforeAppear?: (node: HTMLElement) => void;
    /**
     * 执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数
     * @en Callback fired after the "entering" status of the first mount is applied
     */
    onAppear?: (node: HTMLElement) => void;
    /**
     * 执行完第一次挂载动画后触发的函数
     * @en Callback fired after the "entered" status of the first mount is applied
     */
    afterAppear?: (node: HTMLElement) => void;
    /**
     * 执行进场动画前触发的回调函数
     * @en Callback fired before the "entering" status is applied
     */
    beforeEnter?: (node: HTMLElement) => void;
    /**
     * 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数
     * @en Callback fired after the "entering" status is applied
     */
    onEnter?: (node: HTMLElement) => void;
    /**
     * 执行完进场动画后触发的回调函数
     * @en Callback fired after the "entered" status is applied
     */
    afterEnter?: (node: HTMLElement) => void;
    /**
     * 执行离场动画前触发的回调函数
     * @en Callback fired before the "exiting" status is applied
     */
    beforeLeave?: (node: HTMLElement) => void;
    /**
     * 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数
     * @en Callback fired after the leave stage
     */
    onLeave?: (node: HTMLElement) => void;
    /**
     * 执行完离场动画后触发的回调函数
     * @en Callback fired after the leave stage
     */
    afterLeave?: (node: HTMLElement) => void;
}
/**
 * @api Animate.Expand
 */
export interface ExpandProps extends Omit<AnimateProps, 'animation' | 'beforeEnter' | 'onEnter' | 'afterEnter' | 'beforeLeave' | 'onLeave' | 'afterLeave'> {
    /**
     * 动画 className
     * @en The animation className
     */
    animation?: string | Partial<Record<'appear' | 'enter' | 'leave', string>>;
    /**
     * 执行进场动画前触发的回调函数
     * @en Callback fired before the "entering" status is applied
     */
    beforeEnter?: (node: HTMLElement) => void;
    /**
     * 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数
     * @en Callback fired after the "entering" status is applied
     */
    onEnter?: (node: HTMLElement) => void;
    /**
     * 执行完进场动画后触发的回调函数
     * @en Callback fired after the "entered" status is applied
     */
    afterEnter?: (node: HTMLElement) => void;
    /**
     * 执行离场动画前触发的回调函数
     * @en Callback fired before the "exiting" status is applied
     */
    beforeLeave?: (node: HTMLElement) => void;
    /**
     * 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数
     * @en Callback fired after the "exiting" status is applied
     */
    onLeave?: (node: HTMLElement) => void;
    /**
     * 执行完离场动画后触发的回调函数
     * @en Callback fired after the "exited" status is applied
     */
    afterLeave?: (node: HTMLElement) => void;
}
/**
 * @api Animate.OverlayAnimate
 */
export interface OverlayAnimateProps {
    /**
     * 动画 className
     * @en The animation className
     */
    animation?: string | false | Record<'in' | 'out', string>;
    /**
     * 是否显示
     * @en Show the component; triggers the enter or exit states
     */
    visible?: boolean;
    /**
     * 子元素
     * @en The element to be wrapped
     */
    children: ReactElement;
    /**
     * 过渡的超时时间。
     * @en The duration of the transition.
     * @example
     * 你可以为所有的过渡指定一个超时时间：
     * ```js
     *   timeout={500}
     * ```
     * 或者分别设置
     * ```js
     *   timeout={{
     *     appear: 500,
     *     enter: 300,
     *     exit: 500,
     *   }}
     * ```
     * appear 默认值为 `enter` 的值
     * enter 默认值为 `0`
     * exit 默认值为 `0`
     * -
     * You may specify a single timeout for all transitions:
     * ```js
     *   timeout={500}
     * ```
     * or individually:
     * ```js
     * timeout={{
     *  appear: 500,
     *  enter: 300,
     *  exit: 500,
     * }}
     * ```
     * appear defaults to the value of `enter`
     * enter defaults to `0`
     * exit defaults to `0`
     */
    timeout?: number | {
        appear?: number | undefined;
        enter?: number | undefined;
        exit?: number | undefined;
    };
    /**
     * 子元素样式
     * @en The style of the child element
     */
    style?: React.CSSProperties;
    /**
     * 在第一次 `in={true}` 时“惰性”挂载组件
     * @en "lazy mount" the component on the first `in={true}`
     * @remarks
     * 默认情况下，子元素会在 OverlayAnimate 组件挂载时立即挂载。如果您想在第一次 `in={true}` 时“惰性”挂载组件，
     * 可以设置 `mountOnEnter`。在第一次进入后 OverlayAnimate 组件将保持挂载，即使在“退出”状态下也是如此，除非您也指定了 `unmountOnExit`。
     * -
     * By default the child component is mounted immediately along with the
     * parent OverlayAnimate component. If you want to "lazy mount" the component on
     * the first `in={true}` you can set `mountOnEnter`. After the first enter
     * OverlayAnimate the component will stay mounted, even on "exited", unless you
     * also specify `unmountOnExit`.
     * @defaultValue false
     */
    mountOnEnter?: boolean;
    /**
     * 在第一次 `in={false}` 时“惰性”卸载组件
     * @en "lazy unmount" the component on the first `in={false}`
     * @remarks
     * 默认情况下，子元素会在 OverlayAnimate 组件离开时立即卸载。如果您想在第一次 `in={false}` 时“惰性”卸载组件，
     * 可以设置 `unmountOnExit`。在第一次离开后 OverlayAnimate 组件将保持卸载，即使在“进入”状态下也是如此，除非您也指定了 `mountOnEnter`。
     * -
     * By default the child component stays mounted after it reaches the
     * 'exited' state. Set `unmountOnExit` if you'd prefer to unmount the
     * component after it finishes exiting.
     * @defaultValue false
     */
    unmountOnExit?: boolean;
    /**
     * 在“进入”状态被应用前触发的回调。
     * @en Callback fired before the "entering" status is applied.
     * @param isAppearing - 是否在初次挂载 - isAppearing
     */
    onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
    /**
     * 在“进入”状态被应用后触发的回调。
     * @en Callback fired after the "entering" status is applied.
     * @param isAppearing - 是否在初次挂载 - isAppearing
     */
    onEntering?: (node: HTMLElement, isAppearing: boolean) => void;
    /**
     * 在“已进入”状态被应用后触发的回调。
     * @en Callback fired after the "entered" status is applied.
     * @param isAppearing - 是否在初次挂载 - isAppearing
     */
    onEntered?: (node: HTMLElement, isAppearing: boolean) => void;
    /**
     * 在“离开”状态被应用前触发的回调。
     * @en Callback fired before the "exiting" status is applied.
     */
    onExit?: (node: HTMLElement) => void;
    /**
     * 在“离开”状态被应用后触发的回调。
     * @en Callback fired after the "exiting" status is applied.
     */
    onExiting?: (node: HTMLElement) => void;
    /**
     * 在“已离开”状态被应用后触发的回调。
     * @en Callback fired after the "exited" status is applied.
     */
    onExited?: (node: HTMLElement) => void;
    /**
     * 初次挂载时实现过渡效果
     * @en transition on the first mount.
     * @remarks
     * 正常情况下，如果组件在<OverlayAnimate>组件挂载时就已经显示，那么它不会进行过渡效果。
     * 如果你想在初次挂载时实现过渡效果，请将 appear 属性设置为 true，这样当<OverlayAnimate>挂载时，组件会立即开始过渡过程。
     * 请注意，并没有专门的“出现”状态。“出现”属性仅会在初始挂载时增加一次进入过渡效果。
     * -
     * Normally a component is not transitioned if it is shown when the
     * `<OverlayAnimate>` component mounts. If you want to transition on the first
     * mount set  appear to true, and the component will transition in as soon
     * as the `<OverlayAnimate>` mounts. Note: there are no specific "appear" states.
     * appear only adds an additional enter transition.
     */
    appear?: boolean;
    /**
     * 启用或禁用进场动画
     * @en Enable or disable enter transitions.
     */
    enter?: boolean;
    /**
     * 启用或禁用离场动画
     * @en Enable or disable exit transitions.
     */
    exit?: boolean;
}