Experimental port to Firebase hosting
This commit is contained in:
Michael Jackson
267
public/react-motion@0.5.2/lib/Motion.js
Normal file
267
public/react-motion@0.5.2/lib/Motion.js
Normal file
@ -0,0 +1,267 @@
|
||||
'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)
|
||||
237
public/react-motion@0.5.2/lib/Motion.js.flow
Normal file
237
public/react-motion@0.5.2/lib/Motion.js.flow
Normal file
@ -0,0 +1,237 @@
|
||||
/* @flow */
|
||||
import mapToZero from './mapToZero';
|
||||
import stripStyle from './stripStyle';
|
||||
import stepper from './stepper';
|
||||
import defaultNow from 'performance-now';
|
||||
import defaultRaf from 'raf';
|
||||
import shouldStopAnimation from './shouldStopAnimation';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import type {ReactElement, PlainStyle, Style, Velocity, MotionProps} from './Types';
|
||||
|
||||
const msPerFrame = 1000 / 60;
|
||||
|
||||
type MotionState = {
|
||||
currentStyle: PlainStyle,
|
||||
currentVelocity: Velocity,
|
||||
lastIdealStyle: PlainStyle,
|
||||
lastIdealVelocity: Velocity,
|
||||
};
|
||||
|
||||
export default class Motion extends React.Component<MotionProps, MotionState> {
|
||||
static propTypes = {
|
||||
// TOOD: warn against putting a config in here
|
||||
defaultStyle: PropTypes.objectOf(PropTypes.number),
|
||||
style: PropTypes.objectOf(PropTypes.oneOfType([
|
||||
PropTypes.number,
|
||||
PropTypes.object,
|
||||
])).isRequired,
|
||||
children: PropTypes.func.isRequired,
|
||||
onRest: PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props: MotionProps) {
|
||||
super(props);
|
||||
this.state = this.defaultState();
|
||||
}
|
||||
|
||||
wasAnimating: boolean = false;
|
||||
animationID: ?number = null;
|
||||
prevTime: number = 0;
|
||||
accumulatedTime: number = 0;
|
||||
|
||||
defaultState(): MotionState {
|
||||
const {defaultStyle, style} = this.props;
|
||||
const currentStyle = defaultStyle || stripStyle(style);
|
||||
const currentVelocity = mapToZero(currentStyle);
|
||||
return {
|
||||
currentStyle,
|
||||
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
|
||||
unreadPropStyle: ?Style = null;
|
||||
// after checking for unreadPropStyle != null, we manually go set the
|
||||
// non-interpolating values (those that are a number, without a spring
|
||||
// config)
|
||||
clearUnreadPropStyle = (destStyle: Style): void => {
|
||||
let dirty = false;
|
||||
let {currentStyle, currentVelocity, lastIdealStyle, lastIdealVelocity} = this.state;
|
||||
|
||||
for (let key in destStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = destStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
if (!dirty) {
|
||||
dirty = true;
|
||||
currentStyle = {...currentStyle};
|
||||
currentVelocity = {...currentVelocity};
|
||||
lastIdealStyle = {...lastIdealStyle};
|
||||
lastIdealVelocity = {...lastIdealVelocity};
|
||||
}
|
||||
|
||||
currentStyle[key] = styleValue;
|
||||
currentVelocity[key] = 0;
|
||||
lastIdealStyle[key] = styleValue;
|
||||
lastIdealVelocity[key] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (dirty) {
|
||||
this.setState({currentStyle, currentVelocity, lastIdealStyle, lastIdealVelocity});
|
||||
}
|
||||
};
|
||||
|
||||
startAnimationIfNecessary = (): void => {
|
||||
// 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 = defaultRaf((timestamp) => {
|
||||
// check if we need to animate in the first place
|
||||
const propsStyle: Style = this.props.style;
|
||||
if (shouldStopAnimation(
|
||||
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;
|
||||
|
||||
const currentTime = timestamp || defaultNow();
|
||||
const 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;
|
||||
}
|
||||
|
||||
let currentFrameCompletion =
|
||||
(this.accumulatedTime - Math.floor(this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
|
||||
const framesToCatchUp = Math.floor(this.accumulatedTime / msPerFrame);
|
||||
|
||||
let newLastIdealStyle: PlainStyle = {};
|
||||
let newLastIdealVelocity: Velocity = {};
|
||||
let newCurrentStyle: PlainStyle = {};
|
||||
let newCurrentVelocity: Velocity = {};
|
||||
|
||||
for (let key in propsStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = propsStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
newCurrentStyle[key] = styleValue;
|
||||
newCurrentVelocity[key] = 0;
|
||||
newLastIdealStyle[key] = styleValue;
|
||||
newLastIdealVelocity[key] = 0;
|
||||
} else {
|
||||
let newLastIdealStyleValue = this.state.lastIdealStyle[key];
|
||||
let newLastIdealVelocityValue = this.state.lastIdealVelocity[key];
|
||||
for (let i = 0; i < framesToCatchUp; i++) {
|
||||
[newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
}
|
||||
const [nextIdealX, nextIdealV] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
|
||||
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();
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.prevTime = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props: MotionProps) {
|
||||
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 = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.animationID != null) {
|
||||
defaultRaf.cancel(this.animationID);
|
||||
this.animationID = null;
|
||||
}
|
||||
}
|
||||
|
||||
render(): ReactElement {
|
||||
const renderedChildren = this.props.children(this.state.currentStyle);
|
||||
return renderedChildren && React.Children.only(renderedChildren);
|
||||
}
|
||||
}
|
||||
288
public/react-motion@0.5.2/lib/StaggeredMotion.js
Normal file
288
public/react-motion@0.5.2/lib/StaggeredMotion.js
Normal file
@ -0,0 +1,288 @@
|
||||
'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;
|
||||
|
||||
function shouldStopAnimationAll(currentStyles, styles, currentVelocities) {
|
||||
for (var i = 0; i < currentStyles.length; i++) {
|
||||
if (!_shouldStopAnimation2['default'](currentStyles[i], styles[i], currentVelocities[i])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
var StaggeredMotion = (function (_React$Component) {
|
||||
_inherits(StaggeredMotion, _React$Component);
|
||||
|
||||
_createClass(StaggeredMotion, null, [{
|
||||
key: 'propTypes',
|
||||
value: {
|
||||
// TOOD: warn against putting a config in here
|
||||
defaultStyles: _propTypes2['default'].arrayOf(_propTypes2['default'].objectOf(_propTypes2['default'].number)),
|
||||
styles: _propTypes2['default'].func.isRequired,
|
||||
children: _propTypes2['default'].func.isRequired
|
||||
},
|
||||
enumerable: true
|
||||
}]);
|
||||
|
||||
function StaggeredMotion(props) {
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, StaggeredMotion);
|
||||
|
||||
_React$Component.call(this, props);
|
||||
this.animationID = null;
|
||||
this.prevTime = 0;
|
||||
this.accumulatedTime = 0;
|
||||
this.unreadPropStyles = null;
|
||||
|
||||
this.clearUnreadPropStyle = function (unreadPropStyles) {
|
||||
var _state = _this.state;
|
||||
var currentStyles = _state.currentStyles;
|
||||
var currentVelocities = _state.currentVelocities;
|
||||
var lastIdealStyles = _state.lastIdealStyles;
|
||||
var lastIdealVelocities = _state.lastIdealVelocities;
|
||||
|
||||
var someDirty = false;
|
||||
for (var i = 0; i < unreadPropStyles.length; i++) {
|
||||
var unreadPropStyle = unreadPropStyles[i];
|
||||
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;
|
||||
someDirty = true;
|
||||
currentStyles[i] = _extends({}, currentStyles[i]);
|
||||
currentVelocities[i] = _extends({}, currentVelocities[i]);
|
||||
lastIdealStyles[i] = _extends({}, lastIdealStyles[i]);
|
||||
lastIdealVelocities[i] = _extends({}, lastIdealVelocities[i]);
|
||||
}
|
||||
currentStyles[i][key] = styleValue;
|
||||
currentVelocities[i][key] = 0;
|
||||
lastIdealStyles[i][key] = styleValue;
|
||||
lastIdealVelocities[i][key] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (someDirty) {
|
||||
_this.setState({ currentStyles: currentStyles, currentVelocities: currentVelocities, lastIdealStyles: lastIdealStyles, lastIdealVelocities: lastIdealVelocities });
|
||||
}
|
||||
};
|
||||
|
||||
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) {
|
||||
var destStyles = _this.props.styles(_this.state.lastIdealStyles);
|
||||
|
||||
// check if we need to animate in the first place
|
||||
if (shouldStopAnimationAll(_this.state.currentStyles, destStyles, _this.state.currentVelocities)) {
|
||||
// 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 newLastIdealStyles = [];
|
||||
var newLastIdealVelocities = [];
|
||||
var newCurrentStyles = [];
|
||||
var newCurrentVelocities = [];
|
||||
|
||||
for (var i = 0; i < destStyles.length; i++) {
|
||||
var destStyle = destStyles[i];
|
||||
var newCurrentStyle = {};
|
||||
var newCurrentVelocity = {};
|
||||
var newLastIdealStyle = {};
|
||||
var newLastIdealVelocity = {};
|
||||
|
||||
for (var key in destStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var styleValue = destStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
newCurrentStyle[key] = styleValue;
|
||||
newCurrentVelocity[key] = 0;
|
||||
newLastIdealStyle[key] = styleValue;
|
||||
newLastIdealVelocity[key] = 0;
|
||||
} else {
|
||||
var newLastIdealStyleValue = _this.state.lastIdealStyles[i][key];
|
||||
var newLastIdealVelocityValue = _this.state.lastIdealVelocities[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;
|
||||
}
|
||||
}
|
||||
|
||||
newCurrentStyles[i] = newCurrentStyle;
|
||||
newCurrentVelocities[i] = newCurrentVelocity;
|
||||
newLastIdealStyles[i] = newLastIdealStyle;
|
||||
newLastIdealVelocities[i] = newLastIdealVelocity;
|
||||
}
|
||||
|
||||
_this.animationID = null;
|
||||
// the amount we're looped over above
|
||||
_this.accumulatedTime -= framesToCatchUp * msPerFrame;
|
||||
|
||||
_this.setState({
|
||||
currentStyles: newCurrentStyles,
|
||||
currentVelocities: newCurrentVelocities,
|
||||
lastIdealStyles: newLastIdealStyles,
|
||||
lastIdealVelocities: newLastIdealVelocities
|
||||
});
|
||||
|
||||
_this.unreadPropStyles = null;
|
||||
|
||||
_this.startAnimationIfNecessary();
|
||||
});
|
||||
};
|
||||
|
||||
this.state = this.defaultState();
|
||||
}
|
||||
|
||||
StaggeredMotion.prototype.defaultState = function defaultState() {
|
||||
var _props = this.props;
|
||||
var defaultStyles = _props.defaultStyles;
|
||||
var styles = _props.styles;
|
||||
|
||||
var currentStyles = defaultStyles || styles().map(_stripStyle2['default']);
|
||||
var currentVelocities = currentStyles.map(function (currentStyle) {
|
||||
return _mapToZero2['default'](currentStyle);
|
||||
});
|
||||
return {
|
||||
currentStyles: currentStyles,
|
||||
currentVelocities: currentVelocities,
|
||||
lastIdealStyles: currentStyles,
|
||||
lastIdealVelocities: currentVelocities
|
||||
};
|
||||
};
|
||||
|
||||
StaggeredMotion.prototype.componentDidMount = function componentDidMount() {
|
||||
this.prevTime = _performanceNow2['default']();
|
||||
this.startAnimationIfNecessary();
|
||||
};
|
||||
|
||||
StaggeredMotion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
|
||||
if (this.unreadPropStyles != null) {
|
||||
// previous props haven't had the chance to be set yet; set them here
|
||||
this.clearUnreadPropStyle(this.unreadPropStyles);
|
||||
}
|
||||
|
||||
this.unreadPropStyles = props.styles(this.state.lastIdealStyles);
|
||||
if (this.animationID == null) {
|
||||
this.prevTime = _performanceNow2['default']();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
};
|
||||
|
||||
StaggeredMotion.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
if (this.animationID != null) {
|
||||
_raf2['default'].cancel(this.animationID);
|
||||
this.animationID = null;
|
||||
}
|
||||
};
|
||||
|
||||
StaggeredMotion.prototype.render = function render() {
|
||||
var renderedChildren = this.props.children(this.state.currentStyles);
|
||||
return renderedChildren && _react2['default'].Children.only(renderedChildren);
|
||||
};
|
||||
|
||||
return StaggeredMotion;
|
||||
})(_react2['default'].Component);
|
||||
|
||||
exports['default'] = StaggeredMotion;
|
||||
module.exports = exports['default'];
|
||||
|
||||
// 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
|
||||
|
||||
// after checking for unreadPropStyles != null, we manually go set the
|
||||
// non-interpolating values (those that are a number, without a spring
|
||||
// config)
|
||||
257
public/react-motion@0.5.2/lib/StaggeredMotion.js.flow
Normal file
257
public/react-motion@0.5.2/lib/StaggeredMotion.js.flow
Normal file
@ -0,0 +1,257 @@
|
||||
/* @flow */
|
||||
import mapToZero from './mapToZero';
|
||||
import stripStyle from './stripStyle';
|
||||
import stepper from './stepper';
|
||||
import defaultNow from 'performance-now';
|
||||
import defaultRaf from 'raf';
|
||||
import shouldStopAnimation from './shouldStopAnimation';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import type {ReactElement, PlainStyle, Style, Velocity, StaggeredProps} from './Types';
|
||||
|
||||
const msPerFrame = 1000 / 60;
|
||||
|
||||
type StaggeredMotionState = {
|
||||
currentStyles: Array<PlainStyle>,
|
||||
currentVelocities: Array<Velocity>,
|
||||
lastIdealStyles: Array<PlainStyle>,
|
||||
lastIdealVelocities: Array<Velocity>,
|
||||
};
|
||||
|
||||
function shouldStopAnimationAll(
|
||||
currentStyles: Array<PlainStyle>,
|
||||
styles: Array<Style>,
|
||||
currentVelocities: Array<Velocity>,
|
||||
): boolean {
|
||||
for (let i = 0; i < currentStyles.length; i++) {
|
||||
if (!shouldStopAnimation(currentStyles[i], styles[i], currentVelocities[i])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export default class StaggeredMotion extends React.Component<StaggeredProps, StaggeredMotionState> {
|
||||
static propTypes = {
|
||||
// TOOD: warn against putting a config in here
|
||||
defaultStyles: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.number)),
|
||||
styles: PropTypes.func.isRequired,
|
||||
children: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
constructor(props: StaggeredProps) {
|
||||
super(props);
|
||||
this.state = this.defaultState();
|
||||
}
|
||||
|
||||
defaultState(): StaggeredMotionState {
|
||||
const {defaultStyles, styles} = this.props;
|
||||
const currentStyles: Array<PlainStyle> = defaultStyles || styles().map(stripStyle);
|
||||
const currentVelocities = currentStyles.map(currentStyle => mapToZero(currentStyle));
|
||||
return {
|
||||
currentStyles,
|
||||
currentVelocities,
|
||||
lastIdealStyles: currentStyles,
|
||||
lastIdealVelocities: currentVelocities,
|
||||
};
|
||||
}
|
||||
|
||||
animationID: ?number = null;
|
||||
prevTime = 0;
|
||||
accumulatedTime = 0;
|
||||
// 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
|
||||
unreadPropStyles: ?Array<Style> = null;
|
||||
|
||||
// after checking for unreadPropStyles != null, we manually go set the
|
||||
// non-interpolating values (those that are a number, without a spring
|
||||
// config)
|
||||
clearUnreadPropStyle = (unreadPropStyles: Array<Style>): void => {
|
||||
let {currentStyles, currentVelocities, lastIdealStyles, lastIdealVelocities} = this.state;
|
||||
|
||||
let someDirty = false;
|
||||
for (let i = 0; i < unreadPropStyles.length; i++) {
|
||||
const unreadPropStyle = unreadPropStyles[i];
|
||||
let dirty = false;
|
||||
|
||||
for (let key in unreadPropStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(unreadPropStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = unreadPropStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
if (!dirty) {
|
||||
dirty = true;
|
||||
someDirty = true;
|
||||
currentStyles[i] = {...currentStyles[i]};
|
||||
currentVelocities[i] = {...currentVelocities[i]};
|
||||
lastIdealStyles[i] = {...lastIdealStyles[i]};
|
||||
lastIdealVelocities[i] = {...lastIdealVelocities[i]};
|
||||
}
|
||||
currentStyles[i][key] = styleValue;
|
||||
currentVelocities[i][key] = 0;
|
||||
lastIdealStyles[i][key] = styleValue;
|
||||
lastIdealVelocities[i][key] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (someDirty) {
|
||||
this.setState({currentStyles, currentVelocities, lastIdealStyles, lastIdealVelocities});
|
||||
}
|
||||
}
|
||||
|
||||
startAnimationIfNecessary = (): void => {
|
||||
// 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 = defaultRaf((timestamp) => {
|
||||
const destStyles: Array<Style> = this.props.styles(this.state.lastIdealStyles);
|
||||
|
||||
// check if we need to animate in the first place
|
||||
if (shouldStopAnimationAll(
|
||||
this.state.currentStyles,
|
||||
destStyles,
|
||||
this.state.currentVelocities,
|
||||
)) {
|
||||
// no need to cancel animationID here; shouldn't have any in flight
|
||||
this.animationID = null;
|
||||
this.accumulatedTime = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentTime = timestamp || defaultNow();
|
||||
const 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;
|
||||
}
|
||||
|
||||
let currentFrameCompletion =
|
||||
(this.accumulatedTime - Math.floor(this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
|
||||
const framesToCatchUp = Math.floor(this.accumulatedTime / msPerFrame);
|
||||
|
||||
let newLastIdealStyles = [];
|
||||
let newLastIdealVelocities = [];
|
||||
let newCurrentStyles = [];
|
||||
let newCurrentVelocities = [];
|
||||
|
||||
for (let i = 0; i < destStyles.length; i++) {
|
||||
const destStyle = destStyles[i];
|
||||
let newCurrentStyle: PlainStyle = {};
|
||||
let newCurrentVelocity: Velocity = {};
|
||||
let newLastIdealStyle: PlainStyle = {};
|
||||
let newLastIdealVelocity: Velocity = {};
|
||||
|
||||
for (let key in destStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = destStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
newCurrentStyle[key] = styleValue;
|
||||
newCurrentVelocity[key] = 0;
|
||||
newLastIdealStyle[key] = styleValue;
|
||||
newLastIdealVelocity[key] = 0;
|
||||
} else {
|
||||
let newLastIdealStyleValue = this.state.lastIdealStyles[i][key];
|
||||
let newLastIdealVelocityValue = this.state.lastIdealVelocities[i][key];
|
||||
for (let j = 0; j < framesToCatchUp; j++) {
|
||||
[newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
}
|
||||
const [nextIdealX, nextIdealV] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
|
||||
newCurrentStyle[key] =
|
||||
newLastIdealStyleValue +
|
||||
(nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
|
||||
newCurrentVelocity[key] =
|
||||
newLastIdealVelocityValue +
|
||||
(nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
|
||||
newLastIdealStyle[key] = newLastIdealStyleValue;
|
||||
newLastIdealVelocity[key] = newLastIdealVelocityValue;
|
||||
}
|
||||
}
|
||||
|
||||
newCurrentStyles[i] = newCurrentStyle;
|
||||
newCurrentVelocities[i] = newCurrentVelocity;
|
||||
newLastIdealStyles[i] = newLastIdealStyle;
|
||||
newLastIdealVelocities[i] = newLastIdealVelocity;
|
||||
}
|
||||
|
||||
this.animationID = null;
|
||||
// the amount we're looped over above
|
||||
this.accumulatedTime -= framesToCatchUp * msPerFrame;
|
||||
|
||||
this.setState({
|
||||
currentStyles: newCurrentStyles,
|
||||
currentVelocities: newCurrentVelocities,
|
||||
lastIdealStyles: newLastIdealStyles,
|
||||
lastIdealVelocities: newLastIdealVelocities,
|
||||
});
|
||||
|
||||
this.unreadPropStyles = null;
|
||||
|
||||
this.startAnimationIfNecessary();
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.prevTime = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props: StaggeredProps) {
|
||||
if (this.unreadPropStyles != null) {
|
||||
// previous props haven't had the chance to be set yet; set them here
|
||||
this.clearUnreadPropStyle(this.unreadPropStyles);
|
||||
}
|
||||
|
||||
this.unreadPropStyles = props.styles(this.state.lastIdealStyles);
|
||||
if (this.animationID == null) {
|
||||
this.prevTime = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.animationID != null) {
|
||||
defaultRaf.cancel(this.animationID);
|
||||
this.animationID = null;
|
||||
}
|
||||
}
|
||||
|
||||
render(): ReactElement {
|
||||
const renderedChildren = this.props.children(this.state.currentStyles);
|
||||
return renderedChildren && React.Children.only(renderedChildren);
|
||||
}
|
||||
}
|
||||
522
public/react-motion@0.5.2/lib/TransitionMotion.js
Normal file
522
public/react-motion@0.5.2/lib/TransitionMotion.js
Normal file
@ -0,0 +1,522 @@
|
||||
'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
|
||||
549
public/react-motion@0.5.2/lib/TransitionMotion.js.flow
Normal file
549
public/react-motion@0.5.2/lib/TransitionMotion.js.flow
Normal file
@ -0,0 +1,549 @@
|
||||
/* @flow */
|
||||
import mapToZero from './mapToZero';
|
||||
import stripStyle from './stripStyle';
|
||||
import stepper from './stepper';
|
||||
import mergeDiff from './mergeDiff';
|
||||
import defaultNow from 'performance-now';
|
||||
import defaultRaf from 'raf';
|
||||
import shouldStopAnimation from './shouldStopAnimation';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import type {
|
||||
ReactElement,
|
||||
PlainStyle,
|
||||
Velocity,
|
||||
TransitionStyle,
|
||||
TransitionPlainStyle,
|
||||
WillEnter,
|
||||
WillLeave,
|
||||
DidLeave,
|
||||
TransitionProps,
|
||||
} from './Types';
|
||||
|
||||
const 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: Array<TransitionStyle>,
|
||||
unreadPropStyles: ?Array<TransitionStyle>,
|
||||
plainStyles: Array<PlainStyle>,
|
||||
): Array<TransitionPlainStyle> {
|
||||
// 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.
|
||||
const cUnreadPropStyles = unreadPropStyles;
|
||||
if (cUnreadPropStyles == null) {
|
||||
return mergedPropsStyles.map((mergedPropsStyle, i) => ({
|
||||
key: mergedPropsStyle.key,
|
||||
data: mergedPropsStyle.data,
|
||||
style: plainStyles[i],
|
||||
}));
|
||||
}
|
||||
return mergedPropsStyles.map((mergedPropsStyle, i) => {
|
||||
for (let 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: Array<PlainStyle>,
|
||||
destStyles: Array<TransitionStyle>,
|
||||
currentVelocities: Array<Velocity>,
|
||||
mergedPropsStyles: Array<TransitionStyle>,
|
||||
): boolean {
|
||||
if (mergedPropsStyles.length !== destStyles.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let 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 (let i = 0; i < mergedPropsStyles.length; i++) {
|
||||
if (!shouldStopAnimation(
|
||||
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: WillEnter,
|
||||
willLeave: WillLeave,
|
||||
didLeave: DidLeave,
|
||||
oldMergedPropsStyles: Array<TransitionStyle>,
|
||||
destStyles: Array<TransitionStyle>,
|
||||
oldCurrentStyles: Array<PlainStyle>,
|
||||
oldCurrentVelocities: Array<Velocity>,
|
||||
oldLastIdealStyles: Array<PlainStyle>,
|
||||
oldLastIdealVelocities: Array<Velocity>,
|
||||
): [Array<TransitionStyle>, Array<PlainStyle>, Array<Velocity>, Array<PlainStyle>, Array<Velocity>] {
|
||||
const newMergedPropsStyles = mergeDiff(
|
||||
oldMergedPropsStyles,
|
||||
destStyles,
|
||||
(oldIndex, oldMergedPropsStyle) => {
|
||||
const leavingStyle = willLeave(oldMergedPropsStyle);
|
||||
if (leavingStyle == null) {
|
||||
didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
|
||||
return null;
|
||||
}
|
||||
if (shouldStopAnimation(
|
||||
oldCurrentStyles[oldIndex],
|
||||
leavingStyle,
|
||||
oldCurrentVelocities[oldIndex])) {
|
||||
didLeave({ key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data });
|
||||
return null;
|
||||
}
|
||||
return {key: oldMergedPropsStyle.key, data: oldMergedPropsStyle.data, style: leavingStyle};
|
||||
},
|
||||
);
|
||||
|
||||
let newCurrentStyles = [];
|
||||
let newCurrentVelocities = [];
|
||||
let newLastIdealStyles = [];
|
||||
let newLastIdealVelocities = [];
|
||||
for (let i = 0; i < newMergedPropsStyles.length; i++) {
|
||||
const newMergedPropsStyleCell = newMergedPropsStyles[i];
|
||||
let foundOldIndex = null;
|
||||
for (let j = 0; j < oldMergedPropsStyles.length; j++) {
|
||||
if (oldMergedPropsStyles[j].key === newMergedPropsStyleCell.key) {
|
||||
foundOldIndex = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// TODO: key search code
|
||||
if (foundOldIndex == null) {
|
||||
const plainStyle = willEnter(newMergedPropsStyleCell);
|
||||
newCurrentStyles[i] = plainStyle;
|
||||
newLastIdealStyles[i] = plainStyle;
|
||||
|
||||
const velocity = mapToZero(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];
|
||||
}
|
||||
|
||||
type TransitionMotionDefaultProps = {
|
||||
willEnter: WillEnter,
|
||||
willLeave: WillLeave,
|
||||
didLeave: DidLeave
|
||||
}
|
||||
|
||||
type TransitionMotionState = {
|
||||
// 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
|
||||
currentStyles: Array<PlainStyle>,
|
||||
currentVelocities: Array<Velocity>,
|
||||
lastIdealStyles: Array<PlainStyle>,
|
||||
lastIdealVelocities: Array<Velocity>,
|
||||
// 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
|
||||
mergedPropsStyles: Array<TransitionStyle>,
|
||||
};
|
||||
|
||||
export default class TransitionMotion extends React.Component<TransitionProps, TransitionMotionState> {
|
||||
static propTypes = {
|
||||
defaultStyles: PropTypes.arrayOf(PropTypes.shape({
|
||||
key: PropTypes.string.isRequired,
|
||||
data: PropTypes.any,
|
||||
style: PropTypes.objectOf(PropTypes.number).isRequired,
|
||||
})),
|
||||
styles: PropTypes.oneOfType([
|
||||
PropTypes.func,
|
||||
PropTypes.arrayOf(PropTypes.shape({
|
||||
key: PropTypes.string.isRequired,
|
||||
data: PropTypes.any,
|
||||
style: PropTypes.objectOf(PropTypes.oneOfType([
|
||||
PropTypes.number,
|
||||
PropTypes.object,
|
||||
])).isRequired,
|
||||
}),
|
||||
)]).isRequired,
|
||||
children: PropTypes.func.isRequired,
|
||||
willEnter: PropTypes.func,
|
||||
willLeave: PropTypes.func,
|
||||
didLeave: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps: TransitionMotionDefaultProps = {
|
||||
willEnter: styleThatEntered => stripStyle(styleThatEntered.style),
|
||||
// recall: returning null makes the current unmounting TransitionStyle
|
||||
// disappear immediately
|
||||
willLeave: () => null,
|
||||
didLeave: () => {},
|
||||
};
|
||||
|
||||
unmounting: boolean = false;
|
||||
animationID: ?number = null;
|
||||
prevTime = 0;
|
||||
accumulatedTime = 0;
|
||||
// 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
|
||||
unreadPropStyles: ?Array<TransitionStyle> = null;
|
||||
|
||||
constructor(props: TransitionProps) {
|
||||
super(props);
|
||||
this.state = this.defaultState();
|
||||
}
|
||||
|
||||
defaultState(): TransitionMotionState {
|
||||
const {defaultStyles, styles, willEnter, willLeave, didLeave} = this.props;
|
||||
const destStyles: Array<TransitionStyle> = 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}
|
||||
let oldMergedPropsStyles: Array<TransitionStyle>;
|
||||
if (defaultStyles == null) {
|
||||
oldMergedPropsStyles = destStyles;
|
||||
} else {
|
||||
oldMergedPropsStyles = (defaultStyles: any).map(defaultStyleCell => {
|
||||
// TODO: key search code
|
||||
for (let i = 0; i < destStyles.length; i++) {
|
||||
if (destStyles[i].key === defaultStyleCell.key) {
|
||||
return destStyles[i];
|
||||
}
|
||||
}
|
||||
return defaultStyleCell;
|
||||
});
|
||||
}
|
||||
const oldCurrentStyles = defaultStyles == null
|
||||
? destStyles.map(s => stripStyle(s.style))
|
||||
: (defaultStyles: any).map(s => stripStyle(s.style));
|
||||
const oldCurrentVelocities = defaultStyles == null
|
||||
? destStyles.map(s => mapToZero(s.style))
|
||||
: defaultStyles.map(s => mapToZero(s.style));
|
||||
const [mergedPropsStyles, currentStyles, currentVelocities, lastIdealStyles, lastIdealVelocities] = 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: any),
|
||||
(willLeave: any),
|
||||
(didLeave: any),
|
||||
oldMergedPropsStyles,
|
||||
destStyles,
|
||||
oldCurrentStyles,
|
||||
oldCurrentVelocities,
|
||||
oldCurrentStyles, // oldLastIdealStyles really
|
||||
oldCurrentVelocities, // oldLastIdealVelocities really
|
||||
);
|
||||
|
||||
return {
|
||||
currentStyles,
|
||||
currentVelocities,
|
||||
lastIdealStyles,
|
||||
lastIdealVelocities,
|
||||
mergedPropsStyles,
|
||||
};
|
||||
}
|
||||
|
||||
// after checking for unreadPropStyles != null, we manually go set the
|
||||
// non-interpolating values (those that are a number, without a spring
|
||||
// config)
|
||||
clearUnreadPropStyle = (unreadPropStyles: Array<TransitionStyle>): void => {
|
||||
let [mergedPropsStyles, currentStyles, currentVelocities, lastIdealStyles, lastIdealVelocities] = mergeAndSync(
|
||||
(this.props.willEnter: any),
|
||||
(this.props.willLeave: any),
|
||||
(this.props.didLeave: any),
|
||||
this.state.mergedPropsStyles,
|
||||
unreadPropStyles,
|
||||
this.state.currentStyles,
|
||||
this.state.currentVelocities,
|
||||
this.state.lastIdealStyles,
|
||||
this.state.lastIdealVelocities,
|
||||
);
|
||||
|
||||
for (let i = 0; i < unreadPropStyles.length; i++) {
|
||||
const unreadPropStyle = unreadPropStyles[i].style;
|
||||
let dirty = false;
|
||||
|
||||
for (let key in unreadPropStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(unreadPropStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = unreadPropStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
if (!dirty) {
|
||||
dirty = true;
|
||||
currentStyles[i] = {...currentStyles[i]};
|
||||
currentVelocities[i] = {...currentVelocities[i]};
|
||||
lastIdealStyles[i] = {...lastIdealStyles[i]};
|
||||
lastIdealVelocities[i] = {...lastIdealVelocities[i]};
|
||||
mergedPropsStyles[i] = {
|
||||
key: mergedPropsStyles[i].key,
|
||||
data: mergedPropsStyles[i].data,
|
||||
style: {...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,
|
||||
currentVelocities,
|
||||
mergedPropsStyles,
|
||||
lastIdealStyles,
|
||||
lastIdealVelocities,
|
||||
});
|
||||
}
|
||||
|
||||
startAnimationIfNecessary = (): void => {
|
||||
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 = defaultRaf((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;
|
||||
}
|
||||
|
||||
const propStyles = this.props.styles;
|
||||
let destStyles: Array<TransitionStyle> = 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;
|
||||
}
|
||||
|
||||
const currentTime = timestamp || defaultNow();
|
||||
const 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;
|
||||
}
|
||||
|
||||
let currentFrameCompletion =
|
||||
(this.accumulatedTime - Math.floor(this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
|
||||
const framesToCatchUp = Math.floor(this.accumulatedTime / msPerFrame);
|
||||
|
||||
let [newMergedPropsStyles, newCurrentStyles, newCurrentVelocities, newLastIdealStyles, newLastIdealVelocities] = mergeAndSync(
|
||||
(this.props.willEnter: any),
|
||||
(this.props.willLeave: any),
|
||||
(this.props.didLeave: any),
|
||||
this.state.mergedPropsStyles,
|
||||
destStyles,
|
||||
this.state.currentStyles,
|
||||
this.state.currentVelocities,
|
||||
this.state.lastIdealStyles,
|
||||
this.state.lastIdealVelocities,
|
||||
);
|
||||
for (let i = 0; i < newMergedPropsStyles.length; i++) {
|
||||
const newMergedPropsStyle = newMergedPropsStyles[i].style;
|
||||
let newCurrentStyle: PlainStyle = {};
|
||||
let newCurrentVelocity: Velocity = {};
|
||||
let newLastIdealStyle: PlainStyle = {};
|
||||
let newLastIdealVelocity: Velocity = {};
|
||||
|
||||
for (let key in newMergedPropsStyle) {
|
||||
if (!Object.prototype.hasOwnProperty.call(newMergedPropsStyle, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const styleValue = newMergedPropsStyle[key];
|
||||
if (typeof styleValue === 'number') {
|
||||
newCurrentStyle[key] = styleValue;
|
||||
newCurrentVelocity[key] = 0;
|
||||
newLastIdealStyle[key] = styleValue;
|
||||
newLastIdealVelocity[key] = 0;
|
||||
} else {
|
||||
let newLastIdealStyleValue = newLastIdealStyles[i][key];
|
||||
let newLastIdealVelocityValue = newLastIdealVelocities[i][key];
|
||||
for (let j = 0; j < framesToCatchUp; j++) {
|
||||
[newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
}
|
||||
const [nextIdealX, nextIdealV] = stepper(
|
||||
msPerFrame / 1000,
|
||||
newLastIdealStyleValue,
|
||||
newLastIdealVelocityValue,
|
||||
styleValue.val,
|
||||
styleValue.stiffness,
|
||||
styleValue.damping,
|
||||
styleValue.precision,
|
||||
);
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.prevTime = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props: TransitionProps) {
|
||||
if (this.unreadPropStyles) {
|
||||
// previous props haven't had the chance to be set yet; set them here
|
||||
this.clearUnreadPropStyle(this.unreadPropStyles);
|
||||
}
|
||||
|
||||
const 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 = defaultNow();
|
||||
this.startAnimationIfNecessary();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unmounting = true;
|
||||
if (this.animationID != null) {
|
||||
defaultRaf.cancel(this.animationID);
|
||||
this.animationID = null;
|
||||
}
|
||||
}
|
||||
|
||||
render(): ReactElement {
|
||||
const hydratedStyles = rehydrateStyles(
|
||||
this.state.mergedPropsStyles,
|
||||
this.unreadPropStyles,
|
||||
this.state.currentStyles,
|
||||
);
|
||||
const renderedChildren = this.props.children(hydratedStyles);
|
||||
return renderedChildren && React.Children.only(renderedChildren);
|
||||
}
|
||||
}
|
||||
35
public/react-motion@0.5.2/lib/Types.js
Normal file
35
public/react-motion@0.5.2/lib/Types.js
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
// Babel 5.x doesn't support type parameters, so we make this alias here out of
|
||||
// Babel's sight.
|
||||
/* eslint-disable spaced-comment, no-undef */
|
||||
/*::
|
||||
import type {Element} from 'react';
|
||||
export type ReactElement = Element<*>;
|
||||
*/
|
||||
|
||||
// === basic reused types ===
|
||||
// type of the second parameter of `spring(val, config)` all fields are optional
|
||||
"use strict";
|
||||
|
||||
// the object returned by `spring(value, yourConfig)`. For internal usage only!
|
||||
|
||||
// your typical style object given in props. Maps to a number or a spring config
|
||||
|
||||
// the interpolating style object, with the same keys as the above Style object,
|
||||
// with the values mapped to numbers, naturally
|
||||
|
||||
// internal velocity object. Similar to PlainStyle, but whose numbers represent
|
||||
// speed. Might be exposed one day.
|
||||
|
||||
// === Motion ===
|
||||
|
||||
// === StaggeredMotion ===
|
||||
|
||||
// === TransitionMotion ===
|
||||
// actual style you're passing
|
||||
exports.__esModule = true;
|
||||
// unique ID to identify component across render animations
|
||||
// optional data you want to carry along the style, e.g. itemText
|
||||
|
||||
// same as TransitionStyle, passed as argument to style/children function
|
||||
72
public/react-motion@0.5.2/lib/Types.js.flow
Normal file
72
public/react-motion@0.5.2/lib/Types.js.flow
Normal file
@ -0,0 +1,72 @@
|
||||
/* @flow */
|
||||
|
||||
// Babel 5.x doesn't support type parameters, so we make this alias here out of
|
||||
// Babel's sight.
|
||||
/* eslint-disable spaced-comment, no-undef */
|
||||
/*::
|
||||
import type {Element} from 'react';
|
||||
export type ReactElement = Element<*>;
|
||||
*/
|
||||
|
||||
// === basic reused types ===
|
||||
// type of the second parameter of `spring(val, config)` all fields are optional
|
||||
export type SpringHelperConfig = {
|
||||
stiffness?: number,
|
||||
damping?: number,
|
||||
precision?: number,
|
||||
};
|
||||
// the object returned by `spring(value, yourConfig)`. For internal usage only!
|
||||
export type OpaqueConfig = {
|
||||
val: number,
|
||||
stiffness: number,
|
||||
damping: number,
|
||||
precision: number,
|
||||
};
|
||||
// your typical style object given in props. Maps to a number or a spring config
|
||||
export type Style = {[key: string]: number | OpaqueConfig};
|
||||
// the interpolating style object, with the same keys as the above Style object,
|
||||
// with the values mapped to numbers, naturally
|
||||
export type PlainStyle = {[key: string]: number};
|
||||
// internal velocity object. Similar to PlainStyle, but whose numbers represent
|
||||
// speed. Might be exposed one day.
|
||||
export type Velocity = {[key: string]: number};
|
||||
|
||||
// === Motion ===
|
||||
export type MotionProps = {
|
||||
defaultStyle?: PlainStyle,
|
||||
style: Style,
|
||||
children: (interpolatedStyle: PlainStyle) => ReactElement,
|
||||
onRest?: () => void,
|
||||
};
|
||||
|
||||
// === StaggeredMotion ===
|
||||
export type StaggeredProps = {
|
||||
defaultStyles?: Array<PlainStyle>,
|
||||
styles: (previousInterpolatedStyles: ?Array<PlainStyle>) => Array<Style>,
|
||||
children: (interpolatedStyles: Array<PlainStyle>) => ReactElement,
|
||||
};
|
||||
|
||||
// === TransitionMotion ===
|
||||
export type TransitionStyle = {
|
||||
key: string, // unique ID to identify component across render animations
|
||||
data?: any, // optional data you want to carry along the style, e.g. itemText
|
||||
style: Style, // actual style you're passing
|
||||
};
|
||||
export type TransitionPlainStyle = {
|
||||
key: string,
|
||||
data?: any,
|
||||
// same as TransitionStyle, passed as argument to style/children function
|
||||
style: PlainStyle,
|
||||
};
|
||||
export type WillEnter = (styleThatEntered: TransitionStyle) => PlainStyle;
|
||||
export type WillLeave = (styleThatLeft: TransitionStyle) => ?Style;
|
||||
export type DidLeave = (styleThatLeft: { key: string, data?: any }) => void;
|
||||
|
||||
export type TransitionProps = {
|
||||
defaultStyles?: Array<TransitionPlainStyle>,
|
||||
styles: Array<TransitionStyle> | (previousInterpolatedStyles: ?Array<TransitionPlainStyle>) => Array<TransitionStyle>,
|
||||
children: (interpolatedStyles: Array<TransitionPlainStyle>) => ReactElement,
|
||||
willEnter?: WillEnter,
|
||||
willLeave?: WillLeave,
|
||||
didLeave?: DidLeave
|
||||
};
|
||||
19
public/react-motion@0.5.2/lib/mapToZero.js
Normal file
19
public/react-motion@0.5.2/lib/mapToZero.js
Normal file
@ -0,0 +1,19 @@
|
||||
|
||||
|
||||
// currently used to initiate the velocity style object to 0
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports['default'] = mapToZero;
|
||||
|
||||
function mapToZero(obj) {
|
||||
var ret = {};
|
||||
for (var key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
ret[key] = 0;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
13
public/react-motion@0.5.2/lib/mapToZero.js.flow
Normal file
13
public/react-motion@0.5.2/lib/mapToZero.js.flow
Normal file
@ -0,0 +1,13 @@
|
||||
/* @flow */
|
||||
import type {PlainStyle, Style} from './Types';
|
||||
|
||||
// currently used to initiate the velocity style object to 0
|
||||
export default function mapToZero(obj: Style | PlainStyle): PlainStyle {
|
||||
let ret = {};
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
ret[key] = 0;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
108
public/react-motion@0.5.2/lib/mergeDiff.js
Normal file
108
public/react-motion@0.5.2/lib/mergeDiff.js
Normal file
@ -0,0 +1,108 @@
|
||||
|
||||
|
||||
// core keys merging algorithm. If previous render's keys are [a, b], and the
|
||||
// next render's [c, b, d], what's the final merged keys and ordering?
|
||||
|
||||
// - c and a must both be before b
|
||||
// - b before d
|
||||
// - ordering between a and c ambiguous
|
||||
|
||||
// this reduces to merging two partially ordered lists (e.g. lists where not
|
||||
// every item has a definite ordering, like comparing a and c above). For the
|
||||
// ambiguous ordering we deterministically choose to place the next render's
|
||||
// item after the previous'; so c after a
|
||||
|
||||
// this is called a topological sorting. Except the existing algorithms don't
|
||||
// work well with js bc of the amount of allocation, and isn't optimized for our
|
||||
// current use-case bc the runtime is linear in terms of edges (see wiki for
|
||||
// meaning), which is huge when two lists have many common elements
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports['default'] = mergeDiff;
|
||||
|
||||
function mergeDiff(prev, next, onRemove) {
|
||||
// bookkeeping for easier access of a key's index below. This is 2 allocations +
|
||||
// potentially triggering chrome hash map mode for objs (so it might be faster
|
||||
|
||||
var prevKeyIndex = {};
|
||||
for (var i = 0; i < prev.length; i++) {
|
||||
prevKeyIndex[prev[i].key] = i;
|
||||
}
|
||||
var nextKeyIndex = {};
|
||||
for (var i = 0; i < next.length; i++) {
|
||||
nextKeyIndex[next[i].key] = i;
|
||||
}
|
||||
|
||||
// first, an overly elaborate way of merging prev and next, eliminating
|
||||
// duplicates (in terms of keys). If there's dupe, keep the item in next).
|
||||
// This way of writing it saves allocations
|
||||
var ret = [];
|
||||
for (var i = 0; i < next.length; i++) {
|
||||
ret[i] = next[i];
|
||||
}
|
||||
for (var i = 0; i < prev.length; i++) {
|
||||
if (!Object.prototype.hasOwnProperty.call(nextKeyIndex, prev[i].key)) {
|
||||
// this is called my TM's `mergeAndSync`, which calls willLeave. We don't
|
||||
// merge in keys that the user desires to kill
|
||||
var fill = onRemove(i, prev[i]);
|
||||
if (fill != null) {
|
||||
ret.push(fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// now all the items all present. Core sorting logic to have the right order
|
||||
return ret.sort(function (a, b) {
|
||||
var nextOrderA = nextKeyIndex[a.key];
|
||||
var nextOrderB = nextKeyIndex[b.key];
|
||||
var prevOrderA = prevKeyIndex[a.key];
|
||||
var prevOrderB = prevKeyIndex[b.key];
|
||||
|
||||
if (nextOrderA != null && nextOrderB != null) {
|
||||
// both keys in next
|
||||
return nextKeyIndex[a.key] - nextKeyIndex[b.key];
|
||||
} else if (prevOrderA != null && prevOrderB != null) {
|
||||
// both keys in prev
|
||||
return prevKeyIndex[a.key] - prevKeyIndex[b.key];
|
||||
} else if (nextOrderA != null) {
|
||||
// key a in next, key b in prev
|
||||
|
||||
// how to determine the order between a and b? We find a "pivot" (term
|
||||
// abuse), a key present in both prev and next, that is sandwiched between
|
||||
// a and b. In the context of our above example, if we're comparing a and
|
||||
// d, b's (the only) pivot
|
||||
for (var i = 0; i < next.length; i++) {
|
||||
var pivot = next[i].key;
|
||||
if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (nextOrderA < nextKeyIndex[pivot] && prevOrderB > prevKeyIndex[pivot]) {
|
||||
return -1;
|
||||
} else if (nextOrderA > nextKeyIndex[pivot] && prevOrderB < prevKeyIndex[pivot]) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
// pluggable. default to: next bigger than prev
|
||||
return 1;
|
||||
}
|
||||
// prevOrderA, nextOrderB
|
||||
for (var i = 0; i < next.length; i++) {
|
||||
var pivot = next[i].key;
|
||||
if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
|
||||
continue;
|
||||
}
|
||||
if (nextOrderB < nextKeyIndex[pivot] && prevOrderA > prevKeyIndex[pivot]) {
|
||||
return 1;
|
||||
} else if (nextOrderB > nextKeyIndex[pivot] && prevOrderA < prevKeyIndex[pivot]) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
// pluggable. default to: next bigger than prev
|
||||
return -1;
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
// to loop through and find a key's index each time), but I no longer care
|
||||
105
public/react-motion@0.5.2/lib/mergeDiff.js.flow
Normal file
105
public/react-motion@0.5.2/lib/mergeDiff.js.flow
Normal file
@ -0,0 +1,105 @@
|
||||
/* @flow */
|
||||
import type {TransitionStyle} from './Types';
|
||||
|
||||
// core keys merging algorithm. If previous render's keys are [a, b], and the
|
||||
// next render's [c, b, d], what's the final merged keys and ordering?
|
||||
|
||||
// - c and a must both be before b
|
||||
// - b before d
|
||||
// - ordering between a and c ambiguous
|
||||
|
||||
// this reduces to merging two partially ordered lists (e.g. lists where not
|
||||
// every item has a definite ordering, like comparing a and c above). For the
|
||||
// ambiguous ordering we deterministically choose to place the next render's
|
||||
// item after the previous'; so c after a
|
||||
|
||||
// this is called a topological sorting. Except the existing algorithms don't
|
||||
// work well with js bc of the amount of allocation, and isn't optimized for our
|
||||
// current use-case bc the runtime is linear in terms of edges (see wiki for
|
||||
// meaning), which is huge when two lists have many common elements
|
||||
export default function mergeDiff(
|
||||
prev: Array<TransitionStyle>,
|
||||
next: Array<TransitionStyle>,
|
||||
onRemove: (prevIndex: number, prevStyleCell: TransitionStyle) => ?TransitionStyle
|
||||
): Array<TransitionStyle> {
|
||||
// bookkeeping for easier access of a key's index below. This is 2 allocations +
|
||||
// potentially triggering chrome hash map mode for objs (so it might be faster
|
||||
// to loop through and find a key's index each time), but I no longer care
|
||||
let prevKeyIndex: {[key: string]: number} = {};
|
||||
for (let i = 0; i < prev.length; i++) {
|
||||
prevKeyIndex[prev[i].key] = i;
|
||||
}
|
||||
let nextKeyIndex: {[key: string]: number} = {};
|
||||
for (let i = 0; i < next.length; i++) {
|
||||
nextKeyIndex[next[i].key] = i;
|
||||
}
|
||||
|
||||
// first, an overly elaborate way of merging prev and next, eliminating
|
||||
// duplicates (in terms of keys). If there's dupe, keep the item in next).
|
||||
// This way of writing it saves allocations
|
||||
let ret = [];
|
||||
for (let i = 0; i < next.length; i++) {
|
||||
ret[i] = next[i];
|
||||
}
|
||||
for (let i = 0; i < prev.length; i++) {
|
||||
if (!Object.prototype.hasOwnProperty.call(nextKeyIndex, prev[i].key)) {
|
||||
// this is called my TM's `mergeAndSync`, which calls willLeave. We don't
|
||||
// merge in keys that the user desires to kill
|
||||
const fill = onRemove(i, prev[i]);
|
||||
if (fill != null) {
|
||||
ret.push(fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// now all the items all present. Core sorting logic to have the right order
|
||||
return ret.sort((a, b) => {
|
||||
const nextOrderA = nextKeyIndex[a.key];
|
||||
const nextOrderB = nextKeyIndex[b.key];
|
||||
const prevOrderA = prevKeyIndex[a.key];
|
||||
const prevOrderB = prevKeyIndex[b.key];
|
||||
|
||||
if (nextOrderA != null && nextOrderB != null) {
|
||||
// both keys in next
|
||||
return nextKeyIndex[a.key] - nextKeyIndex[b.key];
|
||||
} else if (prevOrderA != null && prevOrderB != null) {
|
||||
// both keys in prev
|
||||
return prevKeyIndex[a.key] - prevKeyIndex[b.key];
|
||||
} else if (nextOrderA != null) {
|
||||
// key a in next, key b in prev
|
||||
|
||||
// how to determine the order between a and b? We find a "pivot" (term
|
||||
// abuse), a key present in both prev and next, that is sandwiched between
|
||||
// a and b. In the context of our above example, if we're comparing a and
|
||||
// d, b's (the only) pivot
|
||||
for (let i = 0; i < next.length; i++) {
|
||||
const pivot = next[i].key;
|
||||
if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (nextOrderA < nextKeyIndex[pivot] && prevOrderB > prevKeyIndex[pivot]) {
|
||||
return -1;
|
||||
} else if (nextOrderA > nextKeyIndex[pivot] && prevOrderB < prevKeyIndex[pivot]) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
// pluggable. default to: next bigger than prev
|
||||
return 1;
|
||||
}
|
||||
// prevOrderA, nextOrderB
|
||||
for (let i = 0; i < next.length; i++) {
|
||||
const pivot = next[i].key;
|
||||
if (!Object.prototype.hasOwnProperty.call(prevKeyIndex, pivot)) {
|
||||
continue;
|
||||
}
|
||||
if (nextOrderB < nextKeyIndex[pivot] && prevOrderA > prevKeyIndex[pivot]) {
|
||||
return 1;
|
||||
} else if (nextOrderB > nextKeyIndex[pivot] && prevOrderA < prevKeyIndex[pivot]) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
// pluggable. default to: next bigger than prev
|
||||
return -1;
|
||||
});
|
||||
}
|
||||
10
public/react-motion@0.5.2/lib/presets.js
Normal file
10
public/react-motion@0.5.2/lib/presets.js
Normal file
@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = {
|
||||
noWobble: { stiffness: 170, damping: 26 }, // the default, if nothing provided
|
||||
gentle: { stiffness: 120, damping: 14 },
|
||||
wobbly: { stiffness: 180, damping: 12 },
|
||||
stiff: { stiffness: 210, damping: 20 }
|
||||
};
|
||||
module.exports = exports["default"];
|
||||
7
public/react-motion@0.5.2/lib/presets.js.flow
Normal file
7
public/react-motion@0.5.2/lib/presets.js.flow
Normal file
@ -0,0 +1,7 @@
|
||||
/* @flow */
|
||||
export default {
|
||||
noWobble: {stiffness: 170, damping: 26}, // the default, if nothing provided
|
||||
gentle: {stiffness: 120, damping: 14},
|
||||
wobbly: {stiffness: 180, damping: 12},
|
||||
stiff: {stiffness: 210, damping: 20},
|
||||
};
|
||||
35
public/react-motion@0.5.2/lib/react-motion.js
vendored
Normal file
35
public/react-motion@0.5.2/lib/react-motion.js
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
function _interopRequire(obj) { return obj && obj.__esModule ? obj['default'] : obj; }
|
||||
|
||||
var _Motion = require('./Motion');
|
||||
|
||||
exports.Motion = _interopRequire(_Motion);
|
||||
|
||||
var _StaggeredMotion = require('./StaggeredMotion');
|
||||
|
||||
exports.StaggeredMotion = _interopRequire(_StaggeredMotion);
|
||||
|
||||
var _TransitionMotion = require('./TransitionMotion');
|
||||
|
||||
exports.TransitionMotion = _interopRequire(_TransitionMotion);
|
||||
|
||||
var _spring = require('./spring');
|
||||
|
||||
exports.spring = _interopRequire(_spring);
|
||||
|
||||
var _presets = require('./presets');
|
||||
|
||||
exports.presets = _interopRequire(_presets);
|
||||
|
||||
var _stripStyle = require('./stripStyle');
|
||||
|
||||
exports.stripStyle = _interopRequire(_stripStyle);
|
||||
|
||||
// deprecated, dummy warning function
|
||||
|
||||
var _reorderKeys = require('./reorderKeys');
|
||||
|
||||
exports.reorderKeys = _interopRequire(_reorderKeys);
|
||||
10
public/react-motion@0.5.2/lib/react-motion.js.flow
Normal file
10
public/react-motion@0.5.2/lib/react-motion.js.flow
Normal file
@ -0,0 +1,10 @@
|
||||
/* @flow */
|
||||
export {default as Motion} from './Motion';
|
||||
export {default as StaggeredMotion} from './StaggeredMotion';
|
||||
export {default as TransitionMotion} from './TransitionMotion';
|
||||
export {default as spring} from './spring';
|
||||
export {default as presets} from './presets';
|
||||
export {default as stripStyle} from './stripStyle';
|
||||
|
||||
// deprecated, dummy warning function
|
||||
export {default as reorderKeys} from './reorderKeys';
|
||||
17
public/react-motion@0.5.2/lib/reorderKeys.js
Normal file
17
public/react-motion@0.5.2/lib/reorderKeys.js
Normal file
@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports['default'] = reorderKeys;
|
||||
|
||||
var hasWarned = false;
|
||||
|
||||
function reorderKeys() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (!hasWarned) {
|
||||
hasWarned = true;
|
||||
console.error('`reorderKeys` has been removed, since it is no longer needed for TransitionMotion\'s new styles array API.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
13
public/react-motion@0.5.2/lib/reorderKeys.js.flow
Normal file
13
public/react-motion@0.5.2/lib/reorderKeys.js.flow
Normal file
@ -0,0 +1,13 @@
|
||||
/* @flow */
|
||||
|
||||
let hasWarned = false;
|
||||
export default function reorderKeys() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (!hasWarned) {
|
||||
hasWarned = true;
|
||||
console.error(
|
||||
'`reorderKeys` has been removed, since it is no longer needed for TransitionMotion\'s new styles array API.'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
31
public/react-motion@0.5.2/lib/shouldStopAnimation.js
Normal file
31
public/react-motion@0.5.2/lib/shouldStopAnimation.js
Normal file
@ -0,0 +1,31 @@
|
||||
|
||||
|
||||
// usage assumption: currentStyle values have already been rendered but it says
|
||||
// nothing of whether currentStyle is stale (see unreadPropStyle)
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports['default'] = shouldStopAnimation;
|
||||
|
||||
function shouldStopAnimation(currentStyle, style, currentVelocity) {
|
||||
for (var key in style) {
|
||||
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (currentVelocity[key] !== 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var styleValue = typeof style[key] === 'number' ? style[key] : style[key].val;
|
||||
// stepper will have already taken care of rounding precision errors, so
|
||||
// won't have such thing as 0.9999 !=== 1
|
||||
if (currentStyle[key] !== styleValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
31
public/react-motion@0.5.2/lib/shouldStopAnimation.js.flow
Normal file
31
public/react-motion@0.5.2/lib/shouldStopAnimation.js.flow
Normal file
@ -0,0 +1,31 @@
|
||||
/* @flow */
|
||||
import type {PlainStyle, Style, Velocity} from './Types';
|
||||
|
||||
// usage assumption: currentStyle values have already been rendered but it says
|
||||
// nothing of whether currentStyle is stale (see unreadPropStyle)
|
||||
export default function shouldStopAnimation(
|
||||
currentStyle: PlainStyle,
|
||||
style: Style,
|
||||
currentVelocity: Velocity,
|
||||
): boolean {
|
||||
for (let key in style) {
|
||||
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (currentVelocity[key] !== 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const styleValue = typeof style[key] === 'number'
|
||||
? style[key]
|
||||
: style[key].val;
|
||||
// stepper will have already taken care of rounding precision errors, so
|
||||
// won't have such thing as 0.9999 !=== 1
|
||||
if (currentStyle[key] !== styleValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
23
public/react-motion@0.5.2/lib/spring.js
Normal file
23
public/react-motion@0.5.2/lib/spring.js
Normal file
@ -0,0 +1,23 @@
|
||||
'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; };
|
||||
|
||||
exports['default'] = spring;
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
var _presets = require('./presets');
|
||||
|
||||
var _presets2 = _interopRequireDefault(_presets);
|
||||
|
||||
var defaultConfig = _extends({}, _presets2['default'].noWobble, {
|
||||
precision: 0.01
|
||||
});
|
||||
|
||||
function spring(val, config) {
|
||||
return _extends({}, defaultConfig, config, { val: val });
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
12
public/react-motion@0.5.2/lib/spring.js.flow
Normal file
12
public/react-motion@0.5.2/lib/spring.js.flow
Normal file
@ -0,0 +1,12 @@
|
||||
/* @flow */
|
||||
import presets from './presets';
|
||||
import type {OpaqueConfig, SpringHelperConfig} from './Types';
|
||||
|
||||
const defaultConfig = {
|
||||
...presets.noWobble,
|
||||
precision: 0.01,
|
||||
};
|
||||
|
||||
export default function spring(val: number, config?: SpringHelperConfig): OpaqueConfig {
|
||||
return {...defaultConfig, ...config, val};
|
||||
}
|
||||
43
public/react-motion@0.5.2/lib/stepper.js
Normal file
43
public/react-motion@0.5.2/lib/stepper.js
Normal file
@ -0,0 +1,43 @@
|
||||
|
||||
|
||||
// stepper is used a lot. Saves allocation to return the same array wrapper.
|
||||
// This is fine and danger-free against mutations because the callsite
|
||||
// immediately destructures it and gets the numbers inside without passing the
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports["default"] = stepper;
|
||||
|
||||
var reusedTuple = [0, 0];
|
||||
|
||||
function stepper(secondPerFrame, x, v, destX, k, b, precision) {
|
||||
// Spring stiffness, in kg / s^2
|
||||
|
||||
// for animations, destX is really spring length (spring at rest). initial
|
||||
// position is considered as the stretched/compressed position of a spring
|
||||
var Fspring = -k * (x - destX);
|
||||
|
||||
// Damping, in kg / s
|
||||
var Fdamper = -b * v;
|
||||
|
||||
// usually we put mass here, but for animation purposes, specifying mass is a
|
||||
// bit redundant. you could simply adjust k and b accordingly
|
||||
// let a = (Fspring + Fdamper) / mass;
|
||||
var a = Fspring + Fdamper;
|
||||
|
||||
var newV = v + a * secondPerFrame;
|
||||
var newX = x + newV * secondPerFrame;
|
||||
|
||||
if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
|
||||
reusedTuple[0] = destX;
|
||||
reusedTuple[1] = 0;
|
||||
return reusedTuple;
|
||||
}
|
||||
|
||||
reusedTuple[0] = newX;
|
||||
reusedTuple[1] = newV;
|
||||
return reusedTuple;
|
||||
}
|
||||
|
||||
module.exports = exports["default"];
|
||||
// array reference around.
|
||||
42
public/react-motion@0.5.2/lib/stepper.js.flow
Normal file
42
public/react-motion@0.5.2/lib/stepper.js.flow
Normal file
@ -0,0 +1,42 @@
|
||||
/* @flow */
|
||||
|
||||
// stepper is used a lot. Saves allocation to return the same array wrapper.
|
||||
// This is fine and danger-free against mutations because the callsite
|
||||
// immediately destructures it and gets the numbers inside without passing the
|
||||
// array reference around.
|
||||
let reusedTuple: [number, number] = [0, 0];
|
||||
export default function stepper(
|
||||
secondPerFrame: number,
|
||||
x: number,
|
||||
v: number,
|
||||
destX: number,
|
||||
k: number,
|
||||
b: number,
|
||||
precision: number): [number, number] {
|
||||
// Spring stiffness, in kg / s^2
|
||||
|
||||
// for animations, destX is really spring length (spring at rest). initial
|
||||
// position is considered as the stretched/compressed position of a spring
|
||||
const Fspring = -k * (x - destX);
|
||||
|
||||
// Damping, in kg / s
|
||||
const Fdamper = -b * v;
|
||||
|
||||
// usually we put mass here, but for animation purposes, specifying mass is a
|
||||
// bit redundant. you could simply adjust k and b accordingly
|
||||
// let a = (Fspring + Fdamper) / mass;
|
||||
const a = Fspring + Fdamper;
|
||||
|
||||
const newV = v + a * secondPerFrame;
|
||||
const newX = x + newV * secondPerFrame;
|
||||
|
||||
if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
|
||||
reusedTuple[0] = destX;
|
||||
reusedTuple[1] = 0;
|
||||
return reusedTuple;
|
||||
}
|
||||
|
||||
reusedTuple[0] = newX;
|
||||
reusedTuple[1] = newV;
|
||||
return reusedTuple;
|
||||
}
|
||||
21
public/react-motion@0.5.2/lib/stripStyle.js
Normal file
21
public/react-motion@0.5.2/lib/stripStyle.js
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
// turn {x: {val: 1, stiffness: 1, damping: 2}, y: 2} generated by
|
||||
// `{x: spring(1, {stiffness: 1, damping: 2}), y: 2}` into {x: 1, y: 2}
|
||||
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
exports['default'] = stripStyle;
|
||||
|
||||
function stripStyle(style) {
|
||||
var ret = {};
|
||||
for (var key in style) {
|
||||
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
||||
continue;
|
||||
}
|
||||
ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
module.exports = exports['default'];
|
||||
16
public/react-motion@0.5.2/lib/stripStyle.js.flow
Normal file
16
public/react-motion@0.5.2/lib/stripStyle.js.flow
Normal file
@ -0,0 +1,16 @@
|
||||
/* @flow */
|
||||
// turn {x: {val: 1, stiffness: 1, damping: 2}, y: 2} generated by
|
||||
// `{x: spring(1, {stiffness: 1, damping: 2}), y: 2}` into {x: 1, y: 2}
|
||||
|
||||
import type {Style, PlainStyle} from './Types';
|
||||
|
||||
export default function stripStyle(style: Style): PlainStyle {
|
||||
let ret = {};
|
||||
for (const key in style) {
|
||||
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
||||
continue;
|
||||
}
|
||||
ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
Reference in New Issue
Block a user