@office-iss/react-native-win32 0.0.0-canary.27 → 0.0.0-canary.271

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import invariant from 'invariant';
+
+const {startListeningToAnimatedNodeValue, stopListeningToAnimatedNodeValue} =
+  NativeAnimatedHelper.API;
+
+type ValueListenerCallback = (state: {value: number, ...}) => mixed;
+
+let _uniqueId = 1;
+let _assertNativeAnimatedModule: ?() => void = () => {
+  NativeAnimatedHelper.assertNativeAnimatedModule();
+  // We only have to assert that the module exists once. After we've asserted
+  // this, clear out the function so we know to skip it in the future.
+  _assertNativeAnimatedModule = null;
+};
+
+export default class AnimatedNode {
+  #listeners: Map<string, ValueListenerCallback> = new Map();
+  #updateSubscription: ?EventSubscription = null;
+
+  _platformConfig: ?PlatformConfig = undefined;
+  __attach(): void {}
+  __detach(): void {
+    this.removeAllListeners();
+    if (this.__isNative && this.__nativeTag != null) {
+      NativeAnimatedHelper.API.dropAnimatedNode(this.__nativeTag);
+      this.__nativeTag = undefined;
+    }
+  }
+  __getValue(): any {}
+  __getAnimatedValue(): any {
+    return this.__getValue();
+  }
+  __addChild(child: AnimatedNode) {}
+  __removeChild(child: AnimatedNode) {}
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
+    return [];
+  }
+
+  /* Methods and props used by native Animated impl */
+  __isNative: boolean = false;
+  __nativeTag: ?number = undefined;
+
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    // Subclasses are expected to set `__isNative` to true before this.
+    invariant(
+      this.__isNative,
+      'This node cannot be made a "native" animated node',
+    );
+
+    this._platformConfig = platformConfig;
+    if (this.#listeners.size > 0) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+  }
+
+  /**
+   * Adds an asynchronous listener to the value so you can observe updates from
+   * animations.  This is useful because there is no way to
+   * synchronously read the value because it might be driven natively.
+   *
+   * See https://reactnative.dev/docs/animatedvalue#addlistener
+   */
+  addListener(callback: (value: any) => mixed): string {
+    const id = String(_uniqueId++);
+    this.#listeners.set(id, callback);
+    if (this.__isNative) {
+      this.#ensureUpdateSubscriptionExists();
+    }
+    return id;
+  }
+
+  /**
+   * Unregister a listener. The `id` param shall match the identifier
+   * previously returned by `addListener()`.
+   *
+   * See https://reactnative.dev/docs/animatedvalue#removelistener
+   */
+  removeListener(id: string): void {
+    this.#listeners.delete(id);
+    if (this.__isNative && this.#listeners.size === 0) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
+  /**
+   * Remove all registered listeners.
+   *
+   * See https://reactnative.dev/docs/animatedvalue#removealllisteners
+   */
+  removeAllListeners(): void {
+    this.#listeners.clear();
+    if (this.__isNative) {
+      this.#updateSubscription?.remove();
+    }
+  }
+
+  hasListeners(): boolean {
+    return this.#listeners.size > 0;
+  }
+
+  #ensureUpdateSubscriptionExists(): void {
+    if (this.#updateSubscription != null) {
+      return;
+    }
+    const nativeTag = this.__getNativeTag();
+    startListeningToAnimatedNodeValue(nativeTag);
+    const subscription: EventSubscription =
+      NativeAnimatedHelper.nativeEventEmitter.addListener(
+        'onAnimatedValueUpdate',
+        data => {
+          if (data.tag === nativeTag) {
+            this.__onAnimatedValueUpdateReceived(data.value);
+          }
+        },
+      );
+
+    this.#updateSubscription = {
+      remove: () => {
+        // Only this function assigns to `this.#updateSubscription`.
+        if (this.#updateSubscription == null) {
+          return;
+        }
+        this.#updateSubscription = null;
+        subscription.remove();
+        stopListeningToAnimatedNodeValue(nativeTag);
+      },
+    };
+  }
+
+  __onAnimatedValueUpdateReceived(value: number): void {
+    this.__callListeners(value);
+  }
+
+  __callListeners(value: number): void {
+    const event = {value};
+    this.#listeners.forEach(listener => {
+      listener(event);
+    });
+  }
+
+  __getNativeTag(): number {
+    let nativeTag = this.__nativeTag;
+    if (nativeTag == null) {
+      _assertNativeAnimatedModule?.();
+
+      // `__isNative` is initialized as false and only ever set to true. So we
+      // only need to check it once here when initializing `__nativeTag`.
+      invariant(
+        this.__isNative,
+        'Attempt to get native tag from node not marked as "native"',
+      );
+
+      nativeTag = NativeAnimatedHelper.generateNewNodeTag();
+      this.__nativeTag = nativeTag;
+
+      const config = this.__getNativeConfig();
+      if (this._platformConfig) {
+        config.platformConfig = this._platformConfig;
+      }
+      NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
+    }
+    return nativeTag;
+  }
+
+  __getNativeConfig(): Object {
+    throw new Error(
+      'This JS animated node type cannot be used as native animated node',
+    );
+  }
+
+  __getPlatformConfig(): ?PlatformConfig {
+    return this._platformConfig;
+  }
+
+  __setPlatformConfig(platformConfig: ?PlatformConfig) {
+    this._platformConfig = platformConfig;
+  }
+
+  /**
+   * NOTE: This is intended to prevent `JSON.stringify` from throwing "cyclic
+   * structure" errors in React DevTools. Avoid depending on this!
+   */
+  toJSON(): mixed {
+    return this.__getValue();
+  }
+}

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ * @oncall react_native
+ */
+
+'use strict';
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+import AnimatedNode from './AnimatedNode';
+import AnimatedWithChildren from './AnimatedWithChildren';
+import * as React from 'react';
+
+const MAX_DEPTH = 5;
+
+export function isPlainObject(
+  value: mixed,
+  /* $FlowIssue[incompatible-type-guard] - Flow does not know that the prototype
+     and ReactElement checks preserve the type refinement of `value`. */
+): value is $ReadOnly<{[string]: mixed}> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    Object.getPrototypeOf(value).isPrototypeOf(Object) &&
+    !React.isValidElement(value)
+  );
+}
+
+function flatAnimatedNodes(
+  value: mixed,
+  nodes: Array<AnimatedNode> = [],
+  depth: number = 0,
+): Array<AnimatedNode> {
+  if (depth >= MAX_DEPTH) {
+    return nodes;
+  }
+  if (value instanceof AnimatedNode) {
+    nodes.push(value);
+  } else if (Array.isArray(value)) {
+    for (let ii = 0, length = value.length; ii < length; ii++) {
+      const element = value[ii];
+      flatAnimatedNodes(element, nodes, depth + 1);
+    }
+  } else if (isPlainObject(value)) {
+    const keys = Object.keys(value);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
+      flatAnimatedNodes(value[key], nodes, depth + 1);
+    }
+  }
+  return nodes;
+}
+
+// Returns a copy of value with a transformation fn applied to any AnimatedNodes
+function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
+  if (depth >= MAX_DEPTH) {
+    return value;
+  }
+
+  if (value instanceof AnimatedNode) {
+    return fn(value);
+  } else if (Array.isArray(value)) {
+    return value.map(element => mapAnimatedNodes(element, fn, depth + 1));
+  } else if (isPlainObject(value)) {
+    const result: {[string]: any} = {};
+    const keys = Object.keys(value);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
+      result[key] = mapAnimatedNodes(value[key], fn, depth + 1);
+    }
+    return result;
+  } else {
+    return value;
+  }
+}
+
+export default class AnimatedObject extends AnimatedWithChildren {
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+  _value: mixed;
+
+  /**
+   * Creates an `AnimatedObject` if `value` contains `AnimatedNode` instances.
+   * Otherwise, returns `null`.
+   */
+  static from(value: mixed): ?AnimatedObject {
+    const nodes = flatAnimatedNodes(value);
+    if (nodes.length === 0) {
+      return null;
+    }
+    return new AnimatedObject(nodes, value);
+  }
+
+  /**
+   * Should only be called by `AnimatedObject.from`.
+   */
+  constructor(nodes: $ReadOnlyArray<AnimatedNode>, value: mixed) {
+    super();
+    this.#nodes = nodes;
+    this._value = value;
+  }
+
+  __getValue(): any {
+    return mapAnimatedNodes(this._value, node => {
+      return node.__getValue();
+    });
+  }
+
+  __getValueWithStaticObject(staticObject: mixed): any {
+    const nodes = this.#nodes;
+    let index = 0;
+    // NOTE: We can depend on `this._value` and `staticObject` sharing a
+    // structure because of `useAnimatedPropsMemo`.
+    return mapAnimatedNodes(staticObject, () => nodes[index++].__getValue());
+  }
+
+  __getAnimatedValue(): any {
+    return mapAnimatedNodes(this._value, node => {
+      return node.__getAnimatedValue();
+    });
+  }
+
+  __attach(): void {
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
+    }
+  }
+
+  __detach(): void {
+    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): void {
+    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(): any {
+    return {
+      type: 'object',
+      value: mapAnimatedNodes(this._value, node => {
+        return {nodeTag: node.__getNativeTag()};
+      }),
+    };
+  }
+}

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type {AnimatedStyleAllowlist} from './AnimatedStyle';
+
+import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {AnimatedEvent} from '../AnimatedEvent';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+import AnimatedObject from './AnimatedObject';
+import AnimatedStyle from './AnimatedStyle';
+import invariant from 'invariant';
+
+export type AnimatedPropsAllowlist = $ReadOnly<{
+  style?: ?AnimatedStyleAllowlist,
+  [string]: true,
+}>;
+
+function createAnimatedProps(
+  inputProps: {[string]: mixed},
+  allowlist: ?AnimatedPropsAllowlist,
+): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
+  const nodeKeys: Array<string> = [];
+  const nodes: Array<AnimatedNode> = [];
+  const props: {[string]: mixed} = {};
+
+  const keys = Object.keys(inputProps);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+    const value = inputProps[key];
+
+    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+      let node;
+      if (key === 'style') {
+        node = AnimatedStyle.from(value, allowlist?.style);
+      } else if (value instanceof AnimatedNode) {
+        node = value;
+      } else {
+        node = AnimatedObject.from(value);
+      }
+      if (node == null) {
+        props[key] = value;
+      } else {
+        nodeKeys.push(key);
+        nodes.push(node);
+        props[key] = node;
+      }
+    } else {
+      if (__DEV__) {
+        // WARNING: This is a potentially expensive check that we should only
+        // do in development. Without this check in development, it might be
+        // difficult to identify which props need to be allowlisted.
+        if (AnimatedObject.from(inputProps[key]) != null) {
+          console.error(
+            `AnimatedProps: ${key} is not allowlisted for animation, but it ` +
+              'contains AnimatedNode values; props allowing animation: ',
+            allowlist,
+          );
+        }
+      }
+      props[key] = value;
+    }
+  }
+
+  return [nodeKeys, nodes, props];
+}
+
+export default class AnimatedProps extends AnimatedNode {
+  #animatedView: any = null;
+  #callback: () => void;
+  #nodeKeys: $ReadOnlyArray<string>;
+  #nodes: $ReadOnlyArray<AnimatedNode>;
+  #props: {[string]: mixed};
+
+  constructor(
+    inputProps: {[string]: mixed},
+    callback: () => void,
+    allowlist?: ?AnimatedPropsAllowlist,
+  ) {
+    super();
+    const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
+    this.#nodeKeys = nodeKeys;
+    this.#nodes = nodes;
+    this.#props = props;
+    this.#callback = callback;
+  }
+
+  __getValue(): Object {
+    const props: {[string]: mixed} = {};
+
+    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) {
+        props[key] = value.__getHandler();
+      } else {
+        props[key] = value;
+      }
+    }
+
+    return props;
+  }
+
+  /**
+   * Creates a new `props` object that contains the same props as the supplied
+   * `staticProps` object, except with animated nodes for any props that were
+   * created by this `AnimatedProps` instance.
+   */
+  __getValueWithStaticProps(staticProps: Object): Object {
+    const props: {[string]: mixed} = {...staticProps};
+
+    const keys = Object.keys(staticProps);
+    for (let ii = 0, length = keys.length; ii < length; ii++) {
+      const key = keys[ii];
+      const maybeNode = this.#props[key];
+
+      if (key === 'style' && maybeNode instanceof AnimatedStyle) {
+        props[key] = maybeNode.__getValueWithStaticStyle(staticProps.style);
+      } else if (maybeNode instanceof AnimatedNode) {
+        props[key] = maybeNode.__getValue();
+      } else if (maybeNode instanceof AnimatedEvent) {
+        props[key] = maybeNode.__getHandler();
+      }
+    }
+
+    return props;
+  }
+
+  __getAnimatedValue(): Object {
+    const props: {[string]: mixed} = {};
+
+    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 {
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__addChild(this);
+    }
+  }
+
+  __detach(): void {
+    if (this.__isNative && this.#animatedView) {
+      this.__disconnectAnimatedView();
+    }
+    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();
+  }
+
+  update(): void {
+    this.#callback();
+  }
+
+  __makeNative(platformConfig: ?PlatformConfig): void {
+    const nodes = this.#nodes;
+    for (let ii = 0, length = nodes.length; ii < length; ii++) {
+      const node = nodes[ii];
+      node.__makeNative(platformConfig);
+    }
+
+    if (!this.__isNative) {
+      this.__isNative = true;
+
+      // Since this does not call the super.__makeNative, we need to store the
+      // supplied platformConfig here, before calling __connectAnimatedView
+      // where it will be needed to traverse the graph of attached values.
+      super.__setPlatformConfig(platformConfig);
+
+      if (this.#animatedView) {
+        this.__connectAnimatedView();
+      }
+    }
+  }
+
+  setNativeView(animatedView: any): void {
+    if (this.#animatedView === animatedView) {
+      return;
+    }
+    this.#animatedView = animatedView;
+    if (this.__isNative) {
+      this.__connectAnimatedView();
+    }
+  }
+
+  __connectAnimatedView(): void {
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
+    if (nativeViewTag == null) {
+      if (process.env.NODE_ENV === 'test') {
+        nativeViewTag = -1;
+      } else {
+        throw new Error('Unable to locate attached view in the native tree');
+      }
+    }
+    NativeAnimatedHelper.API.connectAnimatedNodeToView(
+      this.__getNativeTag(),
+      nativeViewTag,
+    );
+  }
+
+  __disconnectAnimatedView(): void {
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    let nativeViewTag: ?number = findNodeHandle(this.#animatedView);
+    if (nativeViewTag == null) {
+      if (process.env.NODE_ENV === 'test') {
+        nativeViewTag = -1;
+      } else {
+        throw new Error('Unable to locate attached view in the native tree');
+      }
+    }
+    NativeAnimatedHelper.API.disconnectAnimatedNodeFromView(
+      this.__getNativeTag(),
+      nativeViewTag,
+    );
+  }
+
+  __restoreDefaultValues(): void {
+    // When using the native driver, view properties need to be restored to
+    // their default values manually since react no longer tracks them. This
+    // is needed to handle cases where a prop driven by native animated is removed
+    // after having been changed natively by an animation.
+    if (this.__isNative) {
+      NativeAnimatedHelper.API.restoreDefaultValues(this.__getNativeTag());
+    }
+  }
+
+  __getNativeConfig(): Object {
+    const platformConfig = this.__getPlatformConfig();
+    const propsConfig: {[string]: number} = {};
+
+    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,
+    };
+  }
+}