@office-iss/react-native-win32 0.75.2 → 0.76.0-preview.1

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -14,44 +14,74 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import {AnimatedEvent} from '../AnimatedEvent';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
-import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
+import AnimatedObject from './AnimatedObject';
 import AnimatedStyle from './AnimatedStyle';
 import invariant from 'invariant';
 
-function createAnimatedProps(inputProps: Object): Object {
+function createAnimatedProps(
+  inputProps: Object,
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, Object] {
+  const nodeKeys: Array<string> = [];
+  const nodes: Array<AnimatedNode> = [];
   const props: Object = {};
-  for (const key in inputProps) {
+
+  const keys = Object.keys(inputProps);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
     const value = inputProps[key];
+
     if (key === 'style') {
-      props[key] = new AnimatedStyle(value);
+      const node = new AnimatedStyle(value);
+      nodeKeys.push(key);
+      nodes.push(node);
+      props[key] = node;
     } else if (value instanceof AnimatedNode) {
-      props[key] = value;
-    } else if (hasAnimatedNode(value)) {
-      props[key] = new AnimatedObject(value);
+      const node = value;
+      nodeKeys.push(key);
+      nodes.push(node);
+      props[key] = node;
     } else {
-      props[key] = value;
+      const node = AnimatedObject.from(value);
+      if (node == null) {
+        props[key] = value;
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        props[key] = node;
+      }
     }
   }
-  return props;
+
+  return [nodeKeys, nodes, props];
 }
 
 export default class AnimatedProps extends AnimatedNode {
+  #nodeKeys: $ReadOnlyArray<string>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+
+  _animatedView: any = null;
   _props: Object;
-  _animatedView: any;
   _callback: () => void;
 
-  constructor(props: Object, callback: () => void) {
+  constructor(inputProps: Object, callback: () => void) {
     super();
-    this._props = createAnimatedProps(props);
+    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps);
+    this.#nodeKeys = nodeKeys;
+    this.#nodes = nodes;
+    this._props = props;
     this._callback = callback;
   }
 
   __getValue(): Object {
     const props: {[string]: any | ((...args: any) => void)} = {};
-    for (const key in this._props) {
+
+    const keys = Object.keys(this._props);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
       const value = this._props[key];
+
       if (value instanceof AnimatedNode) {
         props[key] = value.__getValue();
       } else if (value instanceof AnimatedEvent) {
@@ -66,21 +96,23 @@ export default class AnimatedProps extends AnimatedNode {
 
   __getAnimatedValue(): Object {
     const props: {[string]: any} = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        props[key] = value.__getAnimatedValue();
-      }
+
+    const nodeKeys = this.#nodeKeys;
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const key = nodeKeys[ii];
+      const node = nodes[ii];
+      props[key] = node.__getAnimatedValue();
     }
+
     return props;
   }
 
   __attach(): void {
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__addChild(this);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
     }
   }
 
@@ -88,12 +120,14 @@ export default class AnimatedProps extends AnimatedNode {
     if (this.__isNative && this._animatedView) {
       this.__disconnectAnimatedView();
     }
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__removeChild(this);
-      }
+    this._animatedView = null;
+
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__removeChild(this);
     }
+
     super.__detach();
   }
 
@@ -102,11 +136,10 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative(platformConfig);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
     }
 
     if (!this.__isNative) {
@@ -170,14 +203,18 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __getNativeConfig(): Object {
+    const platformConfig = this.__getPlatformConfig();
     const propsConfig: {[string]: number} = {};
-    for (const propKey in this._props) {
-      const value = this._props[propKey];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative(this.__getPlatformConfig());
-        propsConfig[propKey] = value.__getNativeTag();
-      }
+
+    const nodeKeys = this.#nodeKeys;
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const key = nodeKeys[ii];
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
+      propsConfig[key] = node.__getNativeTag();
     }
+
     return {
       type: 'props',
       props: propsConfig,

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,116 +12,160 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import {validateStyles} from '../../../src/private/animated/NativeAnimatedValidation';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
-import AnimatedObject, {hasAnimatedNode} from './AnimatedObject';
+import AnimatedObject from './AnimatedObject';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 function createAnimatedStyle(
-  inputStyle: any,
+  inputStyle: {[string]: mixed},
   keepUnanimatedValues: boolean,
-): Object {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  const style = flattenStyle(inputStyle);
-  const animatedStyles: any = {};
-  for (const key in style) {
-    const value = style[key];
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, Object] {
+  const nodeKeys: Array<string> = [];
+  const nodes: Array<AnimatedNode> = [];
+  const style: {[string]: any} = {};
+
+  const keys = Object.keys(inputStyle);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+    const value = inputStyle[key];
+
     if (value != null && key === 'transform') {
-      animatedStyles[key] =
-        ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-          ? new AnimatedObject(value)
-          : new AnimatedTransform(value);
+      const node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+        ? AnimatedObject.from(value)
+        : // $FlowFixMe[incompatible-call] - `value` is mixed.
+          new AnimatedTransform(value);
+      if (node == null) {
+        if (keepUnanimatedValues) {
+          style[key] = value;
+        }
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        style[key] = node;
+      }
     } else if (value instanceof AnimatedNode) {
-      animatedStyles[key] = value;
-    } else if (hasAnimatedNode(value)) {
-      animatedStyles[key] = new AnimatedObject(value);
-    } else if (keepUnanimatedValues) {
-      animatedStyles[key] = value;
+      const node = value;
+      nodeKeys.push(key);
+      nodes.push(node);
+      style[key] = value;
+    } else {
+      const node = AnimatedObject.from(value);
+      if (node == null) {
+        if (keepUnanimatedValues) {
+          style[key] = value;
+        }
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        style[key] = node;
+      }
     }
   }
-  return animatedStyles;
+
+  return [nodeKeys, nodes, style];
 }
 
 export default class AnimatedStyle extends AnimatedWithChildren {
+  #nodeKeys: $ReadOnlyArray<string>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+
   _inputStyle: any;
-  _style: Object;
+  _style: {[string]: any};
 
-  constructor(style: any) {
+  constructor(inputStyle: any) {
     super();
-    this._inputStyle = style;
-    this._style = createAnimatedStyle(style, Platform.OS !== 'web');
+    this._inputStyle = inputStyle;
+    const [nodeKeys, nodes, style] = createAnimatedStyle(
+      // NOTE: This null check should not be necessary, but the types are not
+      // strong nor enforced as of this writing. This check should be hoisted
+      // to instantiation sites.
+      flattenStyle(inputStyle) ?? {},
+      Platform.OS !== 'web',
+    );
+    this.#nodeKeys = nodeKeys;
+    this.#nodes = nodes;
+    this._style = style;
   }
 
   __getValue(): Object | Array<Object> {
-    const result: {[string]: any} = {};
-    for (const key in this._style) {
+    const style: {[string]: any} = {};
+
+    const keys = Object.keys(this._style);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
       const value = this._style[key];
+
       if (value instanceof AnimatedNode) {
-        result[key] = value.__getValue();
+        style[key] = value.__getValue();
       } else {
-        result[key] = value;
+        style[key] = value;
       }
     }
 
-    return Platform.OS === 'web' ? [this._inputStyle, result] : result;
+    return Platform.OS === 'web' ? [this._inputStyle, style] : style;
   }
 
   __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();
-      }
+    const style: {[string]: any} = {};
+
+    const nodeKeys = this.#nodeKeys;
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const key = nodeKeys[ii];
+      const node = nodes[ii];
+      style[key] = node.__getAnimatedValue();
     }
-    return result;
+
+    return style;
   }
 
   __attach(): void {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__addChild(this);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
     }
   }
 
   __detach(): void {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__removeChild(this);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__removeChild(this);
     }
     super.__detach();
   }
 
   __makeNative(platformConfig: ?PlatformConfig) {
-    for (const key in this._style) {
-      const value = this._style[key];
-      if (value instanceof AnimatedNode) {
-        value.__makeNative(platformConfig);
-      }
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
     }
     super.__makeNative(platformConfig);
   }
 
   __getNativeConfig(): Object {
+    const platformConfig = this.__getPlatformConfig();
     const styleConfig: {[string]: ?number} = {};
-    for (const styleKey in this._style) {
-      if (this._style[styleKey] instanceof AnimatedNode) {
-        const style = this._style[styleKey];
-        style.__makeNative(this.__getPlatformConfig());
-        styleConfig[styleKey] = style.__getNativeTag();
-      }
-      // Non-animated styles are set using `setNativeProps`, no need
-      // to pass those as a part of the node config
+
+    const nodeKeys = this.#nodeKeys;
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const key = nodeKeys[ii];
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
+      styleConfig[key] = node.__getNativeTag();
+    }
+
+    if (__DEV__) {
+      validateStyles(styleConfig);
     }
-    NativeAnimatedHelper.validateStyles(styleConfig);
     return {
       type: 'style',
       style: styleConfig,

package/Libraries/Animated/nodes/AnimatedTracking.js

@@ -14,7 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {EndCallback} from '../animations/Animation';
 import type AnimatedValue from './AnimatedValue';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 
 export default class AnimatedTracking extends AnimatedNode {

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -12,119 +12,154 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import {validateTransform} from '../../../src/private/animated/NativeAnimatedValidation';
+import NativeAnimatedHelper from '../../../src/private/animated/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>;
+  // NOTE: For potentially historical reasons, some operations only operate on
+  // the first level of AnimatedNode instances. This optimizes that bevavior.
+  #shallowNodes: $ReadOnlyArray<AnimatedNode>;
+
+  _transforms: $ReadOnlyArray<Transform<>>;
 
-  constructor(transforms: $ReadOnlyArray<Object>) {
+  constructor(transforms: $ReadOnlyArray<Transform<>>) {
     super();
     this._transforms = transforms;
-  }
 
-  __makeNative(platformConfig: ?PlatformConfig) {
-    this._transforms.forEach(transform => {
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          value.__makeNative(platformConfig);
+    const shallowNodes = [];
+    // NOTE: This check should not be necessary, but the types are not enforced
+    // as of this writing. This check should be hoisted to instantiation sites.
+    if (Array.isArray(transforms)) {
+      for (let ii = 0, length = transforms.length; ii < length; ii++) {
+        const transform = transforms[ii];
+        // There should be exactly one property in `transform`.
+        for (const key in transform) {
+          const value = transform[key];
+          if (value instanceof AnimatedNode) {
+            shallowNodes.push(value);
+          }
         }
       }
-    });
+    }
+    this.#shallowNodes = shallowNodes;
+  }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    const nodes = this.#shallowNodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
+    }
     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 {
-    this._transforms.forEach(transform => {
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          value.__addChild(this);
-        }
-      }
-    });
+    const nodes = this.#shallowNodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
+    }
   }
 
   __detach(): void {
-    this._transforms.forEach(transform => {
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          value.__removeChild(this);
-        }
-      }
-    });
+    const nodes = this.#shallowNodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__removeChild(this);
+    }
     super.__detach();
   }
 
   __getNativeConfig(): any {
-    const transConfigs: Array<any> = [];
+    const transformsConfig: Array<any> = [];
 
-    this._transforms.forEach(transform => {
+    const transforms = this._transforms;
+    for (let ii = 0, length = transforms.length; ii < length; ii++) {
+      const transform = transforms[ii];
+      // There should be exactly one property in `transform`.
       for (const key in transform) {
         const value = transform[key];
         if (value instanceof AnimatedNode) {
-          transConfigs.push({
+          transformsConfig.push({
             type: 'animated',
             property: key,
             nodeTag: value.__getNativeTag(),
           });
         } else {
-          transConfigs.push({
+          transformsConfig.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),
           });
         }
       }
-    });
+    }
 
-    NativeAnimatedHelper.validateTransform(transConfigs);
+    if (__DEV__) {
+      validateTransform(transformsConfig);
+    }
     return {
       type: 'transform',
-      transforms: transConfigs,
+      transforms: transformsConfig,
     };
   }
+}
 
-  _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> = {};
+    // There should be exactly one property in `transform`.
+    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;
+  });
 }

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -16,7 +16,7 @@ import type AnimatedNode from './AnimatedNode';
 import type AnimatedTracking from './AnimatedTracking';
 
 import InteractionManager from '../../Interaction/InteractionManager';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedInterpolation from './AnimatedInterpolation';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
@@ -49,6 +49,7 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * transform which can receive values from multiple parents.
  */
 export function flushValue(rootNode: AnimatedNode): void {
+  // eslint-disable-next-line func-call-spacing
   const leaves = new Set<{update: () => void, ...}>();
   function findAnimatedStyles(node: AnimatedNode) {
     // $FlowFixMe[prop-missing]