-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
Fade.js
84 lines (74 loc) · 1.9 KB
/
Fade.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import classNames from 'classnames';
import React from 'react';
import Transition from 'react-overlays/lib/Transition';
const propTypes = {
/**
* Show the component; triggers the fade in or fade out animation
*/
in: React.PropTypes.bool,
/**
* Wait until the first "enter" transition to mount the component (add it to the DOM)
*/
mountOnEnter: React.PropTypes.bool,
/**
* Unmount the component (remove it from the DOM) when it is faded out
*/
unmountOnExit: React.PropTypes.bool,
/**
* Run the fade in animation when the component mounts, if it is initially
* shown
*/
transitionAppear: React.PropTypes.bool,
/**
* Duration of the fade animation in milliseconds, to ensure that finishing
* callbacks are fired even if the original browser transition end events are
* canceled
*/
timeout: React.PropTypes.number,
/**
* Callback fired before the component fades in
*/
onEnter: React.PropTypes.func,
/**
* Callback fired after the component starts to fade in
*/
onEntering: React.PropTypes.func,
/**
* Callback fired after the has component faded in
*/
onEntered: React.PropTypes.func,
/**
* Callback fired before the component fades out
*/
onExit: React.PropTypes.func,
/**
* Callback fired after the component starts to fade out
*/
onExiting: React.PropTypes.func,
/**
* Callback fired after the component has faded out
*/
onExited: React.PropTypes.func,
};
const defaultProps = {
in: false,
timeout: 300,
mountOnEnter: false,
unmountOnExit: false,
transitionAppear: false,
};
class Fade extends React.Component {
render() {
return (
<Transition
{...this.props}
className={classNames(this.props.className, 'fade')}
enteredClassName="in"
enteringClassName="in"
/>
);
}
}
Fade.propTypes = propTypes;
Fade.defaultProps = defaultProps;
export default Fade;