Skip to content

Commit e82257d

Browse files
GeKormGeKorm
committed
Commit built files for GH publishing
1 parent 169ea5c commit e82257d

File tree

2 files changed

+360
-3
lines changed

2 files changed

+360
-3
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,5 @@
22
/node_modules
33
npm-debug.log
44

5-
# Exclude compiled files
6-
/lib
7-
85
/demo/assets/app.js
96
/gh-pages

‎lib/ReactCSSTransitionReplace.js‎

Lines changed: 360 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,360 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = undefined;
7+
8+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
9+
10+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
11+
12+
var _class, _temp2; /**
13+
* Adapted from ReactCSSTransitionGroup.js by Facebook
14+
*
15+
* @providesModule ReactCSSTransitionReplace
16+
*/
17+
18+
var _react = require('react');
19+
20+
var _react2 = _interopRequireDefault(_react);
21+
22+
var _reactDom = require('react-dom');
23+
24+
var _reactDom2 = _interopRequireDefault(_reactDom);
25+
26+
var _propTypes = require('prop-types');
27+
28+
var _propTypes2 = _interopRequireDefault(_propTypes);
29+
30+
var _CSSTransitionGroupChild = require('react-transition-group/CSSTransitionGroupChild');
31+
32+
var _CSSTransitionGroupChild2 = _interopRequireDefault(_CSSTransitionGroupChild);
33+
34+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
35+
36+
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
37+
38+
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; }
39+
40+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
41+
42+
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; }
43+
44+
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 ? _defaults(subClass, superClass) : _defaults(subClass, superClass); }
45+
46+
var reactCSSTransitionGroupChild = _react2.default.createFactory(_CSSTransitionGroupChild2.default);
47+
48+
var TICK = 17;
49+
50+
function createTransitionTimeoutPropValidator(transitionType) {
51+
var timeoutPropName = 'transition' + transitionType + 'Timeout';
52+
var enabledPropName = 'transition' + transitionType;
53+
54+
return function (props) {
55+
// If the transition is enabled
56+
if (props[enabledPropName]) {
57+
// If no timeout duration is provided
58+
if (!props[timeoutPropName]) {
59+
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.');
60+
61+
// If the duration isn't a number
62+
} else if (typeof props[timeoutPropName] != 'number') {
63+
return new Error(timeoutPropName + ' must be a number (in milliseconds)');
64+
}
65+
}
66+
};
67+
}
68+
69+
var ReactCSSTransitionReplace = (_temp2 = _class = function (_React$Component) {
70+
_inherits(ReactCSSTransitionReplace, _React$Component);
71+
72+
function ReactCSSTransitionReplace() {
73+
var _temp, _this, _ret;
74+
75+
_classCallCheck(this, ReactCSSTransitionReplace);
76+
77+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
78+
args[_key] = arguments[_key];
79+
}
80+
81+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
82+
currentChild: _this.props.children ? _react2.default.Children.only(_this.props.children) : undefined,
83+
currentChildKey: _this.props.children ? '1' : '',
84+
nextChild: undefined,
85+
activeHeightTransition: false,
86+
nextChildKey: '',
87+
height: null,
88+
width: null,
89+
isLeaving: false
90+
}, _this._handleDoneAppearing = function () {
91+
_this.isTransitioning = false;
92+
}, _this._handleDoneEntering = function () {
93+
var _this2 = _this,
94+
state = _this2.state;
95+
96+
97+
_this.isTransitioning = false;
98+
_this.setState({
99+
currentChild: state.nextChild,
100+
currentChildKey: state.nextChildKey,
101+
activeHeightTransition: false,
102+
nextChild: undefined,
103+
nextChildKey: '',
104+
height: null,
105+
width: null
106+
});
107+
}, _this._handleDoneLeaving = function () {
108+
if (_this.isTransitioning) {
109+
var state = { currentChild: undefined, isLeaving: false };
110+
111+
if (!_this.state.nextChild) {
112+
_this.isTransitioning = false;
113+
state.height = null;
114+
state.width = null;
115+
}
116+
117+
_this.setState(state);
118+
}
119+
}, _this.setCurrRef = function (ref) {
120+
_this.curr = ref;
121+
}, _this.setNextRef = function (ref) {
122+
_this.next = ref;
123+
}, _temp), _possibleConstructorReturn(_this, _ret);
124+
}
125+
126+
ReactCSSTransitionReplace.prototype.componentDidMount = function componentDidMount() {
127+
if (this.props.transitionAppear && this.state.currentChild) {
128+
this.appearCurrent();
129+
}
130+
};
131+
132+
ReactCSSTransitionReplace.prototype.componentWillUnmount = function componentWillUnmount() {
133+
clearTimeout(this.timeout);
134+
};
135+
136+
ReactCSSTransitionReplace.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
137+
// Setting false indicates that the child has changed, but it is a removal so there is no next child.
138+
var nextChild = nextProps.children ? _react2.default.Children.only(nextProps.children) : false;
139+
var currentChild = this.state.currentChild;
140+
141+
// Avoid silencing the transition when this.state.nextChild exists because it means that there’s
142+
// already a transition ongoing that has to be replaced.
143+
if (currentChild && nextChild && nextChild.key === currentChild.key && !this.state.nextChild) {
144+
// Nothing changed, but we are re-rendering so update the currentChild.
145+
return this.setState({
146+
currentChild: nextChild
147+
});
148+
}
149+
150+
if (!currentChild && !nextChild && this.state.nextChild) {
151+
// The container was empty before and the entering element is being removed again while
152+
// transitioning in. Since a CSS transition can't be reversed cleanly midway the height
153+
// is just forced back to zero immediately and the child removed.
154+
return this.cancelTransition();
155+
}
156+
157+
var state = this.state;
158+
159+
// When transitionLeave is set to false, refs.curr does not exist when refs.next is being
160+
// transitioned into existence. When another child is set for this component at the point
161+
// where only refs.next exists, we want to use the width/height of refs.next instead of
162+
// refs.curr.
163+
164+
var ref = this.curr || this.next;
165+
166+
// Set the next child to start the transition, and set the current height.
167+
this.setState({
168+
nextChild: nextChild,
169+
activeHeightTransition: false,
170+
nextChildKey: state.currentChildKey ? String(Number(state.currentChildKey) + 1) : '1',
171+
height: state.currentChild ? _reactDom2.default.findDOMNode(ref).offsetHeight : 0,
172+
width: state.currentChild && this.props.changeWidth ? _reactDom2.default.findDOMNode(ref).offsetWidth : null
173+
});
174+
175+
// Enqueue setting the next height to trigger the height transition.
176+
this.enqueueHeightTransition(nextChild);
177+
};
178+
179+
ReactCSSTransitionReplace.prototype.componentDidUpdate = function componentDidUpdate() {
180+
if (!this.isTransitioning && !this.state.isLeaving) {
181+
var _state = this.state,
182+
currentChild = _state.currentChild,
183+
nextChild = _state.nextChild;
184+
185+
186+
if (currentChild && (nextChild || nextChild === false || nextChild === null) && this.props.transitionLeave) {
187+
this.leaveCurrent();
188+
}
189+
if (nextChild) {
190+
this.enterNext();
191+
}
192+
}
193+
};
194+
195+
ReactCSSTransitionReplace.prototype.enqueueHeightTransition = function enqueueHeightTransition(nextChild) {
196+
var _this3 = this;
197+
198+
var tickCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
199+
200+
this.timeout = setTimeout(function () {
201+
if (!nextChild) {
202+
return _this3.setState({
203+
activeHeightTransition: true,
204+
height: 0,
205+
width: _this3.props.changeWidth ? 0 : null
206+
});
207+
}
208+
209+
var nextNode = _reactDom2.default.findDOMNode(_this3.next);
210+
if (nextNode) {
211+
_this3.setState({
212+
activeHeightTransition: true,
213+
height: nextNode.offsetHeight,
214+
width: _this3.props.changeWidth ? nextNode.offsetWidth : null
215+
});
216+
} else {
217+
// The DOM hasn't rendered the entering element yet, so wait another tick.
218+
// Getting stuck in a loop shouldn't happen, but it's better to be safe.
219+
if (tickCount < 10) {
220+
_this3.enqueueHeightTransition(nextChild, tickCount + 1);
221+
}
222+
}
223+
}, TICK);
224+
};
225+
226+
ReactCSSTransitionReplace.prototype.appearCurrent = function appearCurrent() {
227+
this.curr.componentWillAppear(this._handleDoneAppearing);
228+
this.isTransitioning = true;
229+
};
230+
231+
ReactCSSTransitionReplace.prototype.enterNext = function enterNext() {
232+
this.next.componentWillEnter(this._handleDoneEntering);
233+
this.isTransitioning = true;
234+
};
235+
236+
ReactCSSTransitionReplace.prototype.leaveCurrent = function leaveCurrent() {
237+
this.curr.componentWillLeave(this._handleDoneLeaving);
238+
this.isTransitioning = true;
239+
this.setState({ isLeaving: true });
240+
};
241+
242+
// When the leave transition time-out expires the animation classes are removed, so the
243+
// element must be removed from the DOM if the enter transition is still in progress.
244+
245+
246+
ReactCSSTransitionReplace.prototype.cancelTransition = function cancelTransition() {
247+
this.isTransitioning = false;
248+
clearTimeout(this.timeout);
249+
return this.setState({
250+
nextChild: undefined,
251+
activeHeightTransition: false,
252+
nextChildKey: '',
253+
height: null,
254+
width: null
255+
});
256+
};
257+
258+
ReactCSSTransitionReplace.prototype._wrapChild = function _wrapChild(child, moreProps) {
259+
var transitionName = this.props.transitionName;
260+
261+
if ((typeof transitionName === 'undefined' ? 'undefined' : _typeof(transitionName)) == 'object' && transitionName !== null) {
262+
transitionName = _extends({}, transitionName);
263+
delete transitionName.height;
264+
}
265+
266+
// We need to provide this childFactory so that
267+
// ReactCSSTransitionReplaceChild can receive updates to name,
268+
// enter, and leave while it is leaving.
269+
return reactCSSTransitionGroupChild(_extends({
270+
name: transitionName,
271+
appear: this.props.transitionAppear,
272+
enter: this.props.transitionEnter,
273+
leave: this.props.transitionLeave,
274+
appearTimeout: this.props.transitionAppearTimeout,
275+
enterTimeout: this.props.transitionEnterTimeout,
276+
leaveTimeout: this.props.transitionLeaveTimeout
277+
}, moreProps), child);
278+
};
279+
280+
ReactCSSTransitionReplace.prototype.render = function render() {
281+
var _state2 = this.state,
282+
currentChild = _state2.currentChild,
283+
currentChildKey = _state2.currentChildKey,
284+
nextChild = _state2.nextChild,
285+
nextChildKey = _state2.nextChildKey,
286+
height = _state2.height,
287+
width = _state2.width,
288+
isLeaving = _state2.isLeaving,
289+
activeHeightTransition = _state2.activeHeightTransition;
290+
291+
var childrenToRender = [];
292+
293+
var _props = this.props,
294+
overflowHidden = _props.overflowHidden,
295+
transitionName = _props.transitionName,
296+
changeWidth = _props.changeWidth,
297+
component = _props.component,
298+
transitionAppear = _props.transitionAppear,
299+
transitionEnter = _props.transitionEnter,
300+
transitionLeave = _props.transitionLeave,
301+
transitionAppearTimeout = _props.transitionAppearTimeout,
302+
transitionEnterTimeout = _props.transitionEnterTimeout,
303+
transitionLeaveTimeout = _props.transitionLeaveTimeout,
304+
containerProps = _objectWithoutProperties(_props, ['overflowHidden', 'transitionName', 'changeWidth', 'component', 'transitionAppear', 'transitionEnter', 'transitionLeave', 'transitionAppearTimeout', 'transitionEnterTimeout', 'transitionLeaveTimeout']);
305+
306+
if (currentChild && !nextChild && !transitionLeave || currentChild && transitionLeave) {
307+
childrenToRender.push(_react2.default.createElement('span', { key: currentChildKey }, this._wrapChild(typeof currentChild.type == 'string' ? currentChild : _react2.default.cloneElement(currentChild, { isLeaving: isLeaving }), { ref: this.setCurrRef })));
308+
}
309+
310+
if (height !== null) {
311+
var heightClassName = (typeof transitionName === 'undefined' ? 'undefined' : _typeof(transitionName)) == 'object' && transitionName !== null ? transitionName.height || '' : String(transitionName) + '-height';
312+
313+
// Similarly to ReactCSSTransitionGroup, adding `-height-active` suffix to the
314+
// container when we are transitioning height.
315+
var activeHeightClassName = nextChild && activeHeightTransition && heightClassName ? String(heightClassName) + '-active' : '';
316+
317+
containerProps.className = String(containerProps.className || '') + ' ' + String(heightClassName) + ' ' + activeHeightClassName;
318+
319+
containerProps.style = _extends({}, containerProps.style, {
320+
position: 'relative',
321+
display: 'block',
322+
height: height
323+
});
324+
325+
if (overflowHidden) {
326+
containerProps.style.overflow = 'hidden';
327+
}
328+
329+
if (changeWidth) {
330+
containerProps.style.width = width;
331+
}
332+
}
333+
334+
if (nextChild) {
335+
childrenToRender.push(_react2.default.createElement('span', {
336+
style: {
337+
position: 'absolute',
338+
top: 0,
339+
left: 0,
340+
right: 0,
341+
bottom: 0
342+
},
343+
key: nextChildKey
344+
}, this._wrapChild(nextChild, { ref: this.setNextRef })));
345+
}
346+
347+
return _react2.default.createElement(component, containerProps, childrenToRender);
348+
};
349+
350+
return ReactCSSTransitionReplace;
351+
}(_react2.default.Component), _class.displayName = 'ReactCSSTransitionReplace', _class.defaultProps = {
352+
transitionAppear: false,
353+
transitionEnter: true,
354+
transitionLeave: true,
355+
overflowHidden: true,
356+
component: 'span',
357+
changeWidth: false
358+
}, _temp2);
359+
exports.default = ReactCSSTransitionReplace;
360+
module.exports = exports['default'];

0 commit comments

Comments
 (0)