Created defintions for react-motion

* started react motion definitions implementation

* added  tests

* test from repo

* updated definitions

* chenaged to tsx

* Update react-motion-tests.tsx

* Update react-motion-tests.tsx
This commit is contained in:
Stepan Mikhaylyuk
2016-04-06 20:53:20 +09:00
committed by Masahiro Wakame
parent 5217b3c972
commit 6590dbdd15
2 changed files with 104 additions and 0 deletions
+17
View File
@@ -0,0 +1,17 @@
/// <reference path="../react/react.d.ts" />
/// <reference path="./react-motion.d.ts"/>
import * as React from 'react';
import {Motion, spring} from 'react-motion';
class Root extends React.Component<{}, {}> {
render() {
return (
<Motion defaultStyle={{ x: 0 }} style = {{ x: spring(10) }}>
{(value: any) => <div>{ value.x } </div>}
</Motion>
);
}
}
+87
View File
@@ -0,0 +1,87 @@
// 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 path="../react/react.d.ts" />
declare module "react-motion" {
import { 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 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>) => __React.ReactElement<any>;
willEnter?: (styleThatEntered: TransitionStyle) => PlainStyle;
willLeave?: (styleThatLeft: TransitionStyle) => Style;
}
export class TransitionMotion extends Component<any, any> { }
interface StaggeredMotionProps {
defaultStyles?: Array<PlainStyle>;
styles: (previousInterpolatedStyles?: Array<PlainStyle>) => Array<Style>;
}
export 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 function spring(val: number, config?: SpringHelperConfig): OpaqueConfig;
export class Presets {
noWobble: OpaqueConfig; // the default, if nothing provided
gentle: OpaqueConfig;
wobbly: OpaqueConfig;
stiff: OpaqueConfig;
}
export const presets: Presets;
}