DefinitelyTyped/react-motion/index.d.ts

// Type definitions for react-motion
// Project: https://github.com/chenglou/react-motion
// Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
// Definitions: https://github.com/borisyankov/DefinitelyTyped

/// <reference types="react" />

import { ReactElement, Component } from 'react';

// your typical style object given in props. Maps to a number or a spring config
export type Style = { [key: string]: number | OpaqueConfig };
// the interpolating style object, with the same keys as the above Style object,
// with the values mapped to numbers, naturally
export type PlainStyle = { [key: string]: number };
// internal velocity object. Similar to PlainStyle, but whose numbers represent
// speed. Might be exposed one day.
export type Velocity = { [key: string]: number };
interface SpringHelperConfig {
    stiffness: number;
    damping: number;
    /**
    * Specifies both the rounding of the interpolated value and the speed (internal).
    */
    precision?: number;
    // TODO: add onRest. Not public yet
}

export interface OpaqueConfig {
    val: number;
    stiffness: number;
    damping: number;
    precision: number;
    // TODO: add onRest. Not public yet
}

interface MotionProps {
    defaultStyle?: any;
    style: any;
}

export declare class Motion extends Component<MotionProps, any> { }

// === TransitionMotion ===
interface TransitionStyle {
    key: any; // unique ID to identify component across render animations
    data?: any; // optional data you want to carry along the style, e.g. itemText
    style: Style; // actual style you're passing
}
interface TransitionPlainStyle {
    key: any;
    data?: any;
    // same as TransitionStyle, passed as argument to style/children function
    style: PlainStyle;
}
type InterpolateFunction = (previousInterpolatedStyles?: Array<TransitionPlainStyle>) => Array<TransitionStyle>;
type Styles = Array<TransitionStyle> | InterpolateFunction;
interface TransitionProps {
    defaultStyles?: Array<TransitionPlainStyle>;
    styles: Styles;
    children: (interpolatedStyles: Array<TransitionPlainStyle>) => ReactElement<any>;
    willEnter?: (styleThatEntered: TransitionStyle) => PlainStyle;
    willLeave?: (styleThatLeft: TransitionStyle) => Style;
}
export declare class TransitionMotion extends Component<any, any> { }

interface StaggeredMotionProps {
    defaultStyles?: Array<PlainStyle>;
    styles: (previousInterpolatedStyles?: Array<PlainStyle>) => Array<Style>;
}
export declare class StaggeredMotion extends Component<StaggeredMotionProps, any> { }


/**
* Used in conjunction with the components below. Specifies the how to animate to the destination value, e.g. spring(10, {stiffness: 120, damping: 17}) means "animate to value 10, with a spring of stiffness 120 and damping 17".
*/
export declare function spring(val: number, config?: SpringHelperConfig): OpaqueConfig;

export declare class Presets {
    noWobble: OpaqueConfig; // the default, if nothing provided
    gentle: OpaqueConfig;
    wobbly: OpaqueConfig;
    stiff: OpaqueConfig;
}

export declare const presets: Presets;