xref: /expo/packages/expo-image/build/web/ImageWrapper.js.map (revision cf472be6)

{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, SyntheticEvent, useEffect, Ref, useMemo } from 'react';\n\nimport {\n  ImageContentPositionObject,\n  ImageContentPositionValue,\n  ImageNativeProps,\n  ImageSource,\n} from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\nimport { SrcSetSource } from './useSourceSelection';\n\nfunction ensureUnit(value: string | number) {\n  const trimmedValue = String(value).trim();\n  if (trimmedValue.endsWith('%')) {\n    return trimmedValue;\n  }\n  return `${trimmedValue}px`;\n}\n\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nfunction getObjectPositionFromContentPositionObject(\n  contentPosition?: ImageContentPositionObject\n): string {\n  const resolvedPosition = { ...contentPosition } as Record<\n    KeysOfUnion<ImageContentPositionObject>,\n    ImageContentPositionValue\n  >;\n  if (!resolvedPosition) {\n    return '50% 50%';\n  }\n  if (resolvedPosition.top == null && resolvedPosition.bottom == null) {\n    resolvedPosition.top = '50%';\n  }\n  if (resolvedPosition.left == null && resolvedPosition.right == null) {\n    resolvedPosition.left = '50%';\n  }\n\n  return (\n    ['top', 'bottom', 'left', 'right']\n      .map((key) => {\n        if (key in resolvedPosition) {\n          return `${key} ${ensureUnit(resolvedPosition[key])}`;\n        }\n        return '';\n      })\n      .join(' ') || '50% 50%'\n  );\n}\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nfunction getImgPropsFromSource(source: ImageSource | SrcSetSource | null | undefined) {\n  if (source && 'srcset' in source) {\n    return {\n      srcSet: source.srcset,\n      sizes: source.sizes,\n    };\n  }\n  return {};\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      tintColor,\n      className,\n      accessibilityLabel,\n      ...props\n    }: {\n      source?: ImageSource | SrcSetSource | null;\n      events?: {\n        onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null)[];\n        onError?: ((({ source }: { source: ImageSource | null }) => void) | undefined | null)[];\n        onTransitionEnd?: ((() => void) | undefined | null)[];\n        onMount?: ((() => void) | undefined | null)[];\n      };\n      contentPosition?: ImageContentPositionObject;\n      hashPlaceholderContentPosition?: ImageContentPositionObject;\n      priority?: string | null;\n      style: CSSProperties;\n      tintColor?: string | null;\n      hashPlaceholderStyle?: CSSProperties;\n      className?: string;\n      accessibilityLabel?: string;\n    },\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\n    const isBlurhash = isBlurhashString(source?.uri || '');\n    const isThumbhash = isThumbhashString(source?.uri || '');\n    const isHash = isBlurhash || isThumbhash;\n\n    // Thumbhash uri always has to start with 'thumbhash:/'\n    const thumbhash = source?.uri?.replace(/thumbhash:\\//, '');\n    const thumbhashUri = useMemo(\n      () => (isThumbhash ? thumbHashStringToDataURL(thumbhash ?? '') : null),\n      [thumbhash]\n    );\n\n    const blurhashUri = useBlurhash(isBlurhash ? source?.uri : null, source?.width, source?.height);\n    if (!source) {\n      return null;\n    }\n\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n    return (\n      <>\n        {tintColor && (\n          <svg>\n            <defs>\n              <filter id={`tint-${tintColor}`} x=\"0\" y=\"0\" width=\"0\" height=\"0\">\n                <feFlood floodColor={tintColor} floodOpacity=\"1\" result=\"flood\" />\n                <feComposite in=\"flood\" in2=\"SourceAlpha\" operator=\"in\" />\n              </filter>\n            </defs>\n          </svg>\n        )}\n        <img\n          ref={ref}\n          alt={accessibilityLabel}\n          className={className}\n          src={uri || undefined}\n          {...getImgPropsFromSource(source)}\n          key={source?.uri}\n          {...props}\n          style={{\n            width: '100%',\n            height: '100%',\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            objectPosition,\n            filter: tintColor ? `url(#tint-${tintColor})` : '',\n            ...style,\n            ...(isHash ? hashPlaceholderStyle : {}),\n          }}\n          // @ts-ignore\n          // eslint-disable-next-line react/no-unknown-property\n          fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n          onLoad={(event) => {\n            if (typeof window !== 'undefined') {\n              // this ensures the animation will run, since the starting class is applied at least 1 frame before the target class set in the onLoad event callback\n              window.requestAnimationFrame(() => {\n                events?.onLoad?.forEach((e) => e?.(event));\n              });\n            } else {\n              events?.onLoad?.forEach((e) => e?.(event));\n            }\n          }}\n          onTransitionEnd={() => events?.onTransitionEnd?.forEach((e) => e?.())}\n          onError={() => events?.onError?.forEach((e) => e?.({ source: source || null }))}\n        />\n      </>\n    );\n  }\n);\n\nexport default ImageWrapper;\n"]}