kinetic-components/dist/src/types.d.ts

Use CSS animations or your favorite JS animation library to animate a single React component or orchestrate animations amongst a collection of React components.

/// <reference types="react" />
import { ILogger } from 'beano';
export declare type AnimationState = 'restarting' | 'initalizing' | 'running' | 'finished' | 'unmounted';
export declare type NotifyParentOfState = (id: string, state: AnimationState) => void;
export declare type AnimationBinding = {
    notifyParentOfState: NotifyParentOfState;
    parentState: AnimationState;
    parentVisible: boolean;
};
/**
 * The state of the animation control component
 */
export declare type CurrentState<TriggerState> = {
    actionCount: number;
    currentState: AnimationState;
    hasRunForCycle: boolean;
    triggerState: TriggerState;
    prevTriggerState: TriggerState | undefined;
    childStates: {
        [childId: string]: AnimationState | undefined;
    };
    prevVisible: boolean | undefined;
    visible: boolean;
    classNames: string[];
    prevAnimationKey: string | undefined;
    animationKey: AnimationKey | undefined;
};
export declare type Predicate = <PS extends any, TS extends any>(predicateState: any, // TODO replace with PS once excessively deep type problem is fixed
{ triggerState, visible }: {
    prevTriggerState: any;
    triggerState: any;
    prevVisible: boolean | undefined;
    visible: boolean;
}) => boolean;
export declare type Predicates = Array<Predicate>;
export declare type AnimationCtx = {
    node: HTMLElement;
};
export interface IAnimationResult {
    finished: Promise<any>;
}
export declare type AnimationRun = {
    hasRun: boolean;
    ctx: AnimationCtx;
    animationResult: AnimationResult;
    animationKey?: AnimationKey;
};
/**
 * IAnimationResult for custom JS animations; string | string[] for CSS animation (these are class names)
 */
export declare type AnimationResult = IAnimationResult | string | string[] | null;
export declare type PredicateAnimation = (ctx: AnimationCtx) => AnimationResult;
export declare type AnimationKey = string;
export declare type PredicateAnimationPairOptions = {
    key: AnimationKey;
};
export declare type When = Array<[Predicates | Predicate, PredicateAnimation, PredicateAnimationPairOptions] | [Predicates | Predicate, PredicateAnimation]>;
export interface AnimateProps<PS, TS> {
    name?: string;
    logger?: ILogger;
    visible: boolean;
    triggerState?: TS;
    predicateState?: PS;
    when?: When;
    children?: React.ReactElement;
    unmountOnHide?: boolean;
    id?: string;
    animationBinding?: AnimationBinding;
    enterAfterParentStart?: boolean;
    enterAfterParentFinish?: boolean;
    exitAfterChildStart?: string[];
    exitAfterChildFinish?: string[];
}
export interface AnimateableProps {
    id?: string;
    className?: string;
    animationBinding?: AnimationBinding;
    style?: object;
    children?: (<P, T extends string>(animationBinding: AnimationBinding | undefined) => any) | React.ReactElement | Element;
}