Skip to content
This repository was archived by the owner on Apr 14, 2025. It is now read-only.

Commit d9be79e

Browse files
author
mr-winter
committed
added compiled assets
1 parent 1f0c7a8 commit d9be79e

File tree

3 files changed

+293
-1
lines changed

3 files changed

+293
-1
lines changed

‎.babelrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
{
2+
"stage": 0
23
}

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
npm-debug.log
44

55
# Exclude compiled files
6-
/lib
6+
# /lib
77

88
/demo/assets/app.js
99
/gh-pages

‎lib/ReactCSSTransitionReplace.js‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
/**
2+
* Adapted from ReactCSSTransitionGroup.js by Facebook
3+
*
4+
* @providesModule ReactCSSTransitionReplace
5+
*/
6+
7+
'use strict';
8+
9+
Object.defineProperty(exports, '__esModule', {
10+
value: true
11+
});
12+
13+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
14+
15+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
16+
17+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
18+
19+
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
20+
21+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
22+
23+
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; }
24+
25+
var _react = require('react');
26+
27+
var _react2 = _interopRequireDefault(_react);
28+
29+
var _reactDom = require('react-dom');
30+
31+
var _reactDom2 = _interopRequireDefault(_reactDom);
32+
33+
var _objectAssign = require('object-assign');
34+
35+
var _objectAssign2 = _interopRequireDefault(_objectAssign);
36+
37+
var _reactLibReactCSSTransitionGroupChild = require('react/lib/ReactCSSTransitionGroupChild');
38+
39+
var _reactLibReactCSSTransitionGroupChild2 = _interopRequireDefault(_reactLibReactCSSTransitionGroupChild);
40+
41+
var reactCSSTransitionGroupChild = _react2['default'].createFactory(_reactLibReactCSSTransitionGroupChild2['default']);
42+
43+
var TICK = 17;
44+
45+
function createTransitionTimeoutPropValidator(transitionType) {
46+
var timeoutPropName = 'transition' + transitionType + 'Timeout';
47+
var enabledPropName = 'transition' + transitionType;
48+
49+
return function (props) {
50+
// If the transition is enabled
51+
if (props[enabledPropName]) {
52+
// If no timeout duration is provided
53+
if (!props[timeoutPropName]) {
54+
return new Error(timeoutPropName + ' wasn\'t supplied to ReactCSSTransitionReplace: ' + 'this can cause unreliable animations and won\'t be supported in ' + 'a future version of React. See ' + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.');
55+
56+
// If the duration isn't a number
57+
} else if (typeof props[timeoutPropName] !== 'number') {
58+
return new Error(timeoutPropName + ' must be a number (in milliseconds)');
59+
}
60+
}
61+
};
62+
}
63+
64+
var ReactCSSTransitionReplace = (function (_React$Component) {
65+
_inherits(ReactCSSTransitionReplace, _React$Component);
66+
67+
function ReactCSSTransitionReplace() {
68+
var _this = this;
69+
70+
_classCallCheck(this, ReactCSSTransitionReplace);
71+
72+
_get(Object.getPrototypeOf(ReactCSSTransitionReplace.prototype), 'constructor', this).apply(this, arguments);
73+
74+
this.state = {
75+
currentChild: this.props.children ? _react2['default'].Children.only(this.props.children) : null,
76+
nextChild: null,
77+
height: null
78+
};
79+
80+
this._handleDoneAppearing = function () {
81+
_this.isTransitioning = false;
82+
};
83+
84+
this._handleDoneEntering = function () {
85+
_this.isTransitioning = false;
86+
_this.setState({
87+
currentChild: _this.state.nextChild,
88+
nextChild: null,
89+
height: null
90+
});
91+
};
92+
93+
this._handleDoneLeaving = function () {
94+
if (_this.isTransitioning) {
95+
var state = { currentChild: null };
96+
97+
if (!_this.state.nextChild) {
98+
_this.isTransitioning = false;
99+
state.height = null;
100+
}
101+
102+
_this.setState(state);
103+
}
104+
};
105+
}
106+
107+
_createClass(ReactCSSTransitionReplace, [{
108+
key: 'componentDidMount',
109+
value: function componentDidMount() {
110+
if (this.props.transitionAppear && this.state.currentChild) {
111+
this.appearCurrent();
112+
}
113+
}
114+
}, {
115+
key: 'componentWillUnmount',
116+
value: function componentWillUnmount() {
117+
if (this.timeout) {
118+
clearTimeout(this.timeout);
119+
}
120+
}
121+
}, {
122+
key: 'componentWillReceiveProps',
123+
value: function componentWillReceiveProps(nextProps) {
124+
var _this2 = this;
125+
126+
// Setting false indicates that the child has changed, but it is a removal so there is no next child.
127+
var nextChild = nextProps.children ? _react2['default'].Children.only(nextProps.children) : false;
128+
var currentChild = this.state.currentChild;
129+
130+
if (currentChild && nextChild && nextChild.key === currentChild.key) {
131+
// Nothing changed, but we are re-rendering so update the currentChild.
132+
return this.setState({
133+
currentChild: nextChild
134+
});
135+
}
136+
137+
// Set the next child to start the transition, and set the current height.
138+
this.setState({
139+
nextChild: nextChild,
140+
height: this.state.currentChild ? _reactDom2['default'].findDOMNode(this.refs.curr).offsetHeight : 0
141+
});
142+
143+
// Enqueue setting the next height to trigger the height transition.
144+
this.timeout = setTimeout(function () {
145+
var nextNode = _reactDom2['default'].findDOMNode(_this2.refs.next);
146+
if (nextNode) {
147+
_this2.setState({ height: nextChild ? nextNode.offsetHeight : 0 });
148+
}
149+
_this2.timeout = null;
150+
}, TICK);
151+
}
152+
}, {
153+
key: 'componentDidUpdate',
154+
value: function componentDidUpdate() {
155+
if (!this.isTransitioning) {
156+
if (this.state.nextChild) {
157+
this.enterNext();
158+
}
159+
if (this.state.currentChild && (this.state.nextChild || this.state.nextChild === false)) {
160+
this.leaveCurrent();
161+
}
162+
}
163+
}
164+
}, {
165+
key: 'appearCurrent',
166+
value: function appearCurrent() {
167+
this.refs.curr.componentWillAppear(this._handleDoneAppearing);
168+
this.isTransitioning = true;
169+
}
170+
}, {
171+
key: 'enterNext',
172+
value: function enterNext() {
173+
this.refs.next.componentWillEnter(this._handleDoneEntering);
174+
this.isTransitioning = true;
175+
}
176+
}, {
177+
key: 'leaveCurrent',
178+
value: function leaveCurrent() {
179+
this.refs.curr.componentWillLeave(this._handleDoneLeaving);
180+
this.isTransitioning = true;
181+
}
182+
183+
// When the leave transition time-out expires the animation classes are removed, so the
184+
// element must be removed from the DOM if the enter transition is still in progress.
185+
}, {
186+
key: '_wrapChild',
187+
value: function _wrapChild(child, moreProps) {
188+
// We need to provide this childFactory so that
189+
// ReactCSSTransitionReplaceChild can receive updates to name,
190+
// enter, and leave while it is leaving.
191+
return reactCSSTransitionGroupChild((0, _objectAssign2['default'])({
192+
name: this.props.transitionName,
193+
appear: this.props.transitionAppear,
194+
enter: this.props.transitionEnter,
195+
leave: this.props.transitionLeave,
196+
appearTimeout: this.props.transitionAppearTimeout,
197+
enterTimeout: this.props.transitionEnterTimeout,
198+
leaveTimeout: this.props.transitionLeaveTimeout
199+
}, moreProps), child);
200+
}
201+
}, {
202+
key: 'render',
203+
value: function render() {
204+
var _state = this.state;
205+
var currentChild = _state.currentChild;
206+
var nextChild = _state.nextChild;
207+
var height = _state.height;
208+
209+
var childrenToRender = [];
210+
211+
var _props = this.props;
212+
var overflowHidden = _props.overflowHidden;
213+
214+
var containerProps = _objectWithoutProperties(_props, ['overflowHidden']);
215+
216+
if (currentChild) {
217+
childrenToRender.push(this._wrapChild(currentChild, {
218+
ref: 'curr', key: 'curr'
219+
}));
220+
}
221+
222+
if (height !== null) {
223+
containerProps.className = (containerProps.className || '') + ' ' + containerProps.transitionName + '-height';
224+
containerProps.style = (0, _objectAssign2['default'])({}, containerProps.style, {
225+
position: 'relative',
226+
display: 'block',
227+
height: height
228+
});
229+
230+
if (overflowHidden) {
231+
containerProps.style.overflow = 'hidden';
232+
}
233+
}
234+
235+
if (nextChild) {
236+
childrenToRender.push(_react2['default'].createElement('span', {
237+
style: {
238+
position: 'absolute',
239+
top: 0,
240+
left: 0,
241+
right: 0,
242+
bottom: 0
243+
},
244+
key: 'next'
245+
}, this._wrapChild(nextChild, { ref: 'next' })));
246+
}
247+
248+
return _react2['default'].createElement(this.props.component, containerProps, childrenToRender);
249+
}
250+
}], [{
251+
key: 'propTypes',
252+
value: {
253+
transitionName: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.shape({
254+
enter: _react2['default'].PropTypes.string,
255+
leave: _react2['default'].PropTypes.string,
256+
active: _react2['default'].PropTypes.string
257+
}), _react2['default'].PropTypes.shape({
258+
enter: _react2['default'].PropTypes.string,
259+
enterActive: _react2['default'].PropTypes.string,
260+
leave: _react2['default'].PropTypes.string,
261+
leaveActive: _react2['default'].PropTypes.string,
262+
appear: _react2['default'].PropTypes.string,
263+
appearActive: _react2['default'].PropTypes.string
264+
})]).isRequired,
265+
266+
transitionAppear: _react2['default'].PropTypes.bool,
267+
transitionEnter: _react2['default'].PropTypes.bool,
268+
transitionLeave: _react2['default'].PropTypes.bool,
269+
transitionAppearTimeout: createTransitionTimeoutPropValidator('Appear'),
270+
transitionEnterTimeout: createTransitionTimeoutPropValidator('Enter'),
271+
transitionLeaveTimeout: createTransitionTimeoutPropValidator('Leave'),
272+
overflowHidden: _react2['default'].PropTypes.bool
273+
},
274+
enumerable: true
275+
}, {
276+
key: 'defaultProps',
277+
value: {
278+
transitionAppear: false,
279+
transitionEnter: true,
280+
transitionLeave: true,
281+
overflowHidden: true,
282+
component: 'span'
283+
},
284+
enumerable: true
285+
}]);
286+
287+
return ReactCSSTransitionReplace;
288+
})(_react2['default'].Component);
289+
290+
exports['default'] = ReactCSSTransitionReplace;
291+
module.exports = exports['default'];

0 commit comments

Comments
 (0)