'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 _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; var Motion = (function (_React$Component) { _inherits(Motion, _React$Component); _createClass(Motion, null, [{ key: 'propTypes', value: { // TOOD: warn against putting a config in here defaultStyle: _propTypes2['default'].objectOf(_propTypes2['default'].number), style: _propTypes2['default'].objectOf(_propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].object])).isRequired, children: _propTypes2['default'].func.isRequired, onRest: _propTypes2['default'].func }, enumerable: true }]); function Motion(props) { var _this = this; _classCallCheck(this, Motion); _React$Component.call(this, props); this.wasAnimating = false; this.animationID = null; this.prevTime = 0; this.accumulatedTime = 0; this.unreadPropStyle = null; this.clearUnreadPropStyle = function (destStyle) { var dirty = false; var _state = _this.state; var currentStyle = _state.currentStyle; var currentVelocity = _state.currentVelocity; var lastIdealStyle = _state.lastIdealStyle; var lastIdealVelocity = _state.lastIdealVelocity; for (var key in destStyle) { if (!Object.prototype.hasOwnProperty.call(destStyle, key)) { continue; } var styleValue = destStyle[key]; if (typeof styleValue === 'number') { if (!dirty) { dirty = true; currentStyle = _extends({}, currentStyle); currentVelocity = _extends({}, currentVelocity); lastIdealStyle = _extends({}, lastIdealStyle); lastIdealVelocity = _extends({}, lastIdealVelocity); } currentStyle[key] = styleValue; currentVelocity[key] = 0; lastIdealStyle[key] = styleValue; lastIdealVelocity[key] = 0; } } if (dirty) { _this.setState({ currentStyle: currentStyle, currentVelocity: currentVelocity, lastIdealStyle: lastIdealStyle, lastIdealVelocity: lastIdealVelocity }); } }; this.startAnimationIfNecessary = function () { // 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) { // check if we need to animate in the first place var propsStyle = _this.props.style; if (_shouldStopAnimation2['default'](_this.state.currentStyle, propsStyle, _this.state.currentVelocity)) { if (_this.wasAnimating && _this.props.onRest) { _this.props.onRest(); } // no need to cancel animationID here; shouldn't have any in flight _this.animationID = null; _this.wasAnimating = false; _this.accumulatedTime = 0; return; } _this.wasAnimating = true; 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 newLastIdealStyle = {}; var newLastIdealVelocity = {}; var newCurrentStyle = {}; var newCurrentVelocity = {}; for (var key in propsStyle) { if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) { continue; } var styleValue = propsStyle[key]; if (typeof styleValue === 'number') { newCurrentStyle[key] = styleValue; newCurrentVelocity[key] = 0; newLastIdealStyle[key] = styleValue; newLastIdealVelocity[key] = 0; } else { var newLastIdealStyleValue = _this.state.lastIdealStyle[key]; var newLastIdealVelocityValue = _this.state.lastIdealVelocity[key]; for (var i = 0; i < framesToCatchUp; i++) { 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; } } _this.animationID = null; // the amount we're looped over above _this.accumulatedTime -= framesToCatchUp * msPerFrame; _this.setState({ currentStyle: newCurrentStyle, currentVelocity: newCurrentVelocity, lastIdealStyle: newLastIdealStyle, lastIdealVelocity: newLastIdealVelocity }); _this.unreadPropStyle = null; _this.startAnimationIfNecessary(); }); }; this.state = this.defaultState(); } Motion.prototype.defaultState = function defaultState() { var _props = this.props; var defaultStyle = _props.defaultStyle; var style = _props.style; var currentStyle = defaultStyle || _stripStyle2['default'](style); var currentVelocity = _mapToZero2['default'](currentStyle); return { currentStyle: currentStyle, currentVelocity: currentVelocity, lastIdealStyle: currentStyle, lastIdealVelocity: currentVelocity }; }; // 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 Motion.prototype.componentDidMount = function componentDidMount() { this.prevTime = _performanceNow2['default'](); this.startAnimationIfNecessary(); }; Motion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) { if (this.unreadPropStyle != null) { // previous props haven't had the chance to be set yet; set them here this.clearUnreadPropStyle(this.unreadPropStyle); } this.unreadPropStyle = props.style; if (this.animationID == null) { this.prevTime = _performanceNow2['default'](); this.startAnimationIfNecessary(); } }; Motion.prototype.componentWillUnmount = function componentWillUnmount() { if (this.animationID != null) { _raf2['default'].cancel(this.animationID); this.animationID = null; } }; Motion.prototype.render = function render() { var renderedChildren = this.props.children(this.state.currentStyle); return renderedChildren && _react2['default'].Children.only(renderedChildren); }; return Motion; })(_react2['default'].Component); exports['default'] = Motion; module.exports = exports['default']; // after checking for unreadPropStyle != null, we manually go set the // non-interpolating values (those that are a number, without a spring // config)