From 6f17dba39b447a540491ce7f8e6256a59ea2d4c5 Mon Sep 17 00:00:00 2001 From: Eric Vicenti Date: Thu, 20 Aug 2015 21:18:05 -0700 Subject: [PATCH] [ReactNative] Remove POPAnimation Summary: Thanks to @vjeux' work on Animated, we have transitioned away from POPAnimation entirely --- .../{Animation => }/Animated/Animated.js | 0 Libraries/{Animation => }/Animated/Easing.js | 0 .../{Animation => }/Animated/Interpolation.js | 0 .../{Animation => }/Animated/SpringConfig.js | 0 .../Animated/__tests__/Animated-test.js | 0 .../Animated/__tests__/Easing-test.js | 0 .../Animated/__tests__/Interpolation-test.js | 0 .../{Animation => }/Animated/package.json | 0 Libraries/Animation/POPAnimationMixin.js | 268 ------------------ .../BatchedBridgedModules/POPAnimation.js | 187 ------------ .../LayoutAnimation.js | 0 Libraries/ReactIOS/NativeMethodsMixin.js | 25 -- 12 files changed, 480 deletions(-) rename Libraries/{Animation => }/Animated/Animated.js (100%) rename Libraries/{Animation => }/Animated/Easing.js (100%) rename Libraries/{Animation => }/Animated/Interpolation.js (100%) rename Libraries/{Animation => }/Animated/SpringConfig.js (100%) rename Libraries/{Animation => }/Animated/__tests__/Animated-test.js (100%) rename Libraries/{Animation => }/Animated/__tests__/Easing-test.js (100%) rename Libraries/{Animation => }/Animated/__tests__/Interpolation-test.js (100%) rename Libraries/{Animation => }/Animated/package.json (100%) delete mode 100644 Libraries/Animation/POPAnimationMixin.js delete mode 100644 Libraries/BatchedBridge/BatchedBridgedModules/POPAnimation.js rename Libraries/{Animation => LayoutAnimation}/LayoutAnimation.js (100%) diff --git a/Libraries/Animation/Animated/Animated.js b/Libraries/Animated/Animated.js similarity index 100% rename from Libraries/Animation/Animated/Animated.js rename to Libraries/Animated/Animated.js diff --git a/Libraries/Animation/Animated/Easing.js b/Libraries/Animated/Easing.js similarity index 100% rename from Libraries/Animation/Animated/Easing.js rename to Libraries/Animated/Easing.js diff --git a/Libraries/Animation/Animated/Interpolation.js b/Libraries/Animated/Interpolation.js similarity index 100% rename from Libraries/Animation/Animated/Interpolation.js rename to Libraries/Animated/Interpolation.js diff --git a/Libraries/Animation/Animated/SpringConfig.js b/Libraries/Animated/SpringConfig.js similarity index 100% rename from Libraries/Animation/Animated/SpringConfig.js rename to Libraries/Animated/SpringConfig.js diff --git a/Libraries/Animation/Animated/__tests__/Animated-test.js b/Libraries/Animated/__tests__/Animated-test.js similarity index 100% rename from Libraries/Animation/Animated/__tests__/Animated-test.js rename to Libraries/Animated/__tests__/Animated-test.js diff --git a/Libraries/Animation/Animated/__tests__/Easing-test.js b/Libraries/Animated/__tests__/Easing-test.js similarity index 100% rename from Libraries/Animation/Animated/__tests__/Easing-test.js rename to Libraries/Animated/__tests__/Easing-test.js diff --git a/Libraries/Animation/Animated/__tests__/Interpolation-test.js b/Libraries/Animated/__tests__/Interpolation-test.js similarity index 100% rename from Libraries/Animation/Animated/__tests__/Interpolation-test.js rename to Libraries/Animated/__tests__/Interpolation-test.js diff --git a/Libraries/Animation/Animated/package.json b/Libraries/Animated/package.json similarity index 100% rename from Libraries/Animation/Animated/package.json rename to Libraries/Animated/package.json diff --git a/Libraries/Animation/POPAnimationMixin.js b/Libraries/Animation/POPAnimationMixin.js deleted file mode 100644 index 0e109062cdf..00000000000 --- a/Libraries/Animation/POPAnimationMixin.js +++ /dev/null @@ -1,268 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @providesModule POPAnimationMixin - * @flow - */ -'use strict'; - -var POPAnimationOrNull = require('POPAnimation'); -var React = require('React'); - -if (!POPAnimationOrNull) { - // POP animation isn't available in the OSS fork - this is a temporary - // workaround to enable its availability to be determined at runtime. - module.exports = (null : ?{}); -} else { - -// At this point, POPAnimationOrNull is guaranteed to be -// non-null. Bring it local to preserve type refinement. -var POPAnimation = POPAnimationOrNull; - -var invariant = require('invariant'); -var warning = require('warning'); - -var POPAnimationMixin = { - /** - * Different ways to interpolate between beginning and end states - * of properties during animation, such as spring, linear, and decay. - */ - AnimationTypes: POPAnimation.Types, - AnimationProperties: POPAnimation.Properties, - - getInitialState: function(): Object { - this._popAnimationEnqueuedAnimationTimeouts = []; - return { - _currentAnimationsByNodeHandle: {}, - }; - }, - - _ensureBookkeepingSetup: function(nodeHandle: any) { - if (!this.state._currentAnimationsByNodeHandle[nodeHandle]) { - this.state._currentAnimationsByNodeHandle[nodeHandle] = []; - } - }, - - /** - * Start animating the View with ref `refKey`. - * - * @param {key} refKey The key to reference the View to be animated. - * - * @param {number|Object} anim Either the identifier returned by - * POPAnimation.create* or an object defining all the necessary - * properties of the animation you wish to start (including type, matching - * an entry in AnimationTypes). - * - * @param {func} doneCallback A callback fired when the animation is done, and - * is passed a `finished` param that indicates whether the animation - * completely finished, or was interrupted. - */ - startAnimation: function( - refKey: string, - anim: number | {type: number; property: number;}, - doneCallback: (finished: bool) => void - ) { - var animID: number = 0; - if (typeof anim === 'number') { - animID = anim; - } else { - invariant( - anim instanceof Object && - anim.type !== undefined && - anim.property !== undefined, - 'Animation definitions must specify a type of animation and a ' + - 'property to animate.' - ); - animID = POPAnimation.createAnimation(anim.type, anim); - } - invariant( - this.refs[refKey], - 'Invalid refKey ' + refKey + ' for anim:\n' + JSON.stringify(anim) + - '\nvalid refs: ' + JSON.stringify(Object.keys(this.refs)) - ); - var refNodeHandle = React.findNodeHandle(this.refs[refKey]); - this.startAnimationWithNodeHandle(refNodeHandle, animID, doneCallback); - }, - - /** - * Starts an animation on a native node. - * - * @param {NodeHandle} nodeHandle Handle to underlying native node. - * @see `startAnimation`. - */ - startAnimationWithNodeHandle: function( - nodeHandle: any, - animID: number, - doneCallback: (finished: bool) => void - ) { - this._ensureBookkeepingSetup(nodeHandle); - var animations = this.state._currentAnimationsByNodeHandle[nodeHandle]; - var animIndex = animations.length; - animations.push(animID); - var cleanupWrapper = (finished) => { - if (!this.isMounted()) { - return; - } - animations[animIndex] = 0; // zero it out so we don't try to stop it - var allDone = true; - for (var ii = 0; ii < animations.length; ii++) { - if (animations[ii]) { - allDone = false; - break; - } - } - if (allDone) { - this.state._currentAnimationsByNodeHandle[nodeHandle] = undefined; - } - doneCallback && doneCallback(finished); - }; - // Hack to aviod race condition in POP: - var animationTimeoutHandler = setTimeout(() => { - POPAnimation.addAnimation(nodeHandle, animID, cleanupWrapper); - }, 1); - this._popAnimationEnqueuedAnimationTimeouts.push(animationTimeoutHandler); - }, - - /** - * Starts multiple animations with one shared callback that is called when all - * animations complete. - * - * @param {Array(Object} animations Array of objects defining all the - * animations to start, each with shape `{ref|nodeHandle, anim}`. - * @param {func} onSuccess A callback fired when all animations have returned, - * and is passed a finished arg that is true if all animations finished - * completely. - * @param {func} onFailure Not supported yet. - */ - startAnimations: function( - animations: Array, - onSuccess: (finished: boolean) => void, - onFailure: () => void - ) { - var numReturned = 0; - var numFinished = 0; - var numAnimations = animations.length; - var metaCallback = (finished) => { - if (finished) { - ++numFinished; - } - if (++numReturned === numAnimations) { - onSuccess && onSuccess(numFinished === numAnimations); - } - }; - animations.forEach((anim) => { - warning( - anim.ref != null || anim.nodeHandle != null && - !anim.ref !== !anim.nodeHandle, - 'Animations must be specified with either ref xor nodeHandle' - ); - if (anim.ref) { - this.startAnimation(anim.ref, anim.anim, metaCallback); - } else if (anim.nodeHandle) { - this.startAnimationWithNodeHandle(anim.nodeHandle, anim.anim, metaCallback); - } - }); - }, - - /** - * Stop any and all animations operating on the View with native node handle - * `nodeHandle`. - * - * @param {NodeHandle} component The instance to stop animations - * on. Do not pass a composite component. - */ - stopNodeHandleAnimations: function(nodeHandle: any) { - if (!this.state._currentAnimationsByNodeHandle[nodeHandle]) { - return; - } - var anims = this.state._currentAnimationsByNodeHandle[nodeHandle]; - for (var i = 0; i < anims.length; i++) { - var anim = anims[i]; - if (anim) { - // Note: Converting the string key to a number `nodeHandle`. - POPAnimation.removeAnimation(+nodeHandle, anim); - } - } - this.state._currentAnimationsByNodeHandle[nodeHandle] = undefined; - }, - - /** - * Stop any and all animations operating on the View with ref `refKey`. - * - * @param {key} refKey The key to reference the View to be animated. - */ - stopAnimations: function(refKey: string) { - invariant(this.refs[refKey], 'invalid ref'); - this.stopNodeHandleAnimations(React.findNodeHandle(this.refs[refKey])); - }, - - /** - * Stop any and all animations created by this component on itself and - * subviews. - */ - stopAllAnimations: function() { - for (var nodeHandle in this.state._currentAnimationsByNodeHandle) { - this.stopNodeHandleAnimations(nodeHandle); - } - }, - - /** - * Animates size and position of a view referenced by `refKey` to a specific - * frame. - * - * @param {key} refKey ref key for view to animate. - * @param {Object} frame The frame to animate the view to, specified as {left, - * top, width, height}. - * @param {const} type What type of interpolation to use, selected from - * `inperpolationTypes`. - * @param {Object} event Event encapsulating synthetic and native data that - * may have triggered this animation. Velocity is extracted from it if - * possible and applied to the animation. - * @param {func} doneCallback A callback fired when the animation is done, and - * is passed a `finished` param that indicates whether the animation - * completely finished, or was interrupted. - */ - animateToFrame: function( - refKey: string, - frame: {left: number; top: number; width: number; height: number;}, - type: number, - velocity: number, - doneCallback: (finished: boolean) => void - ) { - var animFrame = { // Animations use a centered coordinate system. - x: frame.left + frame.width / 2, - y: frame.top + frame.height / 2, - w: frame.width, - h: frame.height - }; - var posAnim = POPAnimation.createAnimation(type, { - property: POPAnimation.Properties.position, - toValue: [animFrame.x, animFrame.y], - velocity: velocity || [0, 0], - }); - var sizeAnim = POPAnimation.createAnimation(type, { - property: POPAnimation.Properties.size, - toValue: [animFrame.w, animFrame.h] - }); - this.startAnimation(refKey, posAnim, doneCallback); - this.startAnimation(refKey, sizeAnim); - }, - - // Cleanup any potentially leaked animations. - componentWillUnmount: function() { - this.stopAllAnimations(); - this._popAnimationEnqueuedAnimationTimeouts.forEach(animationTimeoutHandler => { - clearTimeout(animationTimeoutHandler); - }); - this._popAnimationEnqueuedAnimationTimeouts = []; - } -}; - -module.exports = POPAnimationMixin; - -} diff --git a/Libraries/BatchedBridge/BatchedBridgedModules/POPAnimation.js b/Libraries/BatchedBridge/BatchedBridgedModules/POPAnimation.js deleted file mode 100644 index c8e28943129..00000000000 --- a/Libraries/BatchedBridge/BatchedBridgedModules/POPAnimation.js +++ /dev/null @@ -1,187 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @providesModule POPAnimation - */ -'use strict'; - -var RCTPOPAnimationManager = require('NativeModules').POPAnimationManager; -if (!RCTPOPAnimationManager) { - // POP animation isn't available in the OSS fork - this is a temporary - // workaround to enable its availability to be determined at runtime. - // For Flow let's pretend like we always export POPAnimation - // so all our users don't need to do null checks - module.exports = null; -} else { - -var ReactPropTypes = require('ReactPropTypes'); -var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker'); -var getObjectValues = require('getObjectValues'); -var invariant = require('invariant'); -var merge = require('merge'); - -var RCTTypes = RCTPOPAnimationManager.Types; -var RCTProperties = RCTPOPAnimationManager.Properties; - -var Properties = { - bounds: RCTProperties.bounds, - opacity: RCTProperties.opacity, - position: RCTProperties.position, - positionX: RCTProperties.positionX, - positionY: RCTProperties.positionY, - zPosition: RCTProperties.zPosition, - rotation: RCTProperties.rotation, - rotationX: RCTProperties.rotationX, - rotationY: RCTProperties.rotationY, - scaleX: RCTProperties.scaleX, - scaleXY: RCTProperties.scaleXY, - scaleY: RCTProperties.scaleY, - shadowColor: RCTProperties.shadowColor, - shadowOffset: RCTProperties.shadowOffset, - shadowOpacity: RCTProperties.shadowOpacity, - shadowRadius: RCTProperties.shadowRadius, - size: RCTProperties.size, - subscaleXY: RCTProperties.subscaleXY, - subtranslationX: RCTProperties.subtranslationX, - subtranslationXY: RCTProperties.subtranslationXY, - subtranslationY: RCTProperties.subtranslationY, - subtranslationZ: RCTProperties.subtranslationZ, - translationX: RCTProperties.translationX, - translationXY: RCTProperties.translationXY, - translationY: RCTProperties.translationY, - translationZ: RCTProperties.translationZ, -}; - -var Types = { - decay: RCTTypes.decay, - easeIn: RCTTypes.easeIn, - easeInEaseOut: RCTTypes.easeInEaseOut, - easeOut: RCTTypes.easeOut, - linear: RCTTypes.linear, - spring: RCTTypes.spring, -}; - -type Attrs = { - type?: $Enum; - property?: $Enum; - fromValue?: any; - toValue?: any; - duration?: any; - velocity?: any; - deceleration?: any; - springBounciness?: any; - dynamicsFriction?: any; - dynamicsMass?: any; - dynamicsTension?: any; -} - -var POPAnimation = { - Types: Types, - Properties: Properties, - - attributeChecker: createStrictShapeTypeChecker({ - type: ReactPropTypes.oneOf(getObjectValues(Types)), - property: ReactPropTypes.oneOf(getObjectValues(Properties)), - fromValue: ReactPropTypes.any, - toValue: ReactPropTypes.any, - duration: ReactPropTypes.any, - velocity: ReactPropTypes.any, - deceleration: ReactPropTypes.any, - springBounciness: ReactPropTypes.any, - dynamicsFriction: ReactPropTypes.any, - dynamicsMass: ReactPropTypes.any, - dynamicsTension: ReactPropTypes.any, - }), - - lastUsedTag: 0, - allocateTagForAnimation: function(): number { - return ++this.lastUsedTag; - }, - - createAnimation: function(typeName: number, attrs: Attrs): number { - var tag = this.allocateTagForAnimation(); - - if (__DEV__) { - POPAnimation.attributeChecker( - {attrs}, - 'attrs', - 'POPAnimation.createAnimation' - ); - POPAnimation.attributeChecker( - {attrs: {type: typeName}}, - 'attrs', - 'POPAnimation.createAnimation' - ); - } - - RCTPOPAnimationManager.createAnimationInternal(tag, typeName, attrs); - return tag; - }, - - createSpringAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.spring, attrs); - }, - - createDecayAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.decay, attrs); - }, - - createLinearAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.linear, attrs); - }, - - createEaseInAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.easeIn, attrs); - }, - - createEaseOutAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.easeOut, attrs); - }, - - createEaseInEaseOutAnimation: function(attrs: Attrs): number { - return this.createAnimation(this.Types.easeInEaseOut, attrs); - }, - - addAnimation: function(nodeHandle: any, anim: number, callback: Function) { - RCTPOPAnimationManager.addAnimation(nodeHandle, anim, callback); - }, - - removeAnimation: function(nodeHandle: any, anim: number) { - RCTPOPAnimationManager.removeAnimation(nodeHandle, anim); - }, -}; - -// Make sure that we correctly propagate RCTPOPAnimationManager constants -// to POPAnimation -if (__DEV__) { - var allProperties = merge( - RCTPOPAnimationManager.Properties, - RCTPOPAnimationManager.Properties - ); - for (var key in allProperties) { - invariant( - POPAnimation.Properties[key] === RCTPOPAnimationManager.Properties[key], - 'POPAnimation doesn\'t copy property ' + key + ' correctly' - ); - } - - var allTypes = merge( - RCTPOPAnimationManager.Types, - RCTPOPAnimationManager.Types - ); - for (var key in allTypes) { - invariant( - POPAnimation.Types[key] === RCTPOPAnimationManager.Types[key], - 'POPAnimation doesn\'t copy type ' + key + ' correctly' - ); - } -} - -module.exports = POPAnimation; - -} diff --git a/Libraries/Animation/LayoutAnimation.js b/Libraries/LayoutAnimation/LayoutAnimation.js similarity index 100% rename from Libraries/Animation/LayoutAnimation.js rename to Libraries/LayoutAnimation/LayoutAnimation.js diff --git a/Libraries/ReactIOS/NativeMethodsMixin.js b/Libraries/ReactIOS/NativeMethodsMixin.js index e31b0e43a85..7a448ce40bf 100644 --- a/Libraries/ReactIOS/NativeMethodsMixin.js +++ b/Libraries/ReactIOS/NativeMethodsMixin.js @@ -12,7 +12,6 @@ 'use strict'; var NativeModules = require('NativeModules'); -var RCTPOPAnimationManager = NativeModules.POPAnimationManager; var RCTUIManager = NativeModules.UIManager; var TextInputState = require('TextInputState'); @@ -38,32 +37,8 @@ type MeasureLayoutOnSuccessCallback = ( height: number ) => void -var animationIDInvariant = function( - funcName: string, - anim: number -) { - invariant( - anim, - funcName + ' must be called with a valid animation ID returned from' + - ' POPAnimation.createAnimation, received: "' + anim + '"' - ); -}; var NativeMethodsMixin = { - addAnimation: function(anim: number, callback?: (finished: bool) => void) { - animationIDInvariant('addAnimation', anim); - RCTPOPAnimationManager.addAnimation( - findNodeHandle(this), - anim, - mountSafeCallback(this, callback) - ); - }, - - removeAnimation: function(anim: number) { - animationIDInvariant('removeAnimation', anim); - RCTPOPAnimationManager.removeAnimation(findNodeHandle(this), anim); - }, - measure: function(callback: MeasureOnSuccessCallback) { RCTUIManager.measure( findNodeHandle(this),