xref: /expo/packages/expo-image/build/web/useSourceSelection.js.map (revision ae642c8a)

{"version":3,"file":"useSourceSelection.js","sourceRoot":"","sources":["../../src/web/useSourceSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { ImageProps, ImageSource } from '../Image.types';\n\nfunction findBestSourceForSize(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null\n): ImageSource | null {\n  return (\n    [...(sources || [])]\n      // look for the smallest image that's still larger then a container\n      ?.map((source) => {\n        if (!size) {\n          return { source, penalty: 0, covers: false };\n        }\n        const { width, height } =\n          typeof source === 'object' ? source : { width: null, height: null };\n        if (width == null || height == null) {\n          return { source, penalty: 0, covers: false };\n        }\n        if (width < size.width || height < size.height) {\n          return {\n            source,\n            penalty: Math.max(size.width - width, size.height - height),\n            covers: false,\n          };\n        }\n        return { source, penalty: (width - size.width) * (height - size.height), covers: true };\n      })\n      .sort((a, b) => a.penalty - b.penalty)\n      .sort((a, b) => Number(b.covers) - Number(a.covers))[0]?.source ?? null\n  );\n}\n\nexport default function useSourceSelection(\n  sources?: ImageSource[],\n  sizeCalculation: ImageProps['responsivePolicy'] = 'live',\n  measurementCallback?: (target: HTMLElement, size: DOMRect) => void\n) {\n  const hasMoreThanOneSource = (sources?.length ?? 0) > 1;\n  // null - not calculated yet, DOMRect - size available\n  const [size, setSize] = useState<null | DOMRect>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserver.current?.disconnect();\n    };\n  }, []);\n\n  const containerRef = React.useCallback(\n    (element: HTMLDivElement) => {\n      if (!hasMoreThanOneSource && !measurementCallback) {\n        return;\n      }\n      const rect = element?.getBoundingClientRect();\n      measurementCallback?.(element, rect);\n      setSize(rect);\n\n      if (sizeCalculation === 'live') {\n        resizeObserver.current?.disconnect();\n        if (!element) {\n          return;\n        }\n        resizeObserver.current = new ResizeObserver((entries) => {\n          setSize(entries[0].contentRect);\n          measurementCallback?.(entries[0].target as any, entries[0].contentRect);\n        });\n        resizeObserver.current.observe(element);\n      }\n    },\n    [hasMoreThanOneSource, sizeCalculation]\n  );\n\n  const bestSourceForSize = size !== undefined ? findBestSourceForSize(sources, size) : null;\n  const source = (hasMoreThanOneSource ? bestSourceForSize : sources?.[0]) ?? null;\n\n  return React.useMemo(\n    () => ({\n      containerRef,\n      source,\n    }),\n    [source]\n  );\n}\n"]}