|
- '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)
|