-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
/
Fade.js
119 lines (106 loc) · 2.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// @inheritedComponent Transition
import React from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
import { duration } from '../styles/transitions';
import withTheme from '../styles/withTheme';
import { reflow, getTransitionProps } from '../transitions/utils';
const styles = {
entering: {
opacity: 1,
},
entered: {
opacity: 1,
},
};
/**
* The Fade transition is used by the [Modal](/utils/modal/) component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
class Fade extends React.Component {
handleEnter = node => {
const { theme } = this.props;
reflow(node); // So the animation always start from the start.
const transitionProps = getTransitionProps(this.props, {
mode: 'enter',
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (this.props.onEnter) {
this.props.onEnter(node);
}
};
handleExit = node => {
const { theme } = this.props;
const transitionProps = getTransitionProps(this.props, {
mode: 'exit',
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (this.props.onExit) {
this.props.onExit(node);
}
};
render() {
const { children, onEnter, onExit, style: styleProp, theme, ...other } = this.props;
const style = {
...styleProp,
...(React.isValidElement(children) ? children.props.style : {}),
};
return (
<Transition appear onEnter={this.handleEnter} onExit={this.handleExit} {...other}>
{(state, childProps) =>
React.cloneElement(children, {
style: {
opacity: 0,
...styles[state],
...style,
},
...childProps,
})
}
</Transition>
);
}
}
Fade.propTypes = {
/**
* A single child content element.
*/
children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/**
* If `true`, the component will transition in.
*/
in: PropTypes.bool,
/**
* @ignore
*/
onEnter: PropTypes.func,
/**
* @ignore
*/
onExit: PropTypes.func,
/**
* @ignore
*/
style: PropTypes.object,
/**
* @ignore
*/
theme: PropTypes.object.isRequired,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
timeout: PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
]),
};
Fade.defaultProps = {
timeout: {
enter: duration.enteringScreen,
exit: duration.leavingScreen,
},
};
export default withTheme()(Fade);