@hps1978/react-native-web-tv 0.21.2-tv.0

package/src/exports/Image/index.js

@@ -0,0 +1,443 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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
+ */
+
+'use client';
+
+import type { ImageProps } from './types';
+
+import * as React from 'react';
+import createElement from '../createElement';
+import { getAssetByID } from '../../modules/AssetRegistry';
+import { createBoxShadowValue } from '../StyleSheet/preprocess';
+import ImageLoader from '../../modules/ImageLoader';
+import PixelRatio from '../PixelRatio';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from '../Text/TextAncestorContext';
+import View from '../View';
+import { warnOnce } from '../../modules/warnOnce';
+
+export type { ImageProps };
+
+const ERRORED = 'ERRORED';
+const LOADED = 'LOADED';
+const LOADING = 'LOADING';
+const IDLE = 'IDLE';
+
+let _filterId = 0;
+const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
+
+function createTintColorSVG(tintColor, id) {
+  return tintColor && id != null ? (
+    <svg
+      style={{
+        position: 'absolute',
+        height: 0,
+        visibility: 'hidden',
+        width: 0
+      }}
+    >
+      <defs>
+        <filter id={`tint-${id}`} suppressHydrationWarning={true}>
+          <feFlood floodColor={`${tintColor}`} key={tintColor} />
+          <feComposite in2="SourceAlpha" operator="in" />
+        </filter>
+      </defs>
+    </svg>
+  ) : null;
+}
+
+function extractNonStandardStyleProps(
+  style,
+  blurRadius,
+  filterId,
+  tintColorProp
+) {
+  const flatStyle = StyleSheet.flatten(style);
+  const { filter, resizeMode, shadowOffset, tintColor } = flatStyle;
+
+  if (flatStyle.resizeMode) {
+    warnOnce(
+      'Image.style.resizeMode',
+      'Image: style.resizeMode is deprecated. Please use props.resizeMode.'
+    );
+  }
+  if (flatStyle.tintColor) {
+    warnOnce(
+      'Image.style.tintColor',
+      'Image: style.tintColor is deprecated. Please use props.tintColor.'
+    );
+  }
+
+  // Add CSS filters
+  // React Native exposes these features as props and proprietary styles
+  const filters = [];
+  let _filter = null;
+
+  if (filter) {
+    filters.push(filter);
+  }
+  if (blurRadius) {
+    filters.push(`blur(${blurRadius}px)`);
+  }
+  if (shadowOffset) {
+    const shadowString = createBoxShadowValue(flatStyle);
+    if (shadowString) {
+      filters.push(`drop-shadow(${shadowString})`);
+    }
+  }
+  if ((tintColorProp || tintColor) && filterId != null) {
+    filters.push(`url(#tint-${filterId})`);
+  }
+
+  if (filters.length > 0) {
+    _filter = filters.join(' ');
+  }
+
+  return [resizeMode, _filter, tintColor];
+}
+
+function resolveAssetDimensions(source) {
+  if (typeof source === 'number') {
+    const { height, width } = getAssetByID(source);
+    return { height, width };
+  } else if (
+    source != null &&
+    !Array.isArray(source) &&
+    typeof source === 'object'
+  ) {
+    const { height, width } = source;
+    return { height, width };
+  }
+}
+
+function resolveAssetUri(source): ?string {
+  let uri = null;
+  if (typeof source === 'number') {
+    // get the URI from the packager
+    const asset = getAssetByID(source);
+    if (asset == null) {
+      throw new Error(
+        `Image: asset with ID "${source}" could not be found. Please check the image source or packager.`
+      );
+    }
+    let scale = asset.scales[0];
+    if (asset.scales.length > 1) {
+      const preferredScale = PixelRatio.get();
+      // Get the scale which is closest to the preferred scale
+      scale = asset.scales.reduce((prev, curr) =>
+        Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale)
+          ? curr
+          : prev
+      );
+    }
+    const scaleSuffix = scale !== 1 ? `@${scale}x` : '';
+    uri = asset
+      ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}`
+      : '';
+  } else if (typeof source === 'string') {
+    uri = source;
+  } else if (source && typeof source.uri === 'string') {
+    uri = source.uri;
+  }
+
+  if (uri) {
+    const match = uri.match(svgDataUriPattern);
+    // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
+    if (match) {
+      const [, prefix, svg] = match;
+      const encodedSvg = encodeURIComponent(svg);
+      return `${prefix}${encodedSvg}`;
+    }
+  }
+
+  return uri;
+}
+
+interface ImageStatics {
+  getSize: (
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure: () => void
+  ) => void;
+  prefetch: (uri: string) => Promise<void>;
+  queryCache: (
+    uris: Array<string>
+  ) => Promise<{| [uri: string]: 'disk/memory' |}>;
+}
+
+const Image: React.AbstractComponent<
+  ImageProps,
+  React.ElementRef<typeof View>
+> = React.forwardRef((props, ref) => {
+  const {
+    'aria-label': _ariaLabel,
+    accessibilityLabel,
+    blurRadius,
+    defaultSource,
+    draggable,
+    onError,
+    onLayout,
+    onLoad,
+    onLoadEnd,
+    onLoadStart,
+    pointerEvents,
+    source,
+    style,
+    ...rest
+  } = props;
+  const ariaLabel = _ariaLabel || accessibilityLabel;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.children) {
+      throw new Error(
+        'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.'
+      );
+    }
+  }
+
+  const [state, updateState] = React.useState(() => {
+    const uri = resolveAssetUri(source);
+    if (uri != null) {
+      const isLoaded = ImageLoader.has(uri);
+      if (isLoaded) {
+        return LOADED;
+      }
+    }
+    return IDLE;
+  });
+
+  const [layout, updateLayout] = React.useState({});
+  const hasTextAncestor = React.useContext(TextAncestorContext);
+  const hiddenImageRef = React.useRef(null);
+  const filterRef = React.useRef(_filterId++);
+  const requestRef = React.useRef(null);
+  const shouldDisplaySource =
+    state === LOADED || (state === LOADING && defaultSource == null);
+  const [_resizeMode, filter, _tintColor] = extractNonStandardStyleProps(
+    style,
+    blurRadius,
+    filterRef.current,
+    props.tintColor
+  );
+  const resizeMode = props.resizeMode || _resizeMode || 'cover';
+  const tintColor = props.tintColor || _tintColor;
+  const selectedSource = shouldDisplaySource ? source : defaultSource;
+  const displayImageUri = resolveAssetUri(selectedSource);
+  const imageSizeStyle = resolveAssetDimensions(selectedSource);
+  const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
+  const backgroundSize = getBackgroundSize();
+
+  // Accessibility image allows users to trigger the browser's image context menu
+  const hiddenImage = displayImageUri
+    ? createElement('img', {
+        alt: ariaLabel || '',
+        style: styles.accessibilityImage$raw,
+        draggable: draggable || false,
+        ref: hiddenImageRef,
+        src: displayImageUri
+      })
+    : null;
+
+  function getBackgroundSize(): ?string {
+    if (
+      hiddenImageRef.current != null &&
+      (resizeMode === 'center' || resizeMode === 'repeat')
+    ) {
+      const { naturalHeight, naturalWidth } = hiddenImageRef.current;
+      const { height, width } = layout;
+      if (naturalHeight && naturalWidth && height && width) {
+        const scaleFactor = Math.min(
+          1,
+          width / naturalWidth,
+          height / naturalHeight
+        );
+        const x = Math.ceil(scaleFactor * naturalWidth);
+        const y = Math.ceil(scaleFactor * naturalHeight);
+        return `${x}px ${y}px`;
+      }
+    }
+  }
+
+  function handleLayout(e) {
+    if (resizeMode === 'center' || resizeMode === 'repeat' || onLayout) {
+      const { layout } = e.nativeEvent;
+      onLayout && onLayout(e);
+      updateLayout(layout);
+    }
+  }
+
+  // Image loading
+  const uri = resolveAssetUri(source);
+  React.useEffect(() => {
+    abortPendingRequest();
+
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+
+      requestRef.current = ImageLoader.load(
+        uri,
+        function load(e) {
+          updateState(LOADED);
+          if (onLoad) {
+            onLoad(e);
+          }
+          if (onLoadEnd) {
+            onLoadEnd();
+          }
+        },
+        function error() {
+          updateState(ERRORED);
+          if (onError) {
+            onError({
+              nativeEvent: {
+                error: `Failed to load resource ${uri}`
+              }
+            });
+          }
+          if (onLoadEnd) {
+            onLoadEnd();
+          }
+        }
+      );
+    }
+
+    function abortPendingRequest() {
+      if (requestRef.current != null) {
+        ImageLoader.abort(requestRef.current);
+        requestRef.current = null;
+      }
+    }
+
+    return abortPendingRequest;
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+
+  return (
+    <View
+      {...rest}
+      aria-label={ariaLabel}
+      onLayout={handleLayout}
+      pointerEvents={pointerEvents}
+      ref={ref}
+      style={[
+        styles.root,
+        hasTextAncestor && styles.inline,
+        imageSizeStyle,
+        style,
+        styles.undo,
+        // TEMP: avoid deprecated shadow props regression
+        // until Image refactored to use createElement.
+        { boxShadow: null }
+      ]}
+    >
+      <View
+        style={[
+          styles.image,
+          resizeModeStyles[resizeMode],
+          { backgroundImage, filter },
+          backgroundSize != null && { backgroundSize }
+        ]}
+        suppressHydrationWarning={true}
+      />
+      {hiddenImage}
+      {createTintColorSVG(tintColor, filterRef.current)}
+    </View>
+  );
+});
+
+Image.displayName = 'Image';
+
+// $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
+const ImageWithStatics = (Image: React.AbstractComponent<
+  ImageProps,
+  React.ElementRef<typeof View>
+> &
+  ImageStatics);
+
+ImageWithStatics.getSize = function (uri, success, failure) {
+  ImageLoader.getSize(uri, success, failure);
+};
+
+ImageWithStatics.prefetch = function (uri) {
+  return ImageLoader.prefetch(uri);
+};
+
+ImageWithStatics.queryCache = function (uris) {
+  return ImageLoader.queryCache(uris);
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flexBasis: 'auto',
+    overflow: 'hidden',
+    zIndex: 0
+  },
+  inline: {
+    display: 'inline-flex'
+  },
+  undo: {
+    // These styles are converted to CSS filters applied to the
+    // element displaying the background image.
+    blurRadius: null,
+    shadowColor: null,
+    shadowOpacity: null,
+    shadowOffset: null,
+    shadowRadius: null,
+    tintColor: null,
+    // These styles are not supported
+    overlayColor: null,
+    resizeMode: null
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    height: '100%',
+    width: '100%',
+    zIndex: -1
+  },
+  accessibilityImage$raw: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    opacity: 0,
+    width: '100%',
+    zIndex: -1
+  }
+});
+
+const resizeModeStyles = StyleSheet.create({
+  center: {
+    backgroundSize: 'auto'
+  },
+  contain: {
+    backgroundSize: 'contain'
+  },
+  cover: {
+    backgroundSize: 'cover'
+  },
+  none: {
+    backgroundPosition: '0',
+    backgroundSize: 'auto'
+  },
+  repeat: {
+    backgroundPosition: '0',
+    backgroundRepeat: 'repeat',
+    backgroundSize: 'auto'
+  },
+  stretch: {
+    backgroundSize: '100% 100%'
+  }
+});
+
+export default ImageWithStatics;

package/src/exports/Image/types.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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
+ */
+
+import type { ColorValue, GenericStyleProp } from '../../types';
+import type { ViewProps, ViewStyle } from '../View/types';
+
+type SourceObject = {
+  /**
+   * `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,
+  /**
+   * `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.
+   *
+   * @platform ios
+   */
+  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached',
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  headers?: { [key: string]: string },
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  method?: string,
+  /**
+   * `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,
+  /**
+   * `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,
+  /**
+   * `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.
+   */
+  height?: number,
+  width?: number
+};
+
+export type ResizeMode =
+  | 'center'
+  | 'contain'
+  | 'cover'
+  | 'none'
+  | 'repeat'
+  | 'stretch';
+
+export type Source = number | string | SourceObject | Array<SourceObject>;
+
+export type ImageStyle = {
+  ...ViewStyle,
+  // @deprecated
+  resizeMode?: ResizeMode,
+  tintColor?: ColorValue
+};
+
+export type ImageProps = {
+  ...ViewProps,
+  blurRadius?: number,
+  defaultSource?: Source,
+  draggable?: boolean,
+  onError?: (e: any) => void,
+  onLayout?: (e: any) => void,
+  onLoad?: (e: any) => void,
+  onLoadEnd?: (e: any) => void,
+  onLoadStart?: (e: any) => void,
+  onProgress?: (e: any) => void,
+  resizeMode?: ResizeMode,
+  source?: Source,
+  style?: GenericStyleProp<ImageStyle>,
+  tintColor?: ColorValue
+};

package/src/exports/ImageBackground/index.js

@@ -0,0 +1,73 @@
+/**
+ * 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
+ */
+
+import type { ImageProps } from '../Image';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import { forwardRef } from 'react';
+import Image from '../Image';
+import StyleSheet from '../StyleSheet';
+import View from '../View';
+
+type ImageBackgroundProps = {
+  ...ImageProps,
+  imageRef?: any,
+  imageStyle?: $PropertyType<ImageProps, 'style'>,
+  style?: $PropertyType<ViewProps, 'style'>
+};
+
+const emptyObject = {};
+
+/**
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ */
+const ImageBackground: React.AbstractComponent<
+  ImageBackgroundProps,
+  React.ElementRef<typeof View>
+> = forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    style = emptyObject,
+    imageStyle,
+    imageRef,
+    ...rest
+  } = props;
+  const { height, width } = StyleSheet.flatten(style);
+
+  return (
+    <View ref={forwardedRef} style={style}>
+      <Image
+        {...rest}
+        ref={imageRef}
+        style={[
+          {
+            // Temporary Workaround:
+            // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+            // (which is not quite correct), and these styles conflict with explicitly set styles
+            // of <ImageBackground> and with our internal layout model here.
+            // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+            // This workaround should be removed after implementing proper support of
+            // intrinsic content size of the <Image>.
+            width,
+            height,
+            zIndex: -1
+          },
+          StyleSheet.absoluteFill,
+          imageStyle
+        ]}
+      />
+      {children}
+    </View>
+  );
+});
+
+ImageBackground.displayName = 'ImageBackground';
+
+export default ImageBackground;

package/src/exports/InputAccessoryView/index.js

@@ -0,0 +1,2 @@
+import UnimplementedView from '../../modules/UnimplementedView';
+export default UnimplementedView;