522 lines
22 KiB
JavaScript
522 lines
22 KiB
JavaScript
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
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; };
|
|
|
|
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; }; })();
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
|
|
|
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; }
|
|
|
|
var _mapToZero = require('./mapToZero');
|
|
|
|
var _mapToZero2 = _interopRequireDefault(_mapToZero);
|
|
|
|
var _stripStyle = require('./stripStyle');
|
|
|
|
var _stripStyle2 = _interopRequireDefault(_stripStyle);
|
|
|
|
var _stepper3 = require('./stepper');
|
|
|
|
var _stepper4 = _interopRequireDefault(_stepper3);
|
|
|
|
var _mergeDiff = require('./mergeDiff');
|
|
|
|
var _mergeDiff2 = _interopRequireDefault(_mergeDiff);
|
|
|
|
var _performanceNow = require('performance-now');
|
|
|
|
var _performanceNow2 = _interopRequireDefault(_performanceNow);
|
|
|
|
var _raf = require('raf');
|
|
|
|
var _raf2 = _interopRequireDefault(_raf);
|
|
|
|
var _shouldStopAnimation = require('./shouldStopAnimation');
|
|
|
|
var _shouldStopAnimation2 = _interopRequireDefault(_shouldStopAnimation);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var msPerFrame = 1000 / 60;
|
|
|
|
// the children function & (potential) styles function asks as param an
|
|
// Array<TransitionPlainStyle>, where each TransitionPlainStyle is of the format
|
|
// {key: string, data?: any, style: PlainStyle}. However, the way we keep
|
|
// internal states doesn't contain such a data structure (check the state and
|
|
// TransitionMotionState). So when children function and others ask for such
|
|
// data we need to generate them on the fly by combining mergedPropsStyles and
|
|
// currentStyles/lastIdealStyles
|
|
function rehydrateStyles(mergedPropsStyles, unreadPropStyles, plainStyles) {
|
|
// Copy the value to a `const` so that Flow understands that the const won't
|
|
// change and will be non-nullable in the callback below.
|
|
var cUnreadPropStyles = unreadPropStyles;
|
|
if (cUnreadPropStyles == null) {
|
|
return mergedPropsStyles.map(function (mergedPropsStyle, i) {
|
|
return {
|
|
key: mergedPropsStyle.key,
|
|
data: mergedPropsStyle.data,
|
|
style: plainStyles[i]
|
|
};
|
|
});
|
|
}
|
|
return mergedPropsStyles.map(function (mergedPropsStyle, i) {
|
|
for (var j = 0; j < cUnreadPropStyles.length; j++) {
|
|
if (cUnreadPropStyles[j].key === mergedPropsStyle.key) {
|
|
return {
|
|
key: cUnreadPropStyles[j].key,
|
|
data: cUnreadPropStyles[j].data,
|
|
style: plainStyles[i]
|
|
};
|
|
}
|
|
}
|
|
return { key: mergedPropsStyle.key, data: mergedPropsStyle.data, style: plainStyles[i] };
|
|
});
|
|
}
|
|
|
|
function shouldStopAnimationAll(currentStyles, destStyles, currentVelocities, mergedPropsStyles) {
|
|
if (mergedPropsStyles.length !== destStyles.length) {
|
|
return false;
|
|
}
|
|
|
|
for (var i = 0; i < mergedPropsStyles.length; i++) {
|
|
if (mergedPropsStyles[i].key !== destStyles[i].key) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// we have the invariant that mergedPropsStyles and
|
|
// currentStyles/currentVelocities/last* are synced in terms of cells, see
|
|
// mergeAndSync comment for more info
|
|
for (var i = 0; i < mergedPropsStyles.length; i++) {
|
|
if (!_shouldStopAnimation2['default'](currentStyles[i], destStyles[i].style, currentVelocities[i])) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// core key merging logic
|
|
|
|
// things to do: say previously merged style is {a, b}, dest style (prop) is {b,
|
|
// c}, previous current (interpolating) style is {a, b}
|
|
// **invariant**: current[i] corresponds to merged[i] in terms of key
|
|
|
|
// steps:
|
|
// turn merged style into {a?, b, c}
|
|
// add c, value of c is destStyles.c
|
|
// maybe remove a, aka call willLeave(a), then merged is either {b, c} or {a, b, c}
|
|
// turn current (interpolating) style from {a, b} into {a?, b, c}
|
|
// maybe remove a
|
|
// certainly add c, value of c is willEnter(c)
|
|
// loop over merged and construct new current
|
|
// dest doesn't change, that's owner's
|
|
function mergeAndSync(willEnter, willLeave, didLeave, oldMergedPropsStyles, destStyles, oldCurrentStyles, oldCurrentVelocities, oldLastIdealStyles, oldLastIdealVelocities) {
|
|
var newMergedPropsStyles = _mergeDiff2['default'](oldMergedPropsStyles, destStyles, function (oldIndex, oldMergedPropsStyle) {
|
|
var leavingStyle = willLeave(oldMergedPropsStyle);
|
|
if (leavingStyle == null) {
|
|
didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
|
|
return null;
|
|
}
|
|
if (_shouldStopAnimation2['default'](oldCurrentStyles[oldIndex], leavingStyle, oldCurrentVelocities[oldIndex])) {
|
|
didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
|
|
return null;
|
|
}
|
|
return { key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data, style: leavingStyle };
|
|
});
|
|
|
|
var newCurrentStyles = [];
|
|
var newCurrentVelocities = [];
|
|
var newLastIdealStyles = [];
|
|
var newLastIdealVelocities = [];
|
|
for (var i = 0; i < newMergedPropsStyles.length; i++) {
|
|
var newMergedPropsStyleCell = newMergedPropsStyles[i];
|
|
var foundOldIndex = null;
|
|
for (var j = 0; j < oldMergedPropsStyles.length; j++) {
|
|
if (oldMergedPropsStyles[j].key === newMergedPropsStyleCell.key) {
|
|
foundOldIndex = j;
|
|
break;
|
|
}
|
|
}
|
|
// TODO: key search code
|
|
if (foundOldIndex == null) {
|
|
var plainStyle = willEnter(newMergedPropsStyleCell);
|
|
newCurrentStyles[i] = plainStyle;
|
|
newLastIdealStyles[i] = plainStyle;
|
|
|
|
var velocity = _mapToZero2['default'](newMergedPropsStyleCell.style);
|
|
newCurrentVelocities[i] = velocity;
|
|
newLastIdealVelocities[i] = velocity;
|
|
} else {
|
|
newCurrentStyles[i] = oldCurrentStyles[foundOldIndex];
|
|
newLastIdealStyles[i] = oldLastIdealStyles[foundOldIndex];
|
|
newCurrentVelocities[i] = oldCurrentVelocities[foundOldIndex];
|
|
newLastIdealVelocities[i] = oldLastIdealVelocities[foundOldIndex];
|
|
}
|
|
}
|
|
|
|
return [newMergedPropsStyles, newCurrentStyles, newCurrentVelocities, newLastIdealStyles, newLastIdealVelocities];
|
|
}
|
|
|
|
var TransitionMotion = (function (_React$Component) {
|
|
_inherits(TransitionMotion, _React$Component);
|
|
|
|
_createClass(TransitionMotion, null, [{
|
|
key: 'propTypes',
|
|
value: {
|
|
defaultStyles: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
|
|
key: _propTypes2['default'].string.isRequired,
|
|
data: _propTypes2['default'].any,
|
|
style: _propTypes2['default'].objectOf(_propTypes2['default'].number).isRequired
|
|
})),
|
|
styles: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
|
|
key: _propTypes2['default'].string.isRequired,
|
|
data: _propTypes2['default'].any,
|
|
style: _propTypes2['default'].objectOf(_propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].object])).isRequired
|
|
}))]).isRequired,
|
|
children: _propTypes2['default'].func.isRequired,
|
|
willEnter: _propTypes2['default'].func,
|
|
willLeave: _propTypes2['default'].func,
|
|
didLeave: _propTypes2['default'].func
|
|
},
|
|
enumerable: true
|
|
}, {
|
|
key: 'defaultProps',
|
|
value: {
|
|
willEnter: function willEnter(styleThatEntered) {
|
|
return _stripStyle2['default'](styleThatEntered.style);
|
|
},
|
|
// recall: returning null makes the current unmounting TransitionStyle
|
|
// disappear immediately
|
|
willLeave: function willLeave() {
|
|
return null;
|
|
},
|
|
didLeave: function didLeave() {}
|
|
},
|
|
enumerable: true
|
|
}]);
|
|
|
|
function TransitionMotion(props) {
|
|
var _this = this;
|
|
|
|
_classCallCheck(this, TransitionMotion);
|
|
|
|
_React$Component.call(this, props);
|
|
this.unmounting = false;
|
|
this.animationID = null;
|
|
this.prevTime = 0;
|
|
this.accumulatedTime = 0;
|
|
this.unreadPropStyles = null;
|
|
|
|
this.clearUnreadPropStyle = function (unreadPropStyles) {
|
|
var _mergeAndSync = mergeAndSync(_this.props.willEnter, _this.props.willLeave, _this.props.didLeave, _this.state.mergedPropsStyles, unreadPropStyles, _this.state.currentStyles, _this.state.currentVelocities, _this.state.lastIdealStyles, _this.state.lastIdealVelocities);
|
|
|
|
var mergedPropsStyles = _mergeAndSync[0];
|
|
var currentStyles = _mergeAndSync[1];
|
|
var currentVelocities = _mergeAndSync[2];
|
|
var lastIdealStyles = _mergeAndSync[3];
|
|
var lastIdealVelocities = _mergeAndSync[4];
|
|
|
|
for (var i = 0; i < unreadPropStyles.length; i++) {
|
|
var unreadPropStyle = unreadPropStyles[i].style;
|
|
var dirty = false;
|
|
|
|
for (var key in unreadPropStyle) {
|
|
if (!Object.prototype.hasOwnProperty.call(unreadPropStyle, key)) {
|
|
continue;
|
|
}
|
|
|
|
var styleValue = unreadPropStyle[key];
|
|
if (typeof styleValue === 'number') {
|
|
if (!dirty) {
|
|
dirty = true;
|
|
currentStyles[i] = _extends({}, currentStyles[i]);
|
|
currentVelocities[i] = _extends({}, currentVelocities[i]);
|
|
lastIdealStyles[i] = _extends({}, lastIdealStyles[i]);
|
|
lastIdealVelocities[i] = _extends({}, lastIdealVelocities[i]);
|
|
mergedPropsStyles[i] = {
|
|
key: mergedPropsStyles[i].key,
|
|
data: mergedPropsStyles[i].data,
|
|
style: _extends({}, mergedPropsStyles[i].style)
|
|
};
|
|
}
|
|
currentStyles[i][key] = styleValue;
|
|
currentVelocities[i][key] = 0;
|
|
lastIdealStyles[i][key] = styleValue;
|
|
lastIdealVelocities[i][key] = 0;
|
|
mergedPropsStyles[i].style[key] = styleValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
// unlike the other 2 components, we can't detect staleness and optionally
|
|
// opt out of setState here. each style object's data might contain new
|
|
// stuff we're not/cannot compare
|
|
_this.setState({
|
|
currentStyles: currentStyles,
|
|
currentVelocities: currentVelocities,
|
|
mergedPropsStyles: mergedPropsStyles,
|
|
lastIdealStyles: lastIdealStyles,
|
|
lastIdealVelocities: lastIdealVelocities
|
|
});
|
|
};
|
|
|
|
this.startAnimationIfNecessary = function () {
|
|
if (_this.unmounting) {
|
|
return;
|
|
}
|
|
|
|
// TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
|
|
// call cb? No, otherwise accidental parent rerender causes cb trigger
|
|
_this.animationID = _raf2['default'](function (timestamp) {
|
|
// https://github.com/chenglou/react-motion/pull/420
|
|
// > if execution passes the conditional if (this.unmounting), then
|
|
// executes async defaultRaf and after that component unmounts and after
|
|
// that the callback of defaultRaf is called, then setState will be called
|
|
// on unmounted component.
|
|
if (_this.unmounting) {
|
|
return;
|
|
}
|
|
|
|
var propStyles = _this.props.styles;
|
|
var destStyles = typeof propStyles === 'function' ? propStyles(rehydrateStyles(_this.state.mergedPropsStyles, _this.unreadPropStyles, _this.state.lastIdealStyles)) : propStyles;
|
|
|
|
// check if we need to animate in the first place
|
|
if (shouldStopAnimationAll(_this.state.currentStyles, destStyles, _this.state.currentVelocities, _this.state.mergedPropsStyles)) {
|
|
// no need to cancel animationID here; shouldn't have any in flight
|
|
_this.animationID = null;
|
|
_this.accumulatedTime = 0;
|
|
return;
|
|
}
|
|
|
|
var currentTime = timestamp || _performanceNow2['default']();
|
|
var timeDelta = currentTime - _this.prevTime;
|
|
_this.prevTime = currentTime;
|
|
_this.accumulatedTime = _this.accumulatedTime + timeDelta;
|
|
// more than 10 frames? prolly switched browser tab. Restart
|
|
if (_this.accumulatedTime > msPerFrame * 10) {
|
|
_this.accumulatedTime = 0;
|
|
}
|
|
|
|
if (_this.accumulatedTime === 0) {
|
|
// no need to cancel animationID here; shouldn't have any in flight
|
|
_this.animationID = null;
|
|
_this.startAnimationIfNecessary();
|
|
return;
|
|
}
|
|
|
|
var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
|
|
var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
|
|
|
|
var _mergeAndSync2 = mergeAndSync(_this.props.willEnter, _this.props.willLeave, _this.props.didLeave, _this.state.mergedPropsStyles, destStyles, _this.state.currentStyles, _this.state.currentVelocities, _this.state.lastIdealStyles, _this.state.lastIdealVelocities);
|
|
|
|
var newMergedPropsStyles = _mergeAndSync2[0];
|
|
var newCurrentStyles = _mergeAndSync2[1];
|
|
var newCurrentVelocities = _mergeAndSync2[2];
|
|
var newLastIdealStyles = _mergeAndSync2[3];
|
|
var newLastIdealVelocities = _mergeAndSync2[4];
|
|
|
|
for (var i = 0; i < newMergedPropsStyles.length; i++) {
|
|
var newMergedPropsStyle = newMergedPropsStyles[i].style;
|
|
var newCurrentStyle = {};
|
|
var newCurrentVelocity = {};
|
|
var newLastIdealStyle = {};
|
|
var newLastIdealVelocity = {};
|
|
|
|
for (var key in newMergedPropsStyle) {
|
|
if (!Object.prototype.hasOwnProperty.call(newMergedPropsStyle, key)) {
|
|
continue;
|
|
}
|
|
|
|
var styleValue = newMergedPropsStyle[key];
|
|
if (typeof styleValue === 'number') {
|
|
newCurrentStyle[key] = styleValue;
|
|
newCurrentVelocity[key] = 0;
|
|
newLastIdealStyle[key] = styleValue;
|
|
newLastIdealVelocity[key] = 0;
|
|
} else {
|
|
var newLastIdealStyleValue = newLastIdealStyles[i][key];
|
|
var newLastIdealVelocityValue = newLastIdealVelocities[i][key];
|
|
for (var j = 0; j < framesToCatchUp; j++) {
|
|
var _stepper = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
|
|
|
|
newLastIdealStyleValue = _stepper[0];
|
|
newLastIdealVelocityValue = _stepper[1];
|
|
}
|
|
|
|
var _stepper2 = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
|
|
|
|
var nextIdealX = _stepper2[0];
|
|
var nextIdealV = _stepper2[1];
|
|
|
|
newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
|
|
newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
|
|
newLastIdealStyle[key] = newLastIdealStyleValue;
|
|
newLastIdealVelocity[key] = newLastIdealVelocityValue;
|
|
}
|
|
}
|
|
|
|
newLastIdealStyles[i] = newLastIdealStyle;
|
|
newLastIdealVelocities[i] = newLastIdealVelocity;
|
|
newCurrentStyles[i] = newCurrentStyle;
|
|
newCurrentVelocities[i] = newCurrentVelocity;
|
|
}
|
|
|
|
_this.animationID = null;
|
|
// the amount we're looped over above
|
|
_this.accumulatedTime -= framesToCatchUp * msPerFrame;
|
|
|
|
_this.setState({
|
|
currentStyles: newCurrentStyles,
|
|
currentVelocities: newCurrentVelocities,
|
|
lastIdealStyles: newLastIdealStyles,
|
|
lastIdealVelocities: newLastIdealVelocities,
|
|
mergedPropsStyles: newMergedPropsStyles
|
|
});
|
|
|
|
_this.unreadPropStyles = null;
|
|
|
|
_this.startAnimationIfNecessary();
|
|
});
|
|
};
|
|
|
|
this.state = this.defaultState();
|
|
}
|
|
|
|
TransitionMotion.prototype.defaultState = function defaultState() {
|
|
var _props = this.props;
|
|
var defaultStyles = _props.defaultStyles;
|
|
var styles = _props.styles;
|
|
var willEnter = _props.willEnter;
|
|
var willLeave = _props.willLeave;
|
|
var didLeave = _props.didLeave;
|
|
|
|
var destStyles = typeof styles === 'function' ? styles(defaultStyles) : styles;
|
|
|
|
// this is special. for the first time around, we don't have a comparison
|
|
// between last (no last) and current merged props. we'll compute last so:
|
|
// say default is {a, b} and styles (dest style) is {b, c}, we'll
|
|
// fabricate last as {a, b}
|
|
var oldMergedPropsStyles = undefined;
|
|
if (defaultStyles == null) {
|
|
oldMergedPropsStyles = destStyles;
|
|
} else {
|
|
oldMergedPropsStyles = defaultStyles.map(function (defaultStyleCell) {
|
|
// TODO: key search code
|
|
for (var i = 0; i < destStyles.length; i++) {
|
|
if (destStyles[i].key === defaultStyleCell.key) {
|
|
return destStyles[i];
|
|
}
|
|
}
|
|
return defaultStyleCell;
|
|
});
|
|
}
|
|
var oldCurrentStyles = defaultStyles == null ? destStyles.map(function (s) {
|
|
return _stripStyle2['default'](s.style);
|
|
}) : defaultStyles.map(function (s) {
|
|
return _stripStyle2['default'](s.style);
|
|
});
|
|
var oldCurrentVelocities = defaultStyles == null ? destStyles.map(function (s) {
|
|
return _mapToZero2['default'](s.style);
|
|
}) : defaultStyles.map(function (s) {
|
|
return _mapToZero2['default'](s.style);
|
|
});
|
|
|
|
var _mergeAndSync3 = mergeAndSync(
|
|
// Because this is an old-style createReactClass component, Flow doesn't
|
|
// understand that the willEnter and willLeave props have default values
|
|
// and will always be present.
|
|
willEnter, willLeave, didLeave, oldMergedPropsStyles, destStyles, oldCurrentStyles, oldCurrentVelocities, oldCurrentStyles, // oldLastIdealStyles really
|
|
oldCurrentVelocities);
|
|
|
|
var mergedPropsStyles = _mergeAndSync3[0];
|
|
var currentStyles = _mergeAndSync3[1];
|
|
var currentVelocities = _mergeAndSync3[2];
|
|
var lastIdealStyles = _mergeAndSync3[3];
|
|
var lastIdealVelocities = _mergeAndSync3[4];
|
|
// oldLastIdealVelocities really
|
|
|
|
return {
|
|
currentStyles: currentStyles,
|
|
currentVelocities: currentVelocities,
|
|
lastIdealStyles: lastIdealStyles,
|
|
lastIdealVelocities: lastIdealVelocities,
|
|
mergedPropsStyles: mergedPropsStyles
|
|
};
|
|
};
|
|
|
|
// after checking for unreadPropStyles != null, we manually go set the
|
|
// non-interpolating values (those that are a number, without a spring
|
|
// config)
|
|
|
|
TransitionMotion.prototype.componentDidMount = function componentDidMount() {
|
|
this.prevTime = _performanceNow2['default']();
|
|
this.startAnimationIfNecessary();
|
|
};
|
|
|
|
TransitionMotion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
|
|
if (this.unreadPropStyles) {
|
|
// previous props haven't had the chance to be set yet; set them here
|
|
this.clearUnreadPropStyle(this.unreadPropStyles);
|
|
}
|
|
|
|
var styles = props.styles;
|
|
if (typeof styles === 'function') {
|
|
this.unreadPropStyles = styles(rehydrateStyles(this.state.mergedPropsStyles, this.unreadPropStyles, this.state.lastIdealStyles));
|
|
} else {
|
|
this.unreadPropStyles = styles;
|
|
}
|
|
|
|
if (this.animationID == null) {
|
|
this.prevTime = _performanceNow2['default']();
|
|
this.startAnimationIfNecessary();
|
|
}
|
|
};
|
|
|
|
TransitionMotion.prototype.componentWillUnmount = function componentWillUnmount() {
|
|
this.unmounting = true;
|
|
if (this.animationID != null) {
|
|
_raf2['default'].cancel(this.animationID);
|
|
this.animationID = null;
|
|
}
|
|
};
|
|
|
|
TransitionMotion.prototype.render = function render() {
|
|
var hydratedStyles = rehydrateStyles(this.state.mergedPropsStyles, this.unreadPropStyles, this.state.currentStyles);
|
|
var renderedChildren = this.props.children(hydratedStyles);
|
|
return renderedChildren && _react2['default'].Children.only(renderedChildren);
|
|
};
|
|
|
|
return TransitionMotion;
|
|
})(_react2['default'].Component);
|
|
|
|
exports['default'] = TransitionMotion;
|
|
module.exports = exports['default'];
|
|
|
|
// list of styles, each containing interpolating values. Part of what's passed
|
|
// to children function. Notice that this is
|
|
// Array<ActualInterpolatingStyleObject>, without the wrapper that is {key: ...,
|
|
// data: ... style: ActualInterpolatingStyleObject}. Only mergedPropsStyles
|
|
// contains the key & data info (so that we only have a single source of truth
|
|
// for these, and to save space). Check the comment for `rehydrateStyles` to
|
|
// see how we regenerate the entirety of what's passed to children function
|
|
|
|
// the array that keeps track of currently rendered stuff! Including stuff
|
|
// that you've unmounted but that's still animating. This is where it lives
|
|
|
|
// it's possible that currentStyle's value is stale: if props is immediately
|
|
// changed from 0 to 400 to spring(0) again, the async currentStyle is still
|
|
// at 0 (didn't have time to tick and interpolate even once). If we naively
|
|
// compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
|
|
// In reality currentStyle should be 400
|