{"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';\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\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      className,\n      accessibilityLabel,\n      ...props\n    }: {\n      source?: ImageSource | 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      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    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n    if (!uri) return null;\n    return (\n      <img\n        ref={ref}\n        alt={accessibilityLabel}\n        className={className}\n        src={uri || undefined}\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          ...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);\nexport default ImageWrapper;\n"]}