react-native-windows 0.77.0-preview.1 → 0.77.0-preview.3

package/src/private/animated/useAnimatedPropsMemo.js

@@ -113,7 +113,7 @@ export function createCompositeKeyForProps(
     const key = keys[ii];
     const value = props[key];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       let compositeKeyComponent;
       if (key === 'style') {
         // $FlowFixMe[incompatible-call] - `style` is a valid argument.
@@ -205,7 +205,7 @@ function createCompositeKeyForObject(
   for (let ii = 0, length = keys.length; ii < length; ii++) {
     const key = keys[ii];
 
-    if (allowlist == null || Object.hasOwn(allowlist, key)) {
+    if (allowlist == null || hasOwn(allowlist, key)) {
       const value = object[key];
 
       let compositeKeyComponent;
@@ -250,7 +250,7 @@ export function areCompositeKeysEqual(
   }
   for (let ii = 0; ii < length; ii++) {
     const key = keys[ii];
-    if (!Object.hasOwn(next, key)) {
+    if (!hasOwn(next, key)) {
       return false;
     }
     const prevComponent = prev[key];
@@ -336,7 +336,7 @@ function areCompositeKeyComponentsEqual(
     for (let ii = 0; ii < length; ii++) {
       const key = keys[ii];
       if (
-        !Object.hasOwn(nullthrows(next), key) ||
+        !hasOwn(nullthrows(next), key) ||
         !areCompositeKeyComponentsEqual(prev[key], next[key])
       ) {
         return false;
@@ -346,3 +346,11 @@ function areCompositeKeyComponentsEqual(
   }
   return false;
 }
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/NativeAnimatedAllowlist.windows.js

@@ -1,122 +0,0 @@
-/**
- * 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 strict-local
- * @format
- */
-
-import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
-
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-
-/**
- * Styles allowed by the native animated implementation.
- *
- * In general native animated implementation should support any numeric or color property that
- * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
- */
-const SUPPORTED_COLOR_STYLES: {[string]: true} = {
-  backgroundColor: true,
-  borderBottomColor: true,
-  borderColor: true,
-  borderEndColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderStartColor: true,
-  borderTopColor: true,
-  color: true,
-  tintColor: true,
-};
-
-const SUPPORTED_STYLES: {[string]: true} = {
-  ...SUPPORTED_COLOR_STYLES,
-  borderBottomEndRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderBottomStartRadius: true,
-  borderEndEndRadius: true,
-  borderEndStartRadius: true,
-  borderRadius: true,
-  borderTopEndRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderTopStartRadius: true,
-  borderStartEndRadius: true,
-  borderStartStartRadius: true,
-  elevation: true,
-  opacity: true,
-  transform: true,
-  zIndex: true,
-  /* ios styles */
-  shadowOpacity: true,
-  shadowRadius: true,
-  /* legacy android transform properties */
-  scaleX: true,
-  scaleY: true,
-  translateX: true,
-  translateY: true,
-};
-
-const SUPPORTED_TRANSFORMS: {[string]: true} = {
-  translateX: true,
-  translateY: true,
-  scale: true,
-  scaleX: true,
-  scaleY: true,
-  rotate: true,
-  rotateX: true,
-  rotateY: true,
-  rotateZ: true,
-  perspective: true,
-  skewX: true,
-  skewY: true,
-  ...(ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-    ? {matrix: true}
-    : {}),
-};
-
-const SUPPORTED_INTERPOLATION_PARAMS: {[string]: true} = {
-  inputRange: true,
-  outputRange: true,
-  extrapolate: true,
-  extrapolateRight: true,
-  extrapolateLeft: true,
-};
-
-/**
- * Default allowlist for component props that support native animated values.
- */
-export default {
-  style: SUPPORTED_STYLES,
-} as AnimatedPropsAllowlist;
-
-export function allowInterpolationParam(param: string): void {
-  SUPPORTED_INTERPOLATION_PARAMS[param] = true;
-}
-
-export function allowStyleProp(prop: string): void {
-  SUPPORTED_STYLES[prop] = true;
-}
-
-export function allowTransformProp(prop: string): void {
-  SUPPORTED_TRANSFORMS[prop] = true;
-}
-
-export function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
-}
-
-export function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
-}
-
-export function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES.hasOwnProperty(prop);
-}
-
-export function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
-}

package/Libraries/Animated/nodes/AnimatedProps.windows.js

@@ -1,281 +0,0 @@
-/**
- * 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 NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
-import {findNodeHandle} from '../../ReactNative/RendererProxy';
-import {AnimatedEvent} from '../AnimatedEvent';
-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 || 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,
-    };
-  }
-}
-
-// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
-// this shim when they do.
-// $FlowIgnore[method-unbinding]
-const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
-  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/nodes/AnimatedStyle.windows.js

@@ -1,251 +0,0 @@
-/**
- * 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 {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 AnimatedNode from './AnimatedNode';
-import AnimatedObject from './AnimatedObject';
-import AnimatedTransform from './AnimatedTransform';
-import AnimatedWithChildren from './AnimatedWithChildren';
-
-export type AnimatedStyleAllowlist = $ReadOnly<{[string]: true}>;
-
-function createAnimatedStyle(
-  inputStyle: {[string]: mixed},
-  allowlist: ?AnimatedStyleAllowlist,
-  keepUnanimatedValues: boolean,
-): [$ReadOnlyArray<string>, $ReadOnlyArray<AnimatedNode>, {[string]: mixed}] {
-  const nodeKeys: Array<string> = [];
-  const nodes: Array<AnimatedNode> = [];
-  const style: {[string]: mixed} = {};
-
-  const keys = Object.keys(inputStyle);
-  for (let ii = 0, length = keys.length; ii < length; ii++) {
-    const key = keys[ii];
-    const value = inputStyle[key];
-
-    if (allowlist == null || hasOwn(allowlist, key)) {
-      let node;
-      if (value != null && key === 'transform') {
-        node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
-          ? AnimatedObject.from(value)
-          : // $FlowFixMe[incompatible-call] - `value` is mixed.
-            AnimatedTransform.from(value);
-      } else if (value instanceof AnimatedNode) {
-        node = value;
-      } else {
-        node = AnimatedObject.from(value);
-      }
-      if (node == null) {
-        if (keepUnanimatedValues) {
-          style[key] = value;
-        }
-      } else {
-        nodeKeys.push(key);
-        nodes.push(node);
-        style[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 styles need to be allowlisted.
-        if (AnimatedObject.from(inputStyle[key]) != null) {
-          console.error(
-            `AnimatedStyle: ${key} is not allowlisted for animation, but it ` +
-              'contains AnimatedNode values; styles allowing animation: ',
-            allowlist,
-          );
-        }
-      }
-      if (keepUnanimatedValues) {
-        style[key] = value;
-      }
-    }
-  }
-
-  return [nodeKeys, nodes, style];
-}
-
-export default class AnimatedStyle extends AnimatedWithChildren {
-  #inputStyle: any;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #style: {[string]: mixed};
-
-  /**
-   * Creates an `AnimatedStyle` if `value` contains `AnimatedNode` instances.
-   * Otherwise, returns `null`.
-   */
-  static from(
-    inputStyle: any,
-    allowlist: ?AnimatedStyleAllowlist,
-  ): ?AnimatedStyle {
-    const flatStyle = flattenStyle(inputStyle);
-    if (flatStyle == null) {
-      return null;
-    }
-    const [nodeKeys, nodes, style] = createAnimatedStyle(
-      flatStyle,
-      allowlist,
-      Platform.OS !== 'web',
-    );
-    if (nodes.length === 0) {
-      return null;
-    }
-    return new AnimatedStyle(nodeKeys, nodes, style, inputStyle);
-  }
-
-  constructor(
-    nodeKeys: $ReadOnlyArray<string>,
-    nodes: $ReadOnlyArray<AnimatedNode>,
-    style: {[string]: mixed},
-    inputStyle: any,
-  ) {
-    super();
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#style = style;
-    this.#inputStyle = inputStyle;
-  }
-
-  __getValue(): Object | Array<Object> {
-    const style: {[string]: mixed} = {};
-
-    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) {
-        style[key] = value.__getValue();
-      } else {
-        style[key] = value;
-      }
-    }
-
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
-  }
-
-  /**
-   * Creates a new `style` object that contains the same style properties as
-   * the supplied `staticStyle` object, except with animated nodes for any
-   * style properties that were created by this `AnimatedStyle` instance.
-   */
-  __getValueWithStaticStyle(staticStyle: Object): Object | Array<Object> {
-    const flatStaticStyle = flattenStyle(staticStyle);
-    const style: {[string]: mixed} =
-      flatStaticStyle == null
-        ? {}
-        : flatStaticStyle === staticStyle
-          ? // Copy the input style, since we'll mutate it below.
-            {...flatStaticStyle}
-          : // Reuse `flatStaticStyle` if it is a newly created object.
-            flatStaticStyle;
-
-    const keys = Object.keys(style);
-    for (let ii = 0, length = keys.length; ii < length; ii++) {
-      const key = keys[ii];
-      const maybeNode = this.#style[key];
-
-      if (key === 'transform' && maybeNode instanceof AnimatedTransform) {
-        style[key] = maybeNode.__getValueWithStaticTransforms(
-          // NOTE: This check should not be necessary, but the types are not
-          // enforced as of this writing.
-          Array.isArray(style[key]) ? style[key] : [],
-        );
-      } else if (maybeNode instanceof AnimatedObject) {
-        style[key] = maybeNode.__getValueWithStaticObject(style[key]);
-      } else if (maybeNode instanceof AnimatedNode) {
-        style[key] = maybeNode.__getValue();
-      }
-    }
-
-    /* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
-     * Platform.flow.js */
-    return Platform.OS === 'web' ? [this.#inputStyle, style] : style;
-  }
-
-  __getAnimatedValue(): Object {
-    const style: {[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];
-      style[key] = node.__getAnimatedValue();
-    }
-
-    return style;
-  }
-
-  __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) {
-    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} = {};
-
-    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);
-    }
-    return {
-      type: 'style',
-      style: styleConfig,
-    };
-  }
-}
-
-// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
-// this shim when they do.
-// $FlowIgnore[method-unbinding]
-const _hasOwnProp = Object.prototype.hasOwnProperty;
-const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
-  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));