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

package/Libraries/Animated/AnimatedMock.js

@@ -0,0 +1,195 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {Numeric as AnimatedNumeric} from './AnimatedImplementation';
+import type {EndResult} from './animations/Animation';
+import type {EndCallback} from './animations/Animation';
+import type {DecayAnimationConfig} from './animations/DecayAnimation';
+import type {SpringAnimationConfig} from './animations/SpringAnimation';
+import type {TimingAnimationConfig} from './animations/TimingAnimation';
+
+import {AnimatedEvent, attachNativeEvent} from './AnimatedEvent';
+import AnimatedImplementation from './AnimatedImplementation';
+import createAnimatedComponent from './createAnimatedComponent';
+import AnimatedColor from './nodes/AnimatedColor';
+import AnimatedInterpolation from './nodes/AnimatedInterpolation';
+import AnimatedNode from './nodes/AnimatedNode';
+import AnimatedValue from './nodes/AnimatedValue';
+import AnimatedValueXY from './nodes/AnimatedValueXY';
+
+/**
+ * Animations are a source of flakiness in snapshot testing. This mock replaces
+ * animation functions from AnimatedImplementation with empty animations for
+ * predictability in tests. When possible the animation will run immediately
+ * to the final state.
+ */
+
+// Prevent any callback invocation from recursively triggering another
+// callback, which may trigger another animation
+let inAnimationCallback = false;
+function mockAnimationStart(
+  start: (callback?: ?EndCallback) => void,
+): (callback?: ?EndCallback) => void {
+  return callback => {
+    const guardedCallback =
+      callback == null
+        ? callback
+        : (...args: Array<EndResult>) => {
+            if (inAnimationCallback) {
+              console.warn(
+                'Ignoring recursive animation callback when running mock animations',
+              );
+              return;
+            }
+            inAnimationCallback = true;
+            try {
+              callback(...args);
+            } finally {
+              inAnimationCallback = false;
+            }
+          };
+    start(guardedCallback);
+  };
+}
+
+export type CompositeAnimation = {
+  start: (callback?: ?EndCallback) => void,
+  stop: () => void,
+  reset: () => void,
+  _startNativeLoop: (iterations?: number) => void,
+  _isUsingNativeDriver: () => boolean,
+  ...
+};
+
+const emptyAnimation = {
+  start: () => {},
+  stop: () => {},
+  reset: () => {},
+  _startNativeLoop: () => {},
+  _isUsingNativeDriver: () => {
+    return false;
+  },
+};
+
+const mockCompositeAnimation = (
+  animations: Array<CompositeAnimation>,
+): CompositeAnimation => ({
+  ...emptyAnimation,
+  start: mockAnimationStart((callback?: ?EndCallback): void => {
+    animations.forEach(animation => animation.start());
+    callback?.({finished: true});
+  }),
+});
+
+const spring = function (
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
+  config: SpringAnimationConfig,
+): CompositeAnimation {
+  const anyValue: any = value;
+  return {
+    ...emptyAnimation,
+    start: mockAnimationStart((callback?: ?EndCallback): void => {
+      anyValue.setValue(config.toValue);
+      callback?.({finished: true});
+    }),
+  };
+};
+
+const timing = function (
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
+  config: TimingAnimationConfig,
+): CompositeAnimation {
+  const anyValue: any = value;
+  return {
+    ...emptyAnimation,
+    start: mockAnimationStart((callback?: ?EndCallback): void => {
+      anyValue.setValue(config.toValue);
+      callback?.({finished: true});
+    }),
+  };
+};
+
+const decay = function (
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
+  config: DecayAnimationConfig,
+): CompositeAnimation {
+  return emptyAnimation;
+};
+
+const sequence = function (
+  animations: Array<CompositeAnimation>,
+): CompositeAnimation {
+  return mockCompositeAnimation(animations);
+};
+
+type ParallelConfig = {stopTogether?: boolean, ...};
+const parallel = function (
+  animations: Array<CompositeAnimation>,
+  config?: ?ParallelConfig,
+): CompositeAnimation {
+  return mockCompositeAnimation(animations);
+};
+
+const delay = function (time: number): CompositeAnimation {
+  return emptyAnimation;
+};
+
+const stagger = function (
+  time: number,
+  animations: Array<CompositeAnimation>,
+): CompositeAnimation {
+  return mockCompositeAnimation(animations);
+};
+
+type LoopAnimationConfig = {
+  iterations: number,
+  resetBeforeIteration?: boolean,
+  ...
+};
+
+const loop = function (
+  animation: CompositeAnimation,
+  // $FlowFixMe[prop-missing]
+  {iterations = -1}: LoopAnimationConfig = {},
+): CompositeAnimation {
+  return emptyAnimation;
+};
+
+export type {AnimatedNumeric as Numeric};
+
+export default {
+  Value: AnimatedValue,
+  ValueXY: AnimatedValueXY,
+  Color: AnimatedColor,
+  Interpolation: AnimatedInterpolation,
+  Node: AnimatedNode,
+  decay,
+  timing,
+  spring,
+  add: AnimatedImplementation.add,
+  subtract: AnimatedImplementation.subtract,
+  divide: AnimatedImplementation.divide,
+  multiply: AnimatedImplementation.multiply,
+  modulo: AnimatedImplementation.modulo,
+  diffClamp: AnimatedImplementation.diffClamp,
+  delay,
+  sequence,
+  parallel,
+  stagger,
+  loop,
+  event: AnimatedImplementation.event,
+  createAnimatedComponent,
+  attachNativeEvent,
+  forkEvent: AnimatedImplementation.forkEvent,
+  unforkEvent: AnimatedImplementation.unforkEvent,
+  Event: AnimatedEvent,
+};

package/Libraries/Animated/AnimatedPlatformConfig.js

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+export type PlatformConfig = {};

package/Libraries/Animated/AnimatedWeb.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import AnimatedImplementation from './AnimatedImplementation';
+
+export default {
+  ...AnimatedImplementation,
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
+  div: (AnimatedImplementation.createAnimatedComponent('div'): $FlowFixMe),
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
+  span: (AnimatedImplementation.createAnimatedComponent('span'): $FlowFixMe),
+  /* $FlowFixMe[incompatible-call] createAnimatedComponent expects to receive
+   * types. Plain intrinsic components can't be typed like this */
+  img: (AnimatedImplementation.createAnimatedComponent('img'): $FlowFixMe),
+};

package/Libraries/Animated/Easing.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+/**
+ * This class implements common easing functions. The math is pretty obscure,
+ * but this cool website has nice visual illustrations of what they represent:
+ * http://xaedes.de/dev/transitions/
+ */
+export type EasingFunction = (value: number) => number;
+export interface EasingStatic {
+  step0: EasingFunction;
+  step1: EasingFunction;
+  linear: EasingFunction;
+  ease: EasingFunction;
+  quad: EasingFunction;
+  cubic: EasingFunction;
+  poly(n: number): EasingFunction;
+  sin: EasingFunction;
+  circle: EasingFunction;
+  exp: EasingFunction;
+  elastic(bounciness: number): EasingFunction;
+  back(s: number): EasingFunction;
+  bounce: EasingFunction;
+  bezier(x1: number, y1: number, x2: number, y2: number): EasingFunction;
+  in(easing: EasingFunction): EasingFunction;
+  out(easing: EasingFunction): EasingFunction;
+  inOut(easing: EasingFunction): EasingFunction;
+}
+
+export type Easing = EasingStatic;
+export const Easing: EasingStatic;

package/Libraries/Animated/Easing.js

@@ -0,0 +1,250 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict
+ */
+
+'use strict';
+
+let ease;
+
+/**
+ * The `Easing` module implements common easing functions. This module is used
+ * by [Animate.timing()](docs/animate.html#timing) to convey physically
+ * believable motion in animations.
+ *
+ * You can find a visualization of some common easing functions at
+ * http://easings.net/
+ *
+ * ### Predefined animations
+ *
+ * The `Easing` module provides several predefined animations through the
+ * following methods:
+ *
+ * - [`back`](docs/easing.html#back) provides a simple animation where the
+ *   object goes slightly back before moving forward
+ * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation
+ * - [`ease`](docs/easing.html#ease) provides a simple inertial animation
+ * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
+ *
+ * ### Standard functions
+ *
+ * Three standard easing functions are provided:
+ *
+ * - [`linear`](docs/easing.html#linear)
+ * - [`quad`](docs/easing.html#quad)
+ * - [`cubic`](docs/easing.html#cubic)
+ *
+ * The [`poly`](docs/easing.html#poly) function can be used to implement
+ * quartic, quintic, and other higher power functions.
+ *
+ * ### Additional functions
+ *
+ * Additional mathematical functions are provided by the following methods:
+ *
+ * - [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
+ * - [`circle`](docs/easing.html#circle) provides a circular function
+ * - [`sin`](docs/easing.html#sin) provides a sinusoidal function
+ * - [`exp`](docs/easing.html#exp) provides an exponential function
+ *
+ * The following helpers are used to modify other easing functions.
+ *
+ * - [`in`](docs/easing.html#in) runs an easing function forwards
+ * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
+ * - [`out`](docs/easing.html#out) runs an easing function backwards
+ */
+const Easing = {
+  /**
+   * A stepping function, returns 1 for any positive value of `n`.
+   */
+  step0(n: number): number {
+    return n > 0 ? 1 : 0;
+  },
+
+  /**
+   * A stepping function, returns 1 if `n` is greater than or equal to 1.
+   */
+  step1(n: number): number {
+    return n >= 1 ? 1 : 0;
+  },
+
+  /**
+   * A linear function, `f(t) = t`. Position correlates to elapsed time one to
+   * one.
+   *
+   * http://cubic-bezier.com/#0,0,1,1
+   */
+  linear(t: number): number {
+    return t;
+  },
+
+  /**
+   * A simple inertial interaction, similar to an object slowly accelerating to
+   * speed.
+   *
+   * http://cubic-bezier.com/#.42,0,1,1
+   */
+  ease(t: number): number {
+    if (!ease) {
+      ease = Easing.bezier(0.42, 0, 1, 1);
+    }
+    return ease(t);
+  },
+
+  /**
+   * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
+   * time.
+   *
+   * http://easings.net/#easeInQuad
+   */
+  quad(t: number): number {
+    return t * t;
+  },
+
+  /**
+   * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
+   * time.
+   *
+   * http://easings.net/#easeInCubic
+   */
+  cubic(t: number): number {
+    return t * t * t;
+  },
+
+  /**
+   * A power function. Position is equal to the Nth power of elapsed time.
+   *
+   * n = 4: http://easings.net/#easeInQuart
+   * n = 5: http://easings.net/#easeInQuint
+   */
+  poly(n: number): (t: number) => number {
+    return (t: number) => Math.pow(t, n);
+  },
+
+  /**
+   * A sinusoidal function.
+   *
+   * http://easings.net/#easeInSine
+   */
+  sin(t: number): number {
+    return 1 - Math.cos((t * Math.PI) / 2);
+  },
+
+  /**
+   * A circular function.
+   *
+   * http://easings.net/#easeInCirc
+   */
+  circle(t: number): number {
+    return 1 - Math.sqrt(1 - t * t);
+  },
+
+  /**
+   * An exponential function.
+   *
+   * http://easings.net/#easeInExpo
+   */
+  exp(t: number): number {
+    return Math.pow(2, 10 * (t - 1));
+  },
+
+  /**
+   * A simple elastic interaction, similar to a spring oscillating back and
+   * forth.
+   *
+   * Default bounciness is 1, which overshoots a little bit once. 0 bounciness
+   * doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
+   * times.
+   *
+   * http://easings.net/#easeInElastic
+   */
+  elastic(bounciness: number = 1): (t: number) => number {
+    const p = bounciness * Math.PI;
+    return t => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+  },
+
+  /**
+   * Use with `Animated.parallel()` to create a simple effect where the object
+   * animates back slightly as the animation starts.
+   *
+   * https://easings.net/#easeInBack
+   */
+  back(s: number = 1.70158): (t: number) => number {
+    return t => t * t * ((s + 1) * t - s);
+  },
+
+  /**
+   * Provides a simple bouncing effect.
+   *
+   * http://easings.net/#easeInBounce
+   */
+  bounce(t: number): number {
+    if (t < 1 / 2.75) {
+      return 7.5625 * t * t;
+    }
+
+    if (t < 2 / 2.75) {
+      const t2 = t - 1.5 / 2.75;
+      return 7.5625 * t2 * t2 + 0.75;
+    }
+
+    if (t < 2.5 / 2.75) {
+      const t2 = t - 2.25 / 2.75;
+      return 7.5625 * t2 * t2 + 0.9375;
+    }
+
+    const t2 = t - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
+  },
+
+  /**
+   * Provides a cubic bezier curve, equivalent to CSS Transitions'
+   * `transition-timing-function`.
+   *
+   * A useful tool to visualize cubic bezier curves can be found at
+   * http://cubic-bezier.com/
+   */
+  bezier(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+  ): (t: number) => number {
+    const _bezier = require('./bezier').default;
+    return _bezier(x1, y1, x2, y2);
+  },
+
+  /**
+   * Runs an easing function forwards.
+   */
+  in(easing: (t: number) => number): (t: number) => number {
+    return easing;
+  },
+
+  /**
+   * Runs an easing function backwards.
+   */
+  out(easing: (t: number) => number): (t: number) => number {
+    return t => 1 - easing(1 - t);
+  },
+
+  /**
+   * Makes any easing function symmetrical. The easing function will run
+   * forwards for half of the duration, then backwards for the rest of the
+   * duration.
+   */
+  inOut(easing: (t: number) => number): (t: number) => number {
+    return t => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
+  },
+};
+
+export default Easing;

package/Libraries/Animated/NativeAnimatedAllowlist.js

@@ -0,0 +1,122 @@
+/**
+ * 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 Object.hasOwn(SUPPORTED_COLOR_STYLES, prop);
+}
+
+export function isSupportedInterpolationParam(param: string): boolean {
+  return Object.hasOwn(SUPPORTED_INTERPOLATION_PARAMS, param);
+}
+
+export function isSupportedStyleProp(prop: string): boolean {
+  return Object.hasOwn(SUPPORTED_STYLES, prop);
+}
+
+export function isSupportedTransformProp(prop: string): boolean {
+  return Object.hasOwn(SUPPORTED_TRANSFORMS, prop);
+}

package/Libraries/Animated/NativeAnimatedModule.js

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+export * from '../../src/private/specs/modules/NativeAnimatedModule';
+import NativeAnimatedModule from '../../src/private/specs/modules/NativeAnimatedModule';
+export default NativeAnimatedModule;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+export * from '../../src/private/specs/modules/NativeAnimatedTurboModule';
+import NativeAnimatedTurboModule from '../../src/private/specs/modules/NativeAnimatedTurboModule';
+export default NativeAnimatedTurboModule;