1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import { Component, ReactElement } from 'react';
|
9 |
|
10 |
|
11 |
|
12 | export type Style = { [key: string]: number | OpaqueConfig };
|
13 |
|
14 |
|
15 | export type PlainStyle = { [key: string]: number };
|
16 |
|
17 |
|
18 | export type Velocity = { [key: string]: number };
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | interface SpringHelperConfig {
|
24 | |
25 |
|
26 |
|
27 |
|
28 | stiffness?: number | undefined;
|
29 | |
30 |
|
31 |
|
32 |
|
33 | damping?: number | undefined;
|
34 | |
35 |
|
36 |
|
37 |
|
38 | precision?: number | undefined;
|
39 | }
|
40 |
|
41 |
|
42 | export interface OpaqueConfig {
|
43 | val: number;
|
44 | stiffness: number;
|
45 | damping: number;
|
46 | precision: number;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | interface MotionProps {
|
53 | |
54 |
|
55 |
|
56 |
|
57 | defaultStyle?: PlainStyle | undefined;
|
58 | |
59 |
|
60 |
|
61 |
|
62 | style: Style;
|
63 | |
64 |
|
65 |
|
66 |
|
67 | children?: ((interpolatedStyle: PlainStyle) => JSX.Element) | undefined;
|
68 | /**
|
69 | * The callback that fires when the animation comes to a rest.
|
70 | */
|
71 | onRest?: (() => void) | undefined;
|
72 | }
|
73 |
|
74 | export declare class Motion extends Component<MotionProps> { }
|
75 |
|
76 | // === TransitionMotion ===
|
77 | interface TransitionStyle {
|
78 | /**
|
79 | * The ID that TransitionMotion uses to track which configuration is which across renders, even when things are reordered.
|
80 | * Typically reused as the component key when you map over the interpolated styles.
|
81 | */
|
82 | key: string;
|
83 | /**
|
84 | * Anything you'd like to carry along. Will be preserved on re-renders until key off
|
85 | */
|
86 | data?: any;
|
87 | /**
|
88 | * Actual starting style configuration
|
89 | */
|
90 | style: Style; // actual style you're passing
|
91 | }
|
92 | /**
|
93 | * Default style for transition
|
94 | */
|
95 | interface TransitionPlainStyle {
|
96 | key: string;
|
97 | data?: any;
|
98 | // same as TransitionStyle, passed as argument to style/children function
|
99 | style: PlainStyle;
|
100 | }
|
101 | type InterpolateFunction = (previousInterpolatedStyles?: Array<TransitionPlainStyle>) => Array<TransitionStyle>;
|
102 |
|
103 |
|
104 |
|
105 | interface TransitionProps {
|
106 | |
107 |
|
108 |
|
109 | defaultStyles?: Array<TransitionPlainStyle> | undefined;
|
110 | |
111 |
|
112 |
|
113 |
|
114 | styles: Array<TransitionStyle> | InterpolateFunction;
|
115 | children?: ((interpolatedStyles: Array<TransitionPlainStyle>) => JSX.Element) | undefined;
|
116 | /**
|
117 | * Triggers when a new element will appear
|
118 | * @param styleThatEntered
|
119 | */
|
120 | willEnter?: ((styleThatEntered: TransitionStyle) => PlainStyle) | undefined;
|
121 | /**
|
122 | * Triggers when an element will disappear
|
123 | * @param styleThatLeft
|
124 | */
|
125 | willLeave?: ((styleThatLeft: TransitionStyle) => Style | void) | undefined;
|
126 | /**
|
127 | * Triggers when an element has disappeared
|
128 | * @param styleThatLeft
|
129 | */
|
130 | didLeave?: ((styleThatLeft: TransitionStyle) => void) | undefined;
|
131 | }
|
132 | export class TransitionMotion extends Component<TransitionProps> { }
|
133 |
|
134 |
|
135 | interface StaggeredMotionProps {
|
136 | children: (interpolatedStyles: any) => React.ReactElement;
|
137 | |
138 |
|
139 |
|
140 | defaultStyles?: Array<PlainStyle> | undefined;
|
141 | |
142 |
|
143 |
|
144 |
|
145 | styles: (previousInterpolatedStyles?: Array<PlainStyle>) => Array<Style>;
|
146 | }
|
147 | export declare class StaggeredMotion extends Component<StaggeredMotionProps> { }
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | export declare function spring(val: number, config?: SpringHelperConfig): OpaqueConfig;
|
154 |
|
155 | export declare class Presets {
|
156 | noWobble: OpaqueConfig;
|
157 | gentle: OpaqueConfig;
|
158 | wobbly: OpaqueConfig;
|
159 | stiff: OpaqueConfig;
|
160 | }
|
161 |
|
162 | export declare const presets: Presets;
|