Animated: Cleanup Types in AnimatedTransform

Summary: Cleans up the Flow types in `AnimatedTransform`. Changelog: [Internal] Differential Revision: D62054390
facebook · Aug 30, 2024 · 0853fcc · 0853fcc
1 parent f00e8ba
commit 0853fcc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 41 deletions.
diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedTransform.js b/packages/react-native/Libraries/Animated/nodes/AnimatedTransform.js
@@ -16,10 +16,19 @@ import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
+type Transform<T = AnimatedNode> = {
+  [string]:
+    | number
+    | string
+    | T
+    | $ReadOnlyArray<number | string | T>
+    | {[string]: number | string | T},
+};
+
 export default class AnimatedTransform extends AnimatedWithChildren {
-  _transforms: $ReadOnlyArray<Object>;
+  _transforms: $ReadOnlyArray<Transform<>>;
 
-  constructor(transforms: $ReadOnlyArray<Object>) {
+  constructor(transforms: $ReadOnlyArray<Transform<>>) {
     super();
     this._transforms = transforms;
   }
@@ -36,12 +45,16 @@ export default class AnimatedTransform extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 
-  __getValue(): $ReadOnlyArray<Object> {
-    return this._get(animatedNode => animatedNode.__getValue());
+  __getValue(): $ReadOnlyArray<Transform<any>> {
+    return mapTransforms(this._transforms, animatedNode =>
+      animatedNode.__getValue(),
+    );
   }
 
-  __getAnimatedValue(): $ReadOnlyArray<Object> {
-    return this._get(animatedNode => animatedNode.__getAnimatedValue());
+  __getAnimatedValue(): $ReadOnlyArray<Transform<any>> {
+    return mapTransforms(this._transforms, animatedNode =>
+      animatedNode.__getAnimatedValue(),
+    );
   }
 
   __attach(): void {
@@ -83,6 +96,9 @@ export default class AnimatedTransform extends AnimatedWithChildren {
           transConfigs.push({
             type: 'static',
             property: key,
+            /* $FlowFixMe[incompatible-call] - `value` can be an array or an
+               object. This is not currently handled by `transformDataType`.
+               Migrating to `TransformObject` might solve this. */
             value: NativeAnimatedHelper.transformDataType(value),
           });
         }
@@ -95,36 +111,36 @@ export default class AnimatedTransform extends AnimatedWithChildren {
       transforms: transConfigs,
     };
   }
+}
 
-  _get(getter: AnimatedNode => any): $ReadOnlyArray<Object> {
-    return this._transforms.map(transform => {
-      const result: {[string]: any} = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = getter(value);
-        } else if (Array.isArray(value)) {
-          result[key] = value.map(element => {
-            if (element instanceof AnimatedNode) {
-              return getter(element);
-            } else {
-              return element;
-            }
-          });
-        } else if (typeof value === 'object') {
-          result[key] = {};
-          for (const [nestedKey, nestedValue] of Object.entries(value)) {
-            if (nestedValue instanceof AnimatedNode) {
-              result[key][nestedKey] = getter(nestedValue);
-            } else {
-              result[key][nestedKey] = nestedValue;
-            }
-          }
-        } else {
-          result[key] = value;
+function mapTransforms<T>(
+  transforms: $ReadOnlyArray<Transform<>>,
+  mapFunction: AnimatedNode => T,
+): $ReadOnlyArray<Transform<T>> {
+  return transforms.map(transform => {
+    const result: Transform<T> = {};
+    for (const key in transform) {
+      const value = transform[key];
+      if (value instanceof AnimatedNode) {
+        result[key] = mapFunction(value);
+      } else if (Array.isArray(value)) {
+        result[key] = value.map(element =>
+          element instanceof AnimatedNode ? mapFunction(element) : element,
+        );
+      } else if (typeof value === 'object') {
+        const object: {[string]: number | string | T} = {};
+        for (const propertyName in value) {
+          const propertyValue = value[propertyName];
+          object[propertyName] =
+            propertyValue instanceof AnimatedNode
+              ? mapFunction(propertyValue)
+              : propertyValue;
         }
+        result[key] = object;
+      } else {
+        result[key] = value;
       }
-      return result;
-    });
-  }
+    }
+    return result;
+  });
 }
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1118,16 +1118,23 @@ exports[`public API should not change unintentionally Libraries/Animated/nodes/A
 `;
 
 exports[`public API should not change unintentionally Libraries/Animated/nodes/AnimatedTransform.js 1`] = `
-"declare export default class AnimatedTransform extends AnimatedWithChildren {
-  _transforms: $ReadOnlyArray<Object>;
-  constructor(transforms: $ReadOnlyArray<Object>): void;
+"type Transform<T = AnimatedNode> = {
+  [string]:
+    | number
+    | string
+    | T
+    | $ReadOnlyArray<number | string | T>
+    | { [string]: number | string | T },
+};
+declare export default class AnimatedTransform extends AnimatedWithChildren {
+  _transforms: $ReadOnlyArray<Transform<>>;
+  constructor(transforms: $ReadOnlyArray<Transform<>>): void;
   __makeNative(platformConfig: ?PlatformConfig): void;
-  __getValue(): $ReadOnlyArray<Object>;
-  __getAnimatedValue(): $ReadOnlyArray<Object>;
+  __getValue(): $ReadOnlyArray<Transform<any>>;
+  __getAnimatedValue(): $ReadOnlyArray<Transform<any>>;
   __attach(): void;
   __detach(): void;
   __getNativeConfig(): any;
-  _get(getter: (AnimatedNode) => any): $ReadOnlyArray<Object>;
 }
 "
 `;