@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.2

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,19 +8,11 @@
  * @format
  */
 
-'use strict';
-
 import View from '../Components/View/View';
-import setAndForwardRef from '../Utilities/setAndForwardRef';
-import {AnimatedEvent} from './AnimatedEvent';
-import * as createAnimatedComponentInjection from './createAnimatedComponentInjection';
-import NativeAnimatedHelper from './NativeAnimatedHelper';
-import AnimatedProps from './nodes/AnimatedProps';
-import invariant from 'invariant';
+import useMergeRefs from '../Utilities/useMergeRefs';
+import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 
-let animatedComponentNextId = 1;
-
 export type AnimatedComponentType<
   -Props: {+[string]: mixed, ...},
   +Instance = mixed,
@@ -37,238 +29,33 @@ export type AnimatedComponentType<
   Instance,
 >;
 
-function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
-  Component: React.AbstractComponent<Props, Instance>,
-): AnimatedComponentType<Props, Instance> {
-  invariant(
-    typeof Component !== 'function' ||
-      (Component.prototype && Component.prototype.isReactComponent),
-    '`createAnimatedComponent` does not support stateless functional components; ' +
-      'use a class component instead.',
-  );
-
-  class AnimatedComponent extends React.Component<Object> {
-    _component: any; // TODO T53738161: flow type this, and the whole file
-    _invokeAnimatedPropsCallbackOnMount: boolean = false;
-    _prevComponent: any;
-    _propsAnimated: AnimatedProps;
-    _eventDetachers: Array<Function> = [];
-
-    // Only to be used in this file, and only in Fabric.
-    _animatedComponentId: string = `${animatedComponentNextId++}:animatedComponent`;
-
-    _attachNativeEvents() {
-      // Make sure to get the scrollable node for components that implement
-      // `ScrollResponder.Mixin`.
-      const scrollableNode = this._component?.getScrollableNode
-        ? this._component.getScrollableNode()
-        : this._component;
-
-      for (const key in this.props) {
-        const prop = this.props[key];
-        if (prop instanceof AnimatedEvent && prop.__isNative) {
-          prop.__attach(scrollableNode, key);
-          this._eventDetachers.push(() => prop.__detach(scrollableNode, key));
-        }
-      }
-    }
-
-    _detachNativeEvents() {
-      this._eventDetachers.forEach(remove => remove());
-      this._eventDetachers = [];
-    }
-
-    _isFabric = (): boolean => {
-      // When called during the first render, `_component` is always null.
-      // Therefore, even if a component is rendered in Fabric, we can't detect
-      // that until ref is set, which happens sometime after the first render.
-      // In cases where this value switching between "false" and "true" on Fabric
-      // causes issues, add an additional check for _component nullity.
-      if (this._component == null) {
-        return false;
-      }
-      return (
-        // eslint-disable-next-line dot-notation
-        this._component['_internalInstanceHandle']?.stateNode?.canonical !=
-          null ||
-        // Some components have a setNativeProps function but aren't a host component
-        // such as lists like FlatList and SectionList. These should also use
-        // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
-        // host component. This crazy hack is essentially special casing those lists and
-        // ScrollView itself to use forceUpdate in Fabric.
-        // If these components end up using forwardRef then these hacks can go away
-        // as this._component would actually be the underlying host component and the above check
-        // would be sufficient.
-        (this._component.getNativeScrollRef != null &&
-          this._component.getNativeScrollRef() != null &&
-          // eslint-disable-next-line dot-notation
-          this._component.getNativeScrollRef()['_internalInstanceHandle']
-            ?.stateNode?.canonical != null) ||
-        (this._component.getScrollResponder != null &&
-          this._component.getScrollResponder() != null &&
-          this._component.getScrollResponder().getNativeScrollRef != null &&
-          this._component.getScrollResponder().getNativeScrollRef() != null &&
-          this._component.getScrollResponder().getNativeScrollRef()[
-            // eslint-disable-next-line dot-notation
-            '_internalInstanceHandle'
-          ]?.stateNode?.canonical != null)
-      );
-    };
-
-    _waitForUpdate = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.setWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
-    };
-
-    _markUpdateComplete = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.unsetWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
-    };
-
-    // The system is best designed when setNativeProps is implemented. It is
-    // able to avoid re-rendering and directly set the attributes that changed.
-    // However, setNativeProps can only be implemented on leaf native
-    // components. If you want to animate a composite component, you need to
-    // re-render it. In this case, we have a fallback that uses forceUpdate.
-    // This fallback is also called in Fabric.
-    _animatedPropsCallback = (): void => {
-      if (this._component == null) {
-        // AnimatedProps is created in will-mount because it's used in render.
-        // But this callback may be invoked before mount in async mode,
-        // In which case we should defer the setNativeProps() call.
-        // React may throw away uncommitted work in async mode,
-        // So a deferred call won't always be invoked.
-        this._invokeAnimatedPropsCallbackOnMount = true;
-      } else if (
-        process.env.NODE_ENV === 'test' ||
-        // For animating properties of non-leaf/non-native components
-        typeof this._component.setNativeProps !== 'function' ||
-        // In Fabric, force animations to go through forceUpdate and skip setNativeProps
-        this._isFabric()
-      ) {
-        this.forceUpdate();
-      } else if (!this._propsAnimated.__isNative) {
-        this._component.setNativeProps(
-          this._propsAnimated.__getAnimatedValue(),
-        );
-      } else {
-        throw new Error(
-          'Attempting to run JS driven animation on animated ' +
-            'node that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
-    };
-
-    _attachProps(nextProps: any) {
-      const oldPropsAnimated = this._propsAnimated;
-
-      this._propsAnimated = new AnimatedProps(
-        nextProps,
-        this._animatedPropsCallback,
-      );
-      this._propsAnimated.__attach();
-
-      // When you call detach, it removes the element from the parent list
-      // of children. If it goes to 0, then the parent also detaches itself
-      // and so on.
-      // An optimization is to attach the new elements and THEN detach the old
-      // ones instead of detaching and THEN attaching.
-      // This way the intermediate state isn't to go to 0 and trigger
-      // this expensive recursive detaching to then re-attach everything on
-      // the very next operation.
-      if (oldPropsAnimated) {
-        oldPropsAnimated.__restoreDefaultValues();
-        oldPropsAnimated.__detach();
-      }
-    }
-
-    _setComponentRef: (ref: React.ElementRef<any>) => void = setAndForwardRef({
-      getForwardedRef: () => this.props.forwardedRef,
-      setLocalRef: ref => {
-        this._prevComponent = this._component;
-        this._component = ref;
-      },
-    });
-
-    render(): React.Node {
-      const animatedProps = this._propsAnimated.__getValue() || {};
-
-      const {style = {}, ...props} = animatedProps;
-      const {style: passthruStyle = {}, ...passthruProps} =
-        this.props.passthroughAnimatedPropExplicitValues || {};
-      const mergedStyle = {...style, ...passthruStyle};
-
-      // Force `collapsable` to be false so that native view is not flattened.
-      // Flattened views cannot be accurately referenced by a native driver.
-      return (
-        <Component
-          {...props}
-          {...passthruProps}
-          collapsable={false}
-          style={mergedStyle}
-          ref={this._setComponentRef}
-        />
-      );
-    }
-
-    UNSAFE_componentWillMount() {
-      this._waitForUpdate();
-      this._attachProps(this.props);
-    }
-
-    componentDidMount() {
-      if (this._invokeAnimatedPropsCallbackOnMount) {
-        this._invokeAnimatedPropsCallbackOnMount = false;
-        this._animatedPropsCallback();
-      }
-
-      this._propsAnimated.setNativeView(this._component);
-      this._attachNativeEvents();
-      this._markUpdateComplete();
-    }
-
-    UNSAFE_componentWillReceiveProps(newProps: any) {
-      this._waitForUpdate();
-      this._attachProps(newProps);
-    }
-
-    componentDidUpdate(prevProps: any) {
-      if (this._component !== this._prevComponent) {
-        this._propsAnimated.setNativeView(this._component);
-      }
-      if (this._component !== this._prevComponent || prevProps !== this.props) {
-        this._detachNativeEvents();
-        this._attachNativeEvents();
-      }
-      this._markUpdateComplete();
-    }
-
-    componentWillUnmount() {
-      this._propsAnimated && this._propsAnimated.__detach();
-      this._detachNativeEvents();
-      this._markUpdateComplete();
-      this._component = null;
-      this._prevComponent = null;
-    }
-  }
+export default function createAnimatedComponent<TProps: {...}, TInstance>(
+  Component: React.AbstractComponent<TProps, TInstance>,
+): AnimatedComponentType<TProps, TInstance> {
+  return React.forwardRef((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      // $FlowFixMe[incompatible-call]
+      props,
+    );
+    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
+
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = {...style, ...passthroughStyle};
 
-  return React.forwardRef(function AnimatedComponentWrapper(props, ref) {
     return (
-      <AnimatedComponent
-        {...props}
-        {...(ref == null ? null : {forwardedRef: ref})}
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
       />
     );
   });
 }
-
-// $FlowIgnore[incompatible-cast] - Will be compatible after refactors.
-export default (createAnimatedComponentInjection.recordAndRetrieve() ??
-  createAnimatedComponent: typeof createAnimatedComponent);

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -18,7 +18,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
-import AnimatedValue from './AnimatedValue';
+import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
 export type AnimatedColorConfig = $ReadOnly<{
@@ -43,10 +43,11 @@ type RgbaAnimatedValue = {
   ...
 };
 
+export type InputValue = ?(RgbaValue | RgbaAnimatedValue | ColorValue);
+
 const NativeAnimatedAPI = NativeAnimatedHelper.API;
 
 const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
-let _uniqueId = 1;
 
 /* eslint no-bitwise: 0 */
 function processColor(
@@ -113,22 +114,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
   b: AnimatedValue;
   a: AnimatedValue;
   nativeColor: ?NativeColorValue;
-  _listeners: {
-    [key: string]: {
-      r: string,
-      g: string,
-      b: string,
-      a: string,
-      ...
-    },
-    ...
-  } = {};
-
-  constructor(
-    valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue),
-    config?: ?AnimatedColorConfig,
-  ) {
+
+  _suspendCallbacks: number = 0;
+
+  constructor(valueIn?: InputValue, config?: ?AnimatedColorConfig) {
     super();
+
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
       valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
@@ -156,7 +147,8 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.b = new AnimatedValue(initColor.b);
       this.a = new AnimatedValue(initColor.a);
     }
-    if (this.nativeColor || (config && config.useNativeDriver)) {
+
+    if (config?.useNativeDriver) {
       this.__makeNative();
     }
   }
@@ -174,25 +166,27 @@ export default class AnimatedColor extends AnimatedWithChildren {
 
     const processedColor: RgbaValue | NativeColorValue =
       processColor(value) ?? defaultColor;
-    if (isRgbaValue(processedColor)) {
-      // $FlowIgnore[incompatible-type] - Type is verified above
-      const rgbaValue: RgbaValue = processedColor;
-      this.r.setValue(rgbaValue.r);
-      this.g.setValue(rgbaValue.g);
-      this.b.setValue(rgbaValue.b);
-      this.a.setValue(rgbaValue.a);
-      if (this.nativeColor != null) {
-        this.nativeColor = null;
-        shouldUpdateNodeConfig = true;
-      }
-    } else {
-      // $FlowIgnore[incompatible-type] - Type is verified above
-      const nativeColor: NativeColorValue = processedColor;
-      if (this.nativeColor !== nativeColor) {
-        this.nativeColor = nativeColor;
-        shouldUpdateNodeConfig = true;
+    this._withSuspendedCallbacks(() => {
+      if (isRgbaValue(processedColor)) {
+        // $FlowIgnore[incompatible-type] - Type is verified above
+        const rgbaValue: RgbaValue = processedColor;
+        this.r.setValue(rgbaValue.r);
+        this.g.setValue(rgbaValue.g);
+        this.b.setValue(rgbaValue.b);
+        this.a.setValue(rgbaValue.a);
+        if (this.nativeColor != null) {
+          this.nativeColor = null;
+          shouldUpdateNodeConfig = true;
+        }
+      } else {
+        // $FlowIgnore[incompatible-type] - Type is verified above
+        const nativeColor: NativeColorValue = processedColor;
+        if (this.nativeColor !== nativeColor) {
+          this.nativeColor = nativeColor;
+          shouldUpdateNodeConfig = true;
+        }
       }
-    }
+    });
 
     if (this.__isNative) {
       const nativeTag = this.__getNativeTag();
@@ -203,7 +197,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
         );
       }
       NativeAnimatedAPI.unsetWaitingForIdentifier(nativeTag.toString());
+    } else {
+      flushValue(this);
     }
+
+    // $FlowFixMe[incompatible-call]
+    this.__callListeners(this.__getValue());
   }
 
   /**
@@ -240,50 +239,6 @@ export default class AnimatedColor extends AnimatedWithChildren {
     this.a.extractOffset();
   }
 
-  /**
-   * 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.
-   *
-   * Returns a string that serves as an identifier for the listener.
-   */
-  addListener(callback: ColorListenerCallback): string {
-    const id = String(_uniqueId++);
-    const jointCallback = ({value: number}: any) => {
-      callback(this.__getValue());
-    };
-    this._listeners[id] = {
-      r: this.r.addListener(jointCallback),
-      g: this.g.addListener(jointCallback),
-      b: this.b.addListener(jointCallback),
-      a: this.a.addListener(jointCallback),
-    };
-    return id;
-  }
-
-  /**
-   * Unregister a listener. The `id` param shall match the identifier
-   * previously returned by `addListener()`.
-   */
-  removeListener(id: string): void {
-    this.r.removeListener(this._listeners[id].r);
-    this.g.removeListener(this._listeners[id].g);
-    this.b.removeListener(this._listeners[id].b);
-    this.a.removeListener(this._listeners[id].a);
-    delete this._listeners[id];
-  }
-
-  /**
-   * Remove all registered listeners.
-   */
-  removeAllListeners(): void {
-    this.r.removeAllListeners();
-    this.g.removeAllListeners();
-    this.b.removeAllListeners();
-    this.a.removeAllListeners();
-    this._listeners = {};
-  }
-
   /**
    * Stops any running animation or tracking. `callback` is invoked with the
    * final value after stopping the animation, which is useful for updating
@@ -332,6 +287,18 @@ export default class AnimatedColor extends AnimatedWithChildren {
     super.__detach();
   }
 
+  _withSuspendedCallbacks(callback: () => void) {
+    this._suspendCallbacks++;
+    callback();
+    this._suspendCallbacks--;
+  }
+
+  __callListeners(value: number): void {
+    if (this._suspendCallbacks === 0) {
+      super.__callListeners(value);
+    }
+  }
+
   __makeNative(platformConfig: ?PlatformConfig) {
     this.r.__makeNative(platformConfig);
     this.g.__makeNative(platformConfig);