@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.286

package/Libraries/Animated/useAnimatedProps.js

@@ -8,301 +8,11 @@
  * @format
  */
 
-import type {EventSubscription} from '../EventEmitter/NativeEventEmitter';
-import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+import type {AnimatedPropsHook} from '../../src/private/animated/createAnimatedPropsHook';
 
-import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
-import {useAnimatedPropsMemo} from '../../src/private/animated/useAnimatedPropsMemo';
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
-import useRefEffect from '../Utilities/useRefEffect';
-import {AnimatedEvent} from './AnimatedEvent';
-import AnimatedNode from './nodes/AnimatedNode';
-import AnimatedProps from './nodes/AnimatedProps';
-import AnimatedValue from './nodes/AnimatedValue';
-import {
-  useCallback,
-  useEffect,
-  useInsertionEffect,
-  useReducer,
-  useRef,
-} from 'react';
-
-type ReducedProps<TProps> = {
-  ...TProps,
-  collapsable: boolean,
-  ...
-};
-type CallbackRef<T> = T => mixed;
-
-type UpdateCallback = () => void;
-
-type AnimatedValueListeners = Array<{
-  propValue: AnimatedValue,
-  listenerId: string,
-}>;
-
-export default function useAnimatedProps<TProps: {...}, TInstance>(
-  props: TProps,
-  allowlist?: ?AnimatedPropsAllowlist,
-): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
-  const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
-  const onUpdateRef = useRef<UpdateCallback | null>(null);
-  const timerRef = useRef<TimeoutID | null>(null);
-
-  const node = useAnimatedPropsMemo(
-    () => new AnimatedProps(props, () => onUpdateRef.current?.(), allowlist),
-    [allowlist, props],
-  );
-
-  const useNativePropsInFabric =
-    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-
-  useAnimatedPropsLifecycle(node);
-
-  // TODO: This "effect" does three things:
-  //
-  //   1) Call `setNativeView`.
-  //   2) Update `onUpdateRef`.
-  //   3) Update listeners for `AnimatedEvent` props.
-  //
-  // Ideally, each of these would be separate "effects" so that they are not
-  // unnecessarily re-run when irrelevant dependencies change. For example, we
-  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
-  // the `AnimatedEvent` props change or `instance` changes.
-  //
-  // But there is no way to transparently compose three separate callback refs,
-  // so we just combine them all into one for now.
-  const refEffect = useCallback(
-    (instance: TInstance) => {
-      // NOTE: This may be called more often than necessary (e.g. when `props`
-      // changes), but `setNativeView` already optimizes for that.
-      node.setNativeView(instance);
-
-      // NOTE: When using the JS animation driver, this callback is called on
-      // every animation frame. When using the native driver, this callback is
-      // called when the animation completes.
-      onUpdateRef.current = () => {
-        if (process.env.NODE_ENV === 'test') {
-          // Check 1: this is a test.
-          // call `scheduleUpdate` to bypass use of setNativeProps.
-          return scheduleUpdate();
-        }
-
-        const isFabricNode = isFabricInstance(instance);
-        if (node.__isNative) {
-          // Check 2: this is an animation driven by native.
-          // In native driven animations, this callback is only called once the animation completes.
-          if (isFabricNode) {
-            // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
-            // Must not be called in Paper.
-            scheduleUpdate();
-          }
-          return;
-        }
-
-        if (
-          typeof instance !== 'object' ||
-          typeof instance?.setNativeProps !== 'function'
-        ) {
-          // Check 3: the instance does not support setNativeProps. Call `scheduleUpdate`.
-          return scheduleUpdate();
-        }
-
-        if (!isFabricNode) {
-          // Check 4: this is a paper instance, call setNativeProps.
-          // $FlowIgnore[not-a-function] - Assume it's still a function.
-          // $FlowFixMe[incompatible-use]
-          return instance.setNativeProps(node.__getAnimatedValue());
-        }
-
-        if (!useNativePropsInFabric) {
-          // Check 5: setNativeProps are disabled.
-          return scheduleUpdate();
-        }
-
-        // This is a Fabric instance and setNativeProps is supported.
-
-        // $FlowIgnore[not-a-function] - Assume it's still a function.
-        // $FlowFixMe[incompatible-use]
-        instance.setNativeProps(node.__getAnimatedValue());
-
-        // Keeping state of Fiber tree and Shadow tree in sync.
-        //
-        // This is done by calling `scheduleUpdate` which will trigger a commit.
-        // However, React commit is not fast enough to drive animations.
-        // This is where setNativeProps comes in handy but the state between
-        // Fiber tree and Shadow tree needs to be kept in sync.
-        // The goal is to call `scheduleUpdate` as little as possible to maintain
-        // performance but frequently enough to keep state in sync.
-        // Debounce is set to 48ms, which is 3 * the duration of a frame.
-        // 3 frames was the highest value where flickering state was not observed.
-        if (timerRef.current != null) {
-          clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(() => {
-          timerRef.current = null;
-          scheduleUpdate();
-        }, 48);
-      };
-
-      const target = getEventTarget(instance);
-      const events = [];
-      const animatedValueListeners: AnimatedValueListeners = [];
-
-      for (const propName in props) {
-        // $FlowFixMe[invalid-computed-prop]
-        const propValue = props[propName];
-        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
-          propValue.__attach(target, propName);
-          events.push([propName, propValue]);
-          // $FlowFixMe[incompatible-call] - the `addListenersToPropsValue` drills down the propValue.
-          addListenersToPropsValue(propValue, animatedValueListeners);
-        }
-      }
-
-      return () => {
-        onUpdateRef.current = null;
-
-        for (const [propName, propValue] of events) {
-          propValue.__detach(target, propName);
-        }
-
-        for (const {propValue, listenerId} of animatedValueListeners) {
-          propValue.removeListener(listenerId);
-        }
-      };
-    },
-    [node, useNativePropsInFabric, props],
-  );
-  const callbackRef = useRefEffect<TInstance>(refEffect);
-
-  return [reduceAnimatedProps<TProps>(node, props), callbackRef];
-}
-
-function reduceAnimatedProps<TProps>(
-  node: AnimatedProps,
-  props: TProps,
-): ReducedProps<TProps> {
-  // Force `collapsable` to be false so that the native view is not flattened.
-  // Flattened views cannot be accurately referenced by the native driver.
-  return {
-    ...node.__getValueWithStaticProps(props),
-    collapsable: false,
-  };
-}
-
-function addListenersToPropsValue(
-  propValue: AnimatedValue,
-  accumulator: AnimatedValueListeners,
-) {
-  // propValue can be a scalar value, an array or an object.
-  if (propValue instanceof AnimatedValue) {
-    const listenerId = propValue.addListener(() => {});
-    accumulator.push({propValue, listenerId});
-  } else if (Array.isArray(propValue)) {
-    // An array can be an array of scalar values, arrays of arrays, or arrays of objects
-    for (const prop of propValue) {
-      addListenersToPropsValue(prop, accumulator);
-    }
-  } else if (propValue instanceof Object) {
-    addAnimatedValuesListenersToProps(propValue, accumulator);
-  }
-}
-
-function addAnimatedValuesListenersToProps(
-  props: AnimatedNode,
-  accumulator: AnimatedValueListeners,
-) {
-  for (const propName in props) {
-    // $FlowFixMe[prop-missing] - This is an object contained in a prop, but we don't know the exact type.
-    const propValue = props[propName];
-    addListenersToPropsValue(propValue, accumulator);
-  }
-}
+import createAnimatedPropsHook from '../../src/private/animated/createAnimatedPropsHook';
 
 /**
- * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
- * and `__detach`. However, this is more complicated because `AnimatedProps`
- * uses reference counting to determine when to recursively detach its children
- * nodes. So in order to optimize this, we avoid detaching until the next attach
- * unless we are unmounting.
+ * @deprecated
  */
-function useAnimatedPropsLifecycle(node: AnimatedProps): void {
-  const prevNodeRef = useRef<?AnimatedProps>(null);
-  const isUnmountingRef = useRef<boolean>(false);
-
-  useEffect(() => {
-    // It is ok for multiple components to call `flushQueue` because it noops
-    // if the queue is empty. When multiple animated components are mounted at
-    // the same time. Only first component flushes the queue and the others will noop.
-    NativeAnimatedHelper.API.flushQueue();
-    let drivenAnimationEndedListener: ?EventSubscription = null;
-    if (node.__isNative) {
-      drivenAnimationEndedListener =
-        NativeAnimatedHelper.nativeEventEmitter.addListener(
-          'onUserDrivenAnimationEnded',
-          data => {
-            node.update();
-          },
-        );
-    }
-
-    return () => {
-      drivenAnimationEndedListener?.remove();
-    };
-  });
-
-  useInsertionEffect(() => {
-    isUnmountingRef.current = false;
-    return () => {
-      isUnmountingRef.current = true;
-    };
-  }, []);
-
-  useInsertionEffect(() => {
-    node.__attach();
-    if (prevNodeRef.current != null) {
-      const prevNode = prevNodeRef.current;
-      // TODO: Stop restoring default values (unless `reset` is called).
-      prevNode.__restoreDefaultValues();
-      prevNode.__detach();
-      prevNodeRef.current = null;
-    }
-    return () => {
-      if (isUnmountingRef.current) {
-        // NOTE: Do not restore default values on unmount, see D18197735.
-        node.__detach();
-      } else {
-        prevNodeRef.current = node;
-      }
-    };
-  }, [node]);
-}
-
-function getEventTarget<TInstance>(instance: TInstance): TInstance {
-  return typeof instance === 'object' &&
-    typeof instance?.getScrollableNode === 'function'
-    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
-      instance.getScrollableNode()
-    : instance;
-}
-
-// $FlowFixMe[unclear-type] - Legacy instance assumptions.
-function isFabricInstance(instance: any): boolean {
-  return (
-    isFabricPublicInstance(instance) ||
-    // 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 instance would actually be the underlying host component and the above check
-    // would be sufficient.
-    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
-    isFabricPublicInstance(
-      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
-    )
-  );
-}
+export default createAnimatedPropsHook(null) as AnimatedPropsHook;

package/Libraries/AppState/AppState.js

@@ -14,17 +14,33 @@ import Platform from '../Utilities/Platform';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeAppState from './NativeAppState';
 
-export type AppStateValues = 'inactive' | 'background' | 'active';
+/**
+ * active - The app is running in the foreground
+ * background - The app is running in the background. The user is either:
+ *   - in another app
+ *   - on the home screen
+ *   - @platform android - on another Activity (even if it was launched by your app)
+ * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+ */
+export type AppStateStatus = 'inactive' | 'background' | 'active';
 
+/**
+ * change - This even is received when the app state has changed.
+ * memoryWarning - This event is used in the need of throwing memory warning or releasing it.
+ * @platform android - focus - Received when the app gains focus (the user is interacting with the app).
+ * @platform android - blur - Received when the user is not actively interacting with the app.
+ */
 type AppStateEventDefinitions = {
-  change: [AppStateValues],
+  change: [AppStateStatus],
   memoryWarning: [],
   blur: [],
   focus: [],
 };
 
+export type AppStateEvent = $Keys<AppStateEventDefinitions>;
+
 type NativeAppStateEventDefinitions = {
-  appStateDidChange: [{app_state: AppStateValues}],
+  appStateDidChange: [{app_state: AppStateStatus}],
   appStateFocusChange: [boolean],
   memoryWarning: [],
 };
@@ -35,7 +51,7 @@ type NativeAppStateEventDefinitions = {
  *
  * See https://reactnative.dev/docs/appstate
  */
-class AppState {
+class AppStateImpl {
   currentState: ?string = null;
   isAvailable: boolean;
 
@@ -89,7 +105,7 @@ class AppState {
    *
    * See https://reactnative.dev/docs/appstate#addeventlistener
    */
-  addEventListener<K: $Keys<AppStateEventDefinitions>>(
+  addEventListener<K: AppStateEvent>(
     type: K,
     handler: (...$ElementType<AppStateEventDefinitions, K>) => void,
   ): EventSubscription {
@@ -100,7 +116,7 @@ class AppState {
     switch (type) {
       case 'change':
         // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
-        const changeHandler: AppStateValues => void = handler;
+        const changeHandler: AppStateStatus => void = handler;
         return emitter.addListener('appStateDidChange', appStateData => {
           changeHandler(appStateData.app_state);
         });
@@ -125,4 +141,5 @@ class AppState {
   }
 }
 
-export default (new AppState(): AppState);
+const AppState: AppStateImpl = new AppStateImpl();
+export default AppState;

package/Libraries/AppState/NativeAppState.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../src/private/specs/modules/NativeAppState';
-import NativeAppState from '../../src/private/specs/modules/NativeAppState';
+export * from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
+import NativeAppState from '../../src/private/specs_DEPRECATED/modules/NativeAppState';
 export default NativeAppState;

package/Libraries/BatchedBridge/MessageQueue.js

@@ -11,9 +11,10 @@
 'use strict';
 
 const Systrace = require('../Performance/Systrace');
-const deepFreezeAndThrowOnMutationInDev = require('../Utilities/deepFreezeAndThrowOnMutationInDev');
+const deepFreezeAndThrowOnMutationInDev =
+  require('../Utilities/deepFreezeAndThrowOnMutationInDev').default;
 const stringifySafe = require('../Utilities/stringifySafe').default;
-const warnOnce = require('../Utilities/warnOnce');
+const warnOnce = require('../Utilities/warnOnce').default;
 const ErrorUtils = require('../vendor/core/ErrorUtils').default;
 const invariant = require('invariant');
 

package/Libraries/BatchedBridge/NativeModules.js

@@ -187,7 +187,8 @@ if (global.nativeModuleProxy) {
     '__fbBatchedBridgeConfig is not set, cannot invoke native modules',
   );
 
-  const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
+  const defineLazyObjectProperty =
+    require('../Utilities/defineLazyObjectProperty').default;
   (bridgeConfig.remoteModuleConfig || []).forEach(
     (config: ModuleConfig, moduleID: number) => {
       // Initially this config will only contain the module name when running in JSC. The actual

package/Libraries/Blob/Blob.js

@@ -81,7 +81,7 @@ class Blob {
     return this._data;
   }
 
-  slice(start?: number, end?: number, contentType: string = ''): Blob {
+  slice(start?: number, end?: number, contentType?: string = ''): Blob {
     const BlobManager = require('./BlobManager').default;
     let {offset, size} = this.data;
 

package/Libraries/Blob/FileReader.js

@@ -8,179 +8,13 @@
  * @format
  */
 
-import type Blob from './Blob';
+import typeof FileReader from './FileReader_old';
 
-import NativeFileReaderModule from './NativeFileReaderModule';
-import {toByteArray} from 'base64-js';
-import EventTarget from 'event-target-shim';
+// Use a global instead of a flag from ReactNativeFeatureFlags because this will
+// be read before apps have a chance to set overrides.
+const useBuiltInEventTarget = global.RN$useBuiltInEventTarget?.();
 
-type ReadyState =
-  | 0 // EMPTY
-  | 1 // LOADING
-  | 2; // DONE
-
-type ReaderResult = string | ArrayBuffer;
-
-const READER_EVENTS = [
-  'abort',
-  'error',
-  'load',
-  'loadstart',
-  'loadend',
-  'progress',
-];
-
-const EMPTY = 0;
-const LOADING = 1;
-const DONE = 2;
-
-class FileReader extends (EventTarget(...READER_EVENTS): typeof EventTarget) {
-  static EMPTY: number = EMPTY;
-  static LOADING: number = LOADING;
-  static DONE: number = DONE;
-
-  EMPTY: number = EMPTY;
-  LOADING: number = LOADING;
-  DONE: number = DONE;
-
-  _readyState: ReadyState;
-  _error: ?Error;
-  _result: ?ReaderResult;
-  _aborted: boolean = false;
-
-  constructor() {
-    super();
-    this._reset();
-  }
-
-  _reset(): void {
-    this._readyState = EMPTY;
-    this._error = null;
-    this._result = null;
-  }
-
-  _setReadyState(newState: ReadyState) {
-    this._readyState = newState;
-    this.dispatchEvent({type: 'readystatechange'});
-    if (newState === DONE) {
-      if (this._aborted) {
-        this.dispatchEvent({type: 'abort'});
-      } else if (this._error) {
-        this.dispatchEvent({type: 'error'});
-      } else {
-        this.dispatchEvent({type: 'load'});
-      }
-      this.dispatchEvent({type: 'loadend'});
-    }
-  }
-
-  readAsArrayBuffer(blob: ?Blob): void {
-    this._aborted = false;
-
-    if (blob == null) {
-      throw new TypeError(
-        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
-      );
-    }
-
-    NativeFileReaderModule.readAsDataURL(blob.data).then(
-      (text: string) => {
-        if (this._aborted) {
-          return;
-        }
-
-        const base64 = text.split(',')[1];
-        const typedArray = toByteArray(base64);
-
-        this._result = typedArray.buffer;
-        this._setReadyState(DONE);
-      },
-      error => {
-        if (this._aborted) {
-          return;
-        }
-        this._error = error;
-        this._setReadyState(DONE);
-      },
-    );
-  }
-
-  readAsDataURL(blob: ?Blob): void {
-    this._aborted = false;
-
-    if (blob == null) {
-      throw new TypeError(
-        "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'",
-      );
-    }
-
-    NativeFileReaderModule.readAsDataURL(blob.data).then(
-      (text: string) => {
-        if (this._aborted) {
-          return;
-        }
-        this._result = text;
-        this._setReadyState(DONE);
-      },
-      error => {
-        if (this._aborted) {
-          return;
-        }
-        this._error = error;
-        this._setReadyState(DONE);
-      },
-    );
-  }
-
-  readAsText(blob: ?Blob, encoding: string = 'UTF-8'): void {
-    this._aborted = false;
-
-    if (blob == null) {
-      throw new TypeError(
-        "Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'",
-      );
-    }
-
-    NativeFileReaderModule.readAsText(blob.data, encoding).then(
-      (text: string) => {
-        if (this._aborted) {
-          return;
-        }
-        this._result = text;
-        this._setReadyState(DONE);
-      },
-      error => {
-        if (this._aborted) {
-          return;
-        }
-        this._error = error;
-        this._setReadyState(DONE);
-      },
-    );
-  }
-
-  abort() {
-    this._aborted = true;
-    // only call onreadystatechange if there is something to abort, as per spec
-    if (this._readyState !== EMPTY && this._readyState !== DONE) {
-      this._reset();
-      this._setReadyState(DONE);
-    }
-    // Reset again after, in case modified in handler
-    this._reset();
-  }
-
-  get readyState(): ReadyState {
-    return this._readyState;
-  }
-
-  get error(): ?Error {
-    return this._error;
-  }
-
-  get result(): ?ReaderResult {
-    return this._result;
-  }
-}
-
-export default FileReader;
+export default (useBuiltInEventTarget
+  ? // $FlowExpectedError[incompatible-cast]
+    require('./FileReader_new').default
+  : require('./FileReader_old').default) as FileReader;