@office-iss/react-native-win32 0.0.0-canary.28 → 0.0.0-canary.281

package/Libraries/Image/ImageProps.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,21 +10,26 @@
 
 'use strict';
 
-import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
+import type {
+  ColorValue,
+  ImageStyleProp,
+  ViewStyleProp,
+} from '../StyleSheet/StyleSheet';
+import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
+import typeof Image from './Image';
+import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource} from './ImageSource';
-import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
-import type {DimensionValue} from '../StyleSheet/StyleSheetTypes';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {ElementRef, Node, RefSetter} from 'react';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
     source: $ReadOnly<{|
       width: number,
       height: number,
-      url: string,
+      uri: string,
     |}>,
-    uri?: string, // Only on Android
   |}>,
 >;
 
@@ -32,19 +37,19 @@ type IOSImageProps = $ReadOnly<{|
   /**
    * A static image to display while loading the image source.
    *
-   * See https://reactnative.dev/docs/image.html#defaultsource
+   * See https://reactnative.dev/docs/image#defaultsource
    */
   defaultSource?: ?ImageSource,
   /**
    * Invoked when a partial load of the image is complete.
    *
-   * See https://reactnative.dev/docs/image.html#onpartialload
+   * See https://reactnative.dev/docs/image#onpartialload
    */
   onPartialLoad?: ?() => void,
   /**
    * Invoked on download progress with `{nativeEvent: {loaded, total}}`.
    *
-   * See https://reactnative.dev/docs/image.html#onprogress
+   * See https://reactnative.dev/docs/image#onprogress
    */
   onProgress?: ?(
     event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>,
@@ -55,9 +60,25 @@ type AndroidImageProps = $ReadOnly<{|
   loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
   progressiveRenderingEnabled?: ?boolean,
   fadeDuration?: ?number,
+
+  /**
+   * The mechanism that should be used to resize the image when the image's
+   * dimensions differ from the image view's dimensions. Defaults to `'auto'`.
+   * See https://reactnative.dev/docs/image#resizemethod-android
+   */
+  resizeMethod?: ?('auto' | 'resize' | 'scale' | 'none'),
+
+  /**
+   * When the `resizeMethod` is set to `resize`, the destination dimensions are
+   * multiplied by this value. The `scale` method is used to perform the
+   * remainder of the resize.
+   * This is used to produce higher quality images when resizing to small dimensions.
+   * Defaults to 1.0.
+   */
+  resizeMultiplier?: ?number,
 |}>;
 
-export type ImageProps = {|
+export type ImageProps = $ReadOnly<{|
   ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSImageProps,
   ...AndroidImageProps,
@@ -65,34 +86,81 @@ export type ImageProps = {|
   /**
    * When true, indicates the image is an accessibility element.
    *
-   * See https://reactnative.dev/docs/image.html#accessible
+   * See https://reactnative.dev/docs/image#accessible
    */
   accessible?: ?boolean,
 
+  /**
+   * Internal prop to set an "Analytics Tag" that can will be set on the Image
+   */
+  internal_analyticTag?: ?string,
+
   /**
    * The text that's read by the screen reader when the user interacts with
    * the image.
    *
-   * See https://reactnative.dev/docs/image.html#accessibilitylabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
    */
   accessibilityLabel?: ?Stringish,
 
+  /**
+   * Alias for accessibilityLabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Represents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
+   *
+   * @platform android
+   */
+  'aria-labelledby'?: ?string,
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *
-   * See https://reactnative.dev/docs/image.html#blurradius
+   * See https://reactnative.dev/docs/image#blurradius
    */
   blurRadius?: ?number,
 
   /**
-   * See https://reactnative.dev/docs/image.html#capinsets
+   * See https://reactnative.dev/docs/image#capinsets
    */
   capInsets?: ?EdgeInsetsProp,
 
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: ?('anonymous' | 'use-credentials'),
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number,
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number,
+
   /**
    * Invoked on load error with `{nativeEvent: {error}}`.
    *
-   * See https://reactnative.dev/docs/image.html#onerror
+   * See https://reactnative.dev/docs/image#onerror
    */
   onError?: ?(
     event: SyntheticEvent<
@@ -106,7 +174,7 @@ export type ImageProps = {|
    * Invoked on mount and layout changes with
    * `{nativeEvent: {layout: {x, y, width, height}}}`.
    *
-   * See https://reactnative.dev/docs/image.html#onlayout
+   * See https://reactnative.dev/docs/image#onlayout
    */
 
   onLayout?: ?(event: LayoutEvent) => mixed,
@@ -114,57 +182,115 @@ export type ImageProps = {|
   /**
    * Invoked when load completes successfully.
    *
-   * See https://reactnative.dev/docs/image.html#onload
+   * See https://reactnative.dev/docs/image#onload
    */
   onLoad?: ?(event: ImageLoadEvent) => void,
 
   /**
    * Invoked when load either succeeds or fails.
    *
-   * See https://reactnative.dev/docs/image.html#onloadend
+   * See https://reactnative.dev/docs/image#onloadend
    */
   onLoadEnd?: ?() => void,
 
   /**
    * Invoked on load start.
    *
-   * See https://reactnative.dev/docs/image.html#onloadstart
+   * See https://reactnative.dev/docs/image#onloadstart
    */
   onLoadStart?: ?() => void,
 
-  /**
-   * See https://reactnative.dev/docs/image.html#resizemethod
-   */
-  resizeMethod?: ?('auto' | 'resize' | 'scale'),
-
   /**
    * The image source (either a remote URL or a local file resource).
    *
-   * See https://reactnative.dev/docs/image.html#source
+   * See https://reactnative.dev/docs/image#source
    */
   source?: ?ImageSource,
 
   /**
-   * See https://reactnative.dev/docs/image.html#style
+   * See https://reactnative.dev/docs/image#style
    */
   style?: ?ImageStyleProp,
 
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * Similar to referrerpolicy from HTML.
+   *
+   * See https://reactnative.dev/docs/image#referrerpolicy
+   */
+  referrerPolicy?: ?(
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url'
+  ),
+
   /**
    * Determines how to resize the image when the frame doesn't match the raw
    * image dimensions.
    *
-   * See https://reactnative.dev/docs/image.html#resizemode
+   * See https://reactnative.dev/docs/image#resizemode
    */
-  resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
+  resizeMode?: ?ImageResizeMode,
 
   /**
    * A unique identifier for this element to be used in UI Automation
    * testing scripts.
    *
-   * See https://reactnative.dev/docs/image.html#testid
+   * See https://reactnative.dev/docs/image#testid
    */
   testID?: ?string,
 
-  src?: empty,
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue,
+
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: ?string,
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: ?string,
   children?: empty,
-|};
+|}>;
+
+export type ImageBackgroundProps = $ReadOnly<{|
+  ...ImageProps,
+  children?: Node,
+
+  /**
+   * Style applied to the outer View component
+   *
+   * See https://reactnative.dev/docs/imagebackground#style
+   */
+  style?: ?ViewStyleProp,
+
+  /**
+   * Style applied to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imagestyle
+   */
+  imageStyle?: ?ImageStyleProp,
+
+  /**
+   * Allows to set a reference to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imageref
+   */
+  imageRef?: RefSetter<ElementRef<Image>>,
+|}>;

package/Libraries/Image/ImageResizeMode.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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
+ */
+
+export type ImageResizeMode =
+  | 'cover'
+  | 'contain'
+  | 'stretch'
+  | 'repeat'
+  | 'center'
+  | 'none';
+
+/**
+ * @see ImageResizeMode.js
+ */
+export interface ImageResizeModeStatic {
+  /**
+   * contain - The image will be resized such that it will be completely
+   * visible, contained within the frame of the View.
+   */
+  contain: ImageResizeMode;
+  /**
+   * cover - The image will be resized such that the entire area of the view
+   * is covered by the image, potentially clipping parts of the image.
+   */
+  cover: ImageResizeMode;
+  /**
+   * stretch - The image will be stretched to fill the entire frame of the
+   * view without clipping.  This may change the aspect ratio of the image,
+   * distoring it.  Only supported on iOS.
+   */
+  stretch: ImageResizeMode;
+  /**
+   * center - The image will be scaled down such that it is completely visible,
+   * if bigger than the area of the view.
+   * The image will not be scaled up.
+   */
+  center: ImageResizeMode;
+
+  /**
+   * repeat - The image will be repeated to cover the frame of the View. The
+   * image will keep it's size and aspect ratio.
+   */
+  repeat: ImageResizeMode;
+
+  /**
+   * none - The image will be displayed at its intrinsic size, which means the
+   * image will not be scaled up or down.
+   */
+  none: ImageResizeMode;
+}

package/Libraries/Image/ImageResizeMode.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -33,4 +33,7 @@ export type ImageResizeMode =
 
   // Resize by stretching it to fill the entire frame of the view without
   // clipping. This may change the aspect ratio of the image, distorting it.
-  | 'stretch';
+  | 'stretch'
+
+  // The image will not be resized at all.
+  | 'none';

package/Libraries/Image/ImageSource.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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
+ */
+
+/*
+ * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSource.js
+ */
+export interface ImageURISource {
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
+  uri?: string | undefined;
+  /**
+   * `bundle` is the iOS asset bundle which the image is included in. This
+   * will default to [NSBundle mainBundle] if not set.
+   * @platform ios
+   */
+  bundle?: string | undefined;
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  method?: string | undefined;
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  headers?: {[key: string]: string} | undefined;
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * its age or expiration date. If there is no existing data in the cache corresponding
+   * to a URL load request, no attempt is made to load the data from the originating source,
+   * and the load is considered to have failed.
+   */
+  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined;
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
+  body?: string | undefined;
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
+  width?: number | undefined;
+  height?: number | undefined;
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
+  scale?: number | undefined;
+}
+
+export type ImageRequireSource = number;

package/Libraries/Image/ImageSource.js

@@ -1,49 +1,53 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
+ * @flow strict
  * @format
  */
 
 'use strict';
 
-// This is to sync with ImageSourcePropTypes.js.
-// We explicitly don't want this to be strict so that we can pass in objects
-// that might have more keys. This also has to be inexact to support taking
-// instances of classes like FBIcon.
-// https://fburl.com/8lynhvtw
-export type ImageURISource = $ReadOnly<{
+/**
+ * This type is intentionally inexact in order to permit call sites that supply
+ * extra properties.
+ */
+export interface ImageURISource {
   /**
    * `uri` is a string representing the resource identifier for the image, which
    * could be an http address, a local file path, or the name of a static image
    * resource (which should be wrapped in the `require('./path/to/image.png')`
    * function).
    */
-  uri?: ?string,
+  +uri?: ?string;
+
   /**
    * `bundle` is the iOS asset bundle which the image is included in. This
    * will default to [NSBundle mainBundle] if not set.
    * @platform ios
    */
-  bundle?: ?string,
+  +bundle?: ?string;
+
   /**
    * `method` is the HTTP Method to use. Defaults to GET if not specified.
    */
-  method?: ?string,
+  +method?: ?string;
+
   /**
    * `headers` is an object representing the HTTP headers to send along with the
    * request for a remote image.
    */
-  headers?: ?Object,
+  +headers?: ?{[string]: string};
+
   /**
    * `body` is the HTTP body to send with the request. This must be a valid
    * UTF-8 string, and will be sent exactly as specified, with no
    * additional encoding (e.g. URL-escaping or base64) applied.
    */
-  body?: ?string,
+  +body?: ?string;
+
   /**
    * `cache` determines how the requests handles potentially cached
    * responses.
@@ -61,25 +65,71 @@ export type ImageURISource = $ReadOnly<{
    * its age or expiration date. If there is no existing data in the cache corresponding
    * to a URL load request, no attempt is made to load the data from the originating source,
    * and the load is considered to have failed.
-   *
-   * @platform ios
    */
-  cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  +cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached');
+
   /**
    * `width` and `height` can be specified if known at build time, in which case
    * these will be used to set the default `<Image/>` component dimensions.
    */
-  width?: ?number,
-  height?: ?number,
+  +width?: ?number;
+  +height?: ?number;
+
   /**
    * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
    * unspecified, meaning that one image pixel equates to one display point / DIP.
    */
+  +scale?: ?number;
+}
+
+export type ImageSource =
+  | number
+  | ImageURISource
+  | $ReadOnlyArray<ImageURISource>;
+
+type ImageSourceProperties = {
+  body?: ?string,
+  bundle?: ?string,
+  cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  headers?: ?{[string]: string},
+  height?: ?number,
+  method?: ?string,
   scale?: ?number,
+  uri?: ?string,
+  width?: ?number,
   ...
-}>;
+};
 
-// We have to export any because of an issue in Flow with objects that come from Relay:
-// https://fburl.com/8ljo5tmr
-// https://fb.facebook.com/groups/flow/permalink/1824103160971624/
-export type ImageSource = ImageURISource | number | Array<ImageURISource>;
+export function getImageSourceProperties(
+  imageSource: ImageURISource,
+): $ReadOnly<ImageSourceProperties> {
+  const object: ImageSourceProperties = {};
+  if (imageSource.body != null) {
+    object.body = imageSource.body;
+  }
+  if (imageSource.bundle != null) {
+    object.bundle = imageSource.bundle;
+  }
+  if (imageSource.cache != null) {
+    object.cache = imageSource.cache;
+  }
+  if (imageSource.headers != null) {
+    object.headers = imageSource.headers;
+  }
+  if (imageSource.height != null) {
+    object.height = imageSource.height;
+  }
+  if (imageSource.method != null) {
+    object.method = imageSource.method;
+  }
+  if (imageSource.scale != null) {
+    object.scale = imageSource.scale;
+  }
+  if (imageSource.uri != null) {
+    object.uri = imageSource.uri;
+  }
+  if (imageSource.width != null) {
+    object.width = imageSource.width;
+  }
+  return object;
+}

package/Libraries/Image/ImageSourceUtils.js

@@ -0,0 +1,80 @@
+/**
+ * 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';
+
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageProps} from './ImageProps';
+
+import resolveAssetSource from './resolveAssetSource';
+
+/**
+ * A function which returns the appropriate value for image source
+ * by resolving the `source`, `src` and `srcSet` props.
+ */
+export function getImageSourcesFromImageProps(
+  imageProps: ImageProps,
+): ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> {
+  let source = resolveAssetSource(imageProps.source);
+
+  let sources;
+
+  const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps;
+
+  const headers: {[string]: string} = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = 'true';
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  if (srcSet != null) {
+    const sourceList = [];
+    const srcSetList = srcSet.split(', ');
+    // `src` prop should be used with default scale if `srcSet` does not have 1x scale.
+    let shouldUseSrcForDefaultScale = true;
+    srcSetList.forEach(imageSrc => {
+      const [uri, xScale = '1x'] = imageSrc.split(' ');
+      if (!xScale.endsWith('x')) {
+        console.warn(
+          'The provided format for scale is not supported yet. Please use scales like 1x, 2x, etc.',
+        );
+      } else {
+        const scale = parseInt(xScale.split('x')[0], 10);
+        if (!isNaN(scale)) {
+          // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided.
+          shouldUseSrcForDefaultScale =
+            scale === 1 ? false : shouldUseSrcForDefaultScale;
+          sourceList.push({headers: headers, scale, uri, width, height});
+        }
+      }
+    });
+
+    if (shouldUseSrcForDefaultScale && src != null) {
+      sourceList.push({
+        headers: headers,
+        scale: 1,
+        uri: src,
+        width,
+        height,
+      });
+    }
+    if (sourceList.length === 0) {
+      console.warn('The provided value for srcSet is not valid.');
+    }
+
+    sources = sourceList;
+  } else if (src != null) {
+    sources = [{uri: src, headers: headers, width, height}];
+  } else {
+    sources = source;
+  }
+  return sources;
+}