Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert D44315336: Modify AnimatedProps and AnimatedStyle to use AnimatedObject

Browse Source 
Differential Revision:
D44315336

Original commit changeset: 4d543550f24a

Original Phabricator Diff: D44315336

fbshipit-source-id: 7a383ef3b42cbcf3d3db87fef5ebf3120ef47c38
This commit is contained in:
Genki Kondo
2023-03-31 16:11:03 -07:00
committed by Facebook GitHub Bot
parent d2d2a8a598
commit bee4ac85ae
4 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Animated/__tests__/Animated-test.js
Vendored
+1 -2
View File
@@ -78,8 +78,7 @@ describe('Animated tests', () => {
node.__attach();
// Children: [AnimatedStyle, AnimatedTransform, AnimatedInterpolation, AnimatedObject, AnimatedObject]
expect(anim.__getChildren().length).toBe(5);
expect(anim.__getChildren().length).toBe(3);
anim.setValue(0.5);
packages/react-native/Libraries/Animated/__tests__/Animated-web-test.js
Vendored
+1 -2
View File
@@ -84,8 +84,7 @@ describe('Animated tests', () => {
node.__attach();
// Children: [AnimatedStyle, AnimatedTransform, AnimatedInterpolation, AnimatedObject, AnimatedObject]
expect(anim.__getChildren().length).toBe(5);
expect(anim.__getChildren().length).toBe(3);
anim.setValue(0.5);
packages/react-native/Libraries/Animated/nodes/AnimatedProps.js
Vendored
+7 -19
View File
@@ -16,27 +16,9 @@ import {findNodeHandle} from '../../ReactNative/RendererProxy';
import {AnimatedEvent} from '../AnimatedEvent';
import NativeAnimatedHelper from '../NativeAnimatedHelper';
import AnimatedNode from './AnimatedNode';
import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
import AnimatedStyle from './AnimatedStyle';
import invariant from 'invariant';
function createAnimatedProps(inputProps: Object): Object {
const props: Object = {};
for (const key in inputProps) {
const value = inputProps[key];
if (key === 'style') {
props[key] = new AnimatedStyle(value);
} else if (value instanceof AnimatedNode) {
props[key] = value;
} else if (key !== 'children' && hasAnimatedNode(value)) {
props[key] = new AnimatedObject(value);
} else {
props[key] = value;
}
}
return props;
}
export default class AnimatedProps extends AnimatedNode {
_props: Object;
_animatedView: any;
@@ -44,7 +26,13 @@ export default class AnimatedProps extends AnimatedNode {
constructor(props: Object, callback: () => void) {
super();
this._props = createAnimatedProps(props);
if (props.style) {
props = {
...props,
style: new AnimatedStyle(props.style),
};
}
this._props = props;
this._callback = callback;
}
packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
Vendored
+58 -28
View File
@@ -16,14 +16,10 @@ import flattenStyle from '../../StyleSheet/flattenStyle';
import Platform from '../../Utilities/Platform';
import NativeAnimatedHelper from '../NativeAnimatedHelper';
import AnimatedNode from './AnimatedNode';
import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
import AnimatedTransform from './AnimatedTransform';
import AnimatedWithChildren from './AnimatedWithChildren';
function createAnimatedStyle(
inputStyle: any,
keepUnanimatedValues: boolean,
): Object {
function createAnimatedStyle(inputStyle: any): Object {
// $FlowFixMe[underconstrained-implicit-instantiation]
const style = flattenStyle(inputStyle);
const animatedStyles: any = {};
@@ -33,48 +29,82 @@ function createAnimatedStyle(
animatedStyles[key] = new AnimatedTransform(value);
} else if (value instanceof AnimatedNode) {
animatedStyles[key] = value;
} else if (hasAnimatedNode(value)) {
animatedStyles[key] = new AnimatedObject(value);
} else if (keepUnanimatedValues) {
animatedStyles[key] = value;
} else if (value && !Array.isArray(value) && typeof value === 'object') {
animatedStyles[key] = createAnimatedStyle(value);
}
}
return animatedStyles;
}
function createStyleWithAnimatedTransform(inputStyle: any): Object {
// $FlowFixMe[underconstrained-implicit-instantiation]
let style = flattenStyle(inputStyle) || ({}: {[string]: any});
if (style.transform) {
style = {
...style,
transform: new AnimatedTransform(style.transform),
};
}
return style;
}
export default class AnimatedStyle extends AnimatedWithChildren {
_inputStyle: any;
_style: Object;
constructor(style: any) {
super();
this._inputStyle = style;
this._style = createAnimatedStyle(style, Platform.OS !== 'web');
if (Platform.OS === 'web') {
this._inputStyle = style;
this._style = createAnimatedStyle(style);
} else {
this._style = createStyleWithAnimatedTransform(style);
}
}
// Recursively get values for nested styles (like iOS's shadowOffset)
_walkStyleAndGetValues(style: any): {[string]: any | {...}} {
const updatedStyle: {[string]: any | {...}} = {};
for (const key in style) {
const value = style[key];
if (value instanceof AnimatedNode) {
updatedStyle[key] = value.__getValue();
} else if (value && !Array.isArray(value) && typeof value === 'object') {
// Support animating nested values (for example: shadowOffset.height)
updatedStyle[key] = this._walkStyleAndGetValues(value);
} else {
updatedStyle[key] = value;
}
}
return updatedStyle;
}
__getValue(): Object | Array<Object> {
const result: {[string]: any} = {};
for (const key in this._style) {
const value = this._style[key];
if (value instanceof AnimatedNode) {
result[key] = value.__getValue();
} else {
result[key] = value;
}
if (Platform.OS === 'web') {
return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
}
return Platform.OS === 'web' ? [this._inputStyle, result] : result;
return this._walkStyleAndGetValues(this._style);
}
// Recursively get animated values for nested styles (like iOS's shadowOffset)
_walkStyleAndGetAnimatedValues(style: any): {[string]: any | {...}} {
const updatedStyle: {[string]: any | {...}} = {};
for (const key in style) {
const value = style[key];
if (value instanceof AnimatedNode) {
updatedStyle[key] = value.__getAnimatedValue();
} else if (value && !Array.isArray(value) && typeof value === 'object') {
// Support animating nested values (for example: shadowOffset.height)
updatedStyle[key] = this._walkStyleAndGetAnimatedValues(value);
}
}
return updatedStyle;
}
__getAnimatedValue(): Object {
const result: {[string]: any} = {};
for (const key in this._style) {
const value = this._style[key];
if (value instanceof AnimatedNode) {
result[key] = value.__getAnimatedValue();
}
}
return result;
return this._walkStyleAndGetAnimatedValues(this._style);
}
__attach(): void {