@hanzogui/react-native-web-lite 2.0.0

package/src/Image/index.tsx

@@ -0,0 +1,401 @@
+/**
+ * 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 * as React from 'react'
+import {
+  StyleSheet,
+  TextAncestorContext,
+  createBoxShadowValue,
+} from '@hanzogui/react-native-web-internals'
+import { ImageLoader, getAssetByID } from '@hanzogui/react-native-web-internals'
+
+import { createElement } from '../createElement/index'
+import { PixelRatio } from '../PixelRatio/index'
+import { View } from '../View/index'
+import type { ImageProps } from './types'
+
+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>
+        {/* @ts-ignore */}
+        <filter id={`tint-${id}`} suppressHydrationWarning={true}>
+          <feFlood floodColor={`${tintColor}`} key={tintColor} />
+          <feComposite in2="SourceAlpha" operator="atop" />
+        </filter>
+      </defs>
+    </svg>
+  ) : null
+}
+
+function getFlatStyle(style, blurRadius, filterId) {
+  const flatStyle = StyleSheet.flatten(style)
+  const { filter, resizeMode, shadowOffset, tintColor } = flatStyle
+
+  // Add CSS filters
+  // React Native exposes these features as props and proprietary styles
+  const filters: any[] = []
+  let _filter: any = 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 (tintColor && filterId != null) {
+    filters.push(`url(#tint-${filterId})`)
+  }
+
+  if (filters.length > 0) {
+    _filter = filters.join(' ')
+  }
+
+  // These styles are converted to CSS filters applied to the
+  // element displaying the background image.
+  delete flatStyle.blurRadius
+  delete flatStyle.shadowColor
+  delete flatStyle.shadowOpacity
+  delete flatStyle.shadowOffset
+  delete flatStyle.shadowRadius
+  delete flatStyle.tintColor
+  // These styles are not supported on View
+  delete flatStyle.overlayColor
+  delete flatStyle.resizeMode
+
+  return [flatStyle, 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 | null {
+  let uri: string | null = null
+  if (typeof source === 'number') {
+    // get the URI from the packager
+    const asset = getAssetByID(source)
+    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.forwardRef<typeof View, ImageProps>((props, ref) => {
+  const {
+    accessibilityLabel,
+    blurRadius,
+    defaultSource,
+    draggable,
+    onError,
+    onLayout,
+    onLoad,
+    onLoadEnd,
+    onLoadStart,
+    pointerEvents,
+    source,
+    style,
+    ...rest
+  } = props
+
+  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 [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
+    {},
+    blurRadius,
+    filterRef.current
+  )
+
+  const resizeMode = props.resizeMode || _resizeMode || 'cover'
+  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: accessibilityLabel || '',
+        style: styles.accessibilityImage$raw,
+        draggable: draggable || false,
+        ref: hiddenImageRef,
+        src: displayImageUri,
+      })
+    : null
+
+  function getBackgroundSize(): string | undefined {
+    if (
+      hiddenImageRef.current != null &&
+      (resizeMode === 'center' || resizeMode === 'repeat')
+    ) {
+      const { naturalHeight, naturalWidth } = hiddenImageRef.current
+      const { height, width } = layout as any
+      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) {
+        // @ts-ignore
+        onLoadStart()
+      }
+
+      // @ts-ignore
+      requestRef.current = ImageLoader.load(
+        uri,
+        function load(e) {
+          updateState(LOADED)
+          if (onLoad) {
+            onLoad(e)
+          }
+          if (onLoadEnd) {
+            // @ts-ignore
+            onLoadEnd()
+          }
+        },
+        function error() {
+          updateState(ERRORED)
+          if (onError) {
+            onError({
+              nativeEvent: {
+                error: `Failed to load resource ${uri} (404)`,
+              },
+            })
+          }
+          if (onLoadEnd) {
+            // @ts-ignore
+            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={accessibilityLabel}
+      onLayout={handleLayout}
+      pointerEvents={pointerEvents}
+      ref={ref as any}
+      style={[
+        style,
+        styles.root,
+        hasTextAncestor && styles.inline,
+        imageSizeStyle,
+        flatStyle,
+      ]}
+    >
+      <View
+        style={[
+          ...[].concat(styles.image),
+          resizeModeStyles[resizeMode],
+          { backgroundImage, filter },
+          backgroundSize != null && { backgroundSize },
+        ]}
+        // @ts-ignore
+        suppressHydrationWarning={true}
+      />
+      {hiddenImage}
+      {createTintColorSVG(tintColor, filterRef.current)}
+    </View>
+  )
+})
+
+Image.displayName = 'Image'
+
+const ImageWithStatics = Image
+
+// @ts-ignore
+ImageWithStatics.getSize = function (uri, success, failure) {
+  ImageLoader.getSize(uri, success, failure)
+}
+
+// @ts-ignore
+ImageWithStatics.prefetch = function (uri) {
+  return ImageLoader.prefetch(uri)
+}
+
+// @ts-ignore
+ImageWithStatics.queryCache = function (uris) {
+  return ImageLoader.queryCache(uris)
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexBasis: 'auto',
+    overflow: 'hidden',
+    zIndex: 0,
+  },
+  inline: {
+    display: 'inline-flex',
+  },
+  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 { ImageWithStatics as Image }
+export default ImageWithStatics

package/src/Image/types.tsx

@@ -0,0 +1,112 @@
+/**
+ * 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 {
+  AnimationStyles,
+  BorderStyles,
+  InteractionStyles,
+  LayoutStyles,
+  ShadowStyles,
+  TransformStyles,
+} from '../styleTypes'
+import type { ColorValue, GenericStyleProp } from '../types'
+import type { ViewProps } 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?: {
+    [K in 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 = {
+  backgroundColor?: ColorValue
+  boxShadow?: string
+  filter?: string
+  opacity?: number
+  resizeMode?: ResizeMode
+  tintColor?: ColorValue
+} & AnimationStyles &
+  BorderStyles &
+  InteractionStyles &
+  LayoutStyles &
+  ShadowStyles &
+  TransformStyles
+
+export type ImageProps = {
+  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>
+} & ViewProps

package/src/ImageBackground/__tests__/index-test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Text from '../../Text'
+import ImageBackground from '..'
+
+function findImage(container) {
+  return container.firstChild.firstChild
+}
+
+describe('components/ImageBackground', () => {
+  describe('prop "children"', () => {
+    test('render child content', () => {
+      const { getByText } = render(
+        <ImageBackground>
+          <Text>Hello World!</Text>
+        </ImageBackground>
+      )
+      expect(getByText('Hello World!')).toBeDefined()
+    })
+  })
+
+  describe('prop "imageStyle"', () => {
+    test('sets the style of the underlying Image', () => {
+      const imageStyle = { width: 40, height: 60 }
+      const { container } = render(<ImageBackground imageStyle={imageStyle} />)
+      expect(
+        findImage(container).getAttribute('style').includes('width: 40px; height: 60px;')
+      ).toBe(true)
+    })
+  })
+
+  describe('prop "style"', () => {
+    test('sets the style of the container View', () => {
+      const style = { margin: 40 }
+      const { container } = render(<ImageBackground style={style} />)
+      expect(container.firstChild.getAttribute('style')).toEqual(
+        'margin: 40px 40px 40px 40px;'
+      )
+    })
+  })
+})

package/src/ImageBackground/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 * as React from 'react'
+import { forwardRef } from 'react'
+import { StyleSheet } from '@hanzogui/react-native-web-internals'
+
+import type { ImageProps } from '../Image/index'
+import { Image } from '../Image/index'
+import type { ViewProps } from '../View/index'
+import { View } from '../View/index'
+
+type ImageBackgroundProps = ImageProps & {
+  imageRef?: any
+  imageStyle?: ImageProps['style']
+  style?: ViewProps['style']
+}
+
+const emptyObject = {}
+
+/**
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ */
+const ImageBackground = forwardRef<React.ElementRef<typeof View>, ImageBackgroundProps>(
+  (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 { ImageBackground }
+export default ImageBackground