1 | import { Component, ReactNode } from 'react';
|
2 |
|
3 | type RefHandler<
|
4 | RefElement extends undefined | HTMLElement,
|
5 | ImplicitRefHandler extends (node: HTMLElement, ...args: any[]) => void,
|
6 | ExplicitRefHandler extends (...args: any[]) => void
|
7 | > = {
|
8 | implicit: ImplicitRefHandler;
|
9 | explicit: ExplicitRefHandler;
|
10 | }[RefElement extends undefined ? 'implicit' : 'explicit'];
|
11 |
|
12 | export type EndHandler<RefElement extends undefined | HTMLElement> = RefHandler<
|
13 | RefElement,
|
14 | (node: HTMLElement, done: () => void) => void,
|
15 | (done: () => void) => void
|
16 | >;
|
17 |
|
18 | export type EnterHandler<RefElement extends undefined | HTMLElement> = RefHandler<
|
19 | RefElement,
|
20 | (node: HTMLElement, isAppearing: boolean) => void,
|
21 | (isAppearing: boolean) => void
|
22 | >;
|
23 |
|
24 | export type ExitHandler<E extends undefined | HTMLElement> = RefHandler<E, (node: HTMLElement) => void, () => void>;
|
25 |
|
26 | export const UNMOUNTED = 'unmounted';
|
27 | export const EXITED = 'exited';
|
28 | export const ENTERING = 'entering';
|
29 | export const ENTERED = 'entered';
|
30 | export const EXITING = 'exiting';
|
31 |
|
32 | export interface TransitionActions {
|
33 | |
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | appear?: boolean | undefined;
|
41 |
|
42 | |
43 |
|
44 |
|
45 | enter?: boolean | undefined;
|
46 |
|
47 | |
48 |
|
49 |
|
50 | exit?: boolean | undefined;
|
51 | }
|
52 |
|
53 | interface BaseTransitionProps<RefElement extends undefined | HTMLElement> {
|
54 | |
55 |
|
56 |
|
57 | in?: boolean | undefined;
|
58 |
|
59 | |
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | mountOnEnter?: boolean | undefined;
|
67 |
|
68 | |
69 |
|
70 |
|
71 |
|
72 |
|
73 | unmountOnExit?: boolean | undefined;
|
74 |
|
75 | |
76 |
|
77 |
|
78 |
|
79 |
|
80 | onEnter?: EnterHandler<RefElement> | undefined;
|
81 |
|
82 | |
83 |
|
84 |
|
85 |
|
86 |
|
87 | onEntering?: EnterHandler<RefElement> | undefined;
|
88 |
|
89 | |
90 |
|
91 |
|
92 |
|
93 |
|
94 | onEntered?: EnterHandler<RefElement> | undefined;
|
95 |
|
96 | |
97 |
|
98 |
|
99 | onExit?: ExitHandler<RefElement> | undefined;
|
100 |
|
101 | |
102 |
|
103 |
|
104 | onExiting?: ExitHandler<RefElement> | undefined;
|
105 |
|
106 | |
107 |
|
108 |
|
109 | onExited?: ExitHandler<RefElement> | undefined;
|
110 |
|
111 | |
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | children?: TransitionChildren | undefined;
|
125 |
|
126 | |
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | nodeRef?: React.Ref<RefElement> | undefined;
|
133 |
|
134 | [prop: string]: any;
|
135 | }
|
136 |
|
137 | export type TransitionStatus = typeof ENTERING | typeof ENTERED | typeof EXITING | typeof EXITED | typeof UNMOUNTED;
|
138 | export type TransitionChildren = ReactNode | ((status: TransitionStatus) => ReactNode);
|
139 |
|
140 | interface TimeoutProps<RefElement extends undefined | HTMLElement> extends BaseTransitionProps<RefElement> {
|
141 | /**
|
142 | * The duration of the transition, in milliseconds. Required unless addEndListener is provided.
|
143 | *
|
144 | * You may specify a single timeout for all transitions:
|
145 | * ```js
|
146 | * timeout={500}
|
147 | * ```
|
148 | * or individually:
|
149 | * ```js
|
150 | * timeout={{
|
151 | * appear: 500,
|
152 | * enter: 300,
|
153 | * exit: 500,
|
154 | * }}
|
155 | * ```
|
156 | * - appear defaults to the value of `enter`
|
157 | * - enter defaults to `0`
|
158 | * - exit defaults to `0`
|
159 | */
|
160 | timeout: number | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined };
|
161 |
|
162 | /**
|
163 | * Add a custom transition end trigger. Called with the transitioning DOM
|
164 | * node and a done callback. Allows for more fine grained transition end
|
165 | * logic. Note: Timeouts are still used as a fallback if provided.
|
166 | */
|
167 | addEndListener?: EndHandler<RefElement> | undefined;
|
168 | }
|
169 |
|
170 | interface EndListenerProps<Ref extends undefined | HTMLElement> extends BaseTransitionProps<Ref> {
|
171 | /**
|
172 | * The duration of the transition, in milliseconds. Required unless addEndListener is provided.
|
173 | *
|
174 | * You may specify a single timeout for all transitions:
|
175 | * ```js
|
176 | * timeout={500}
|
177 | * ```
|
178 | * or individually:
|
179 | * ```js
|
180 | * timeout={{
|
181 | * appear: 500,
|
182 | * enter: 300,
|
183 | * exit: 500,
|
184 | * }}
|
185 | * ```
|
186 | * - appear defaults to the value of `enter`
|
187 | * - enter defaults to `0`
|
188 | * - exit defaults to `0`
|
189 | */
|
190 | timeout?: number | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined } | undefined;
|
191 | /**
|
192 | * Add a custom transition end trigger. Called with the transitioning DOM
|
193 | * node and a done callback. Allows for more fine grained transition end
|
194 | * logic. Note: Timeouts are still used as a fallback if provided.
|
195 | */
|
196 | addEndListener: EndHandler<Ref>;
|
197 | }
|
198 |
|
199 | export type TransitionProps<RefElement extends undefined | HTMLElement = undefined> =
|
200 | | TimeoutProps<RefElement>
|
201 | | EndListenerProps<RefElement>;
|
202 |
|
203 | /**
|
204 | * The Transition component lets you describe a transition from one component
|
205 | * state to another _over time_ with a simple declarative API. Most commonly
|
206 | * It's used to animate the mounting and unmounting of Component, but can also
|
207 | * be used to describe in-place transition states as well.
|
208 | *
|
209 | * By default the `Transition` component does not alter the behavior of the
|
210 | * component it renders, it only tracks "enter" and "exit" states for the components.
|
211 | * It's up to you to give meaning and effect to those states. For example we can
|
212 | * add styles to a component when it enters or exits:
|
213 | *
|
214 | * ```jsx
|
215 | * import Transition from 'react-transition-group/Transition';
|
216 | *
|
217 | * const duration = 300;
|
218 | *
|
219 | * const defaultStyle = {
|
220 | * transition: `opacity ${duration}ms ease-in-out`,
|
221 | * opacity: 0,
|
222 | * }
|
223 | *
|
224 | * const transitionStyles = {
|
225 | * entering: { opacity: 1 },
|
226 | * entered: { opacity: 1 },
|
227 | * };
|
228 | *
|
229 | * const Fade = ({ in: inProp }) => (
|
230 | * <Transition in={inProp} timeout={duration}>
|
231 | * {(state) => (
|
232 | * <div style={{
|
233 | * ...defaultStyle,
|
234 | * ...transitionStyles[state]
|
235 | * }}>
|
236 | * I'm A fade Transition!
|
237 | * </div>
|
238 | * )}
|
239 | * </Transition>
|
240 | * );
|
241 | * ```
|
242 | *
|
243 | */
|
244 | declare class Transition<RefElement extends HTMLElement | undefined> extends Component<TransitionProps<RefElement>> {}
|
245 |
|
246 | export default Transition;
|
247 |
|
\ | No newline at end of file |