1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | 'use strict';
|
10 |
|
11 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
12 |
|
13 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
14 |
|
15 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
16 |
|
17 | var React = require('./React');
|
18 | var ReactAddonsDOMDependencies = require('./ReactAddonsDOMDependencies');
|
19 |
|
20 | var propTypesFactory = require('prop-types/factory');
|
21 | var PropTypes = propTypesFactory(React.isValidElement);
|
22 |
|
23 | var CSSCore = require('fbjs/lib/CSSCore');
|
24 | var ReactTransitionEvents = require('./ReactTransitionEvents');
|
25 |
|
26 | var onlyChild = require('./onlyChild');
|
27 |
|
28 | var TICK = 17;
|
29 |
|
30 | var ReactCSSTransitionGroupChild = function (_React$Component) {
|
31 | _inherits(ReactCSSTransitionGroupChild, _React$Component);
|
32 |
|
33 | function ReactCSSTransitionGroupChild() {
|
34 | var _temp, _this, _ret;
|
35 |
|
36 | _classCallCheck(this, ReactCSSTransitionGroupChild);
|
37 |
|
38 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
39 | args[_key] = arguments[_key];
|
40 | }
|
41 |
|
42 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this._isMounted = false, _this.transition = function (animationType, finishCallback, userSpecifiedDelay) {
|
43 | var node = ReactAddonsDOMDependencies.getReactDOM().findDOMNode(_this);
|
44 |
|
45 | if (!node) {
|
46 | if (finishCallback) {
|
47 | finishCallback();
|
48 | }
|
49 | return;
|
50 | }
|
51 |
|
52 | var className = _this.props.name[animationType] || _this.props.name + '-' + animationType;
|
53 | var activeClassName = _this.props.name[animationType + 'Active'] || className + '-active';
|
54 | var timeout = null;
|
55 |
|
56 | var endListener = function (e) {
|
57 | if (e && e.target !== node) {
|
58 | return;
|
59 | }
|
60 |
|
61 | clearTimeout(timeout);
|
62 |
|
63 | CSSCore.removeClass(node, className);
|
64 | CSSCore.removeClass(node, activeClassName);
|
65 |
|
66 | ReactTransitionEvents.removeEndEventListener(node, endListener);
|
67 |
|
68 |
|
69 |
|
70 | if (finishCallback) {
|
71 | finishCallback();
|
72 | }
|
73 | };
|
74 |
|
75 | CSSCore.addClass(node, className);
|
76 |
|
77 |
|
78 | _this.queueClassAndNode(activeClassName, node);
|
79 |
|
80 |
|
81 | if (userSpecifiedDelay) {
|
82 |
|
83 | timeout = setTimeout(endListener, userSpecifiedDelay);
|
84 | _this.transitionTimeouts.push(timeout);
|
85 | } else {
|
86 |
|
87 | ReactTransitionEvents.addEndEventListener(node, endListener);
|
88 | }
|
89 | }, _this.queueClassAndNode = function (className, node) {
|
90 | _this.classNameAndNodeQueue.push({
|
91 | className: className,
|
92 | node: node
|
93 | });
|
94 |
|
95 | if (!_this.timeout) {
|
96 | _this.timeout = setTimeout(_this.flushClassNameAndNodeQueue, TICK);
|
97 | }
|
98 | }, _this.flushClassNameAndNodeQueue = function () {
|
99 | if (_this._isMounted) {
|
100 | _this.classNameAndNodeQueue.forEach(function (obj) {
|
101 | CSSCore.addClass(obj.node, obj.className);
|
102 | });
|
103 | }
|
104 | _this.classNameAndNodeQueue.length = 0;
|
105 | _this.timeout = null;
|
106 | }, _this.componentWillAppear = function (done) {
|
107 | if (_this.props.appear) {
|
108 | _this.transition('appear', done, _this.props.appearTimeout);
|
109 | } else {
|
110 | done();
|
111 | }
|
112 | }, _this.componentWillEnter = function (done) {
|
113 | if (_this.props.enter) {
|
114 | _this.transition('enter', done, _this.props.enterTimeout);
|
115 | } else {
|
116 | done();
|
117 | }
|
118 | }, _this.componentWillLeave = function (done) {
|
119 | if (_this.props.leave) {
|
120 | _this.transition('leave', done, _this.props.leaveTimeout);
|
121 | } else {
|
122 | done();
|
123 | }
|
124 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
125 | }
|
126 |
|
127 | ReactCSSTransitionGroupChild.prototype.componentWillMount = function componentWillMount() {
|
128 | this.classNameAndNodeQueue = [];
|
129 | this.transitionTimeouts = [];
|
130 | };
|
131 |
|
132 | ReactCSSTransitionGroupChild.prototype.componentDidMount = function componentDidMount() {
|
133 | this._isMounted = true;
|
134 | };
|
135 |
|
136 | ReactCSSTransitionGroupChild.prototype.componentWillUnmount = function componentWillUnmount() {
|
137 | this._isMounted = false;
|
138 |
|
139 | if (this.timeout) {
|
140 | clearTimeout(this.timeout);
|
141 | }
|
142 | this.transitionTimeouts.forEach(function (timeout) {
|
143 | clearTimeout(timeout);
|
144 | });
|
145 |
|
146 | this.classNameAndNodeQueue.length = 0;
|
147 | };
|
148 |
|
149 | ReactCSSTransitionGroupChild.prototype.render = function render() {
|
150 | return onlyChild(this.props.children);
|
151 | };
|
152 |
|
153 | return ReactCSSTransitionGroupChild;
|
154 | }(React.Component);
|
155 |
|
156 | ReactCSSTransitionGroupChild.propTypes = {
|
157 | name: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
158 | enter: PropTypes.string,
|
159 | leave: PropTypes.string,
|
160 | active: PropTypes.string
|
161 | }), PropTypes.shape({
|
162 | enter: PropTypes.string,
|
163 | enterActive: PropTypes.string,
|
164 | leave: PropTypes.string,
|
165 | leaveActive: PropTypes.string,
|
166 | appear: PropTypes.string,
|
167 | appearActive: PropTypes.string
|
168 | })]).isRequired,
|
169 |
|
170 |
|
171 |
|
172 |
|
173 | appear: PropTypes.bool,
|
174 | enter: PropTypes.bool,
|
175 | leave: PropTypes.bool,
|
176 | appearTimeout: PropTypes.number,
|
177 | enterTimeout: PropTypes.number,
|
178 | leaveTimeout: PropTypes.number
|
179 | };
|
180 |
|
181 |
|
182 | module.exports = ReactCSSTransitionGroupChild; |
\ | No newline at end of file |