"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=Image;var _objectWithoutPropertiesLoose2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _head=_interopRequireDefault(require("../next-server/lib/head"));const loaders=new Map([['imgix',imgixLoader],['cloudinary',cloudinaryLoader],['akamai',akamaiLoader],['default',defaultLoader]]);const imageData=process.env.__NEXT_IMAGE_OPTS;const{sizes:configSizes,loader:configLoader,path:configPath}=imageData;let cachedObserver;const IntersectionObserver=typeof window!=='undefined'?window.IntersectionObserver:null;function getObserver(){// Return shared instance of IntersectionObserver if already created
if(cachedObserver){return cachedObserver;}// Only create shared IntersectionObserver if supported in browser
if(!IntersectionObserver){return undefined;}return cachedObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){let lazyImage=entry.target;if(lazyImage.dataset.src){lazyImage.src=lazyImage.dataset.src;}if(lazyImage.dataset.srcset){lazyImage.srcset=lazyImage.dataset.srcset;}lazyImage.classList.remove('__lazy');cachedObserver.unobserve(lazyImage);}});},{rootMargin:'200px'});}function computeSrc(src,unoptimized,quality){if(unoptimized){return src;}return callLoader({src,quality});}function callLoader(loaderProps){let load=loaders.get(configLoader)||defaultLoader;return load((0,_extends2.default)({root:configPath},loaderProps));}function generateSrcSet({src,widths,quality}){// At each breakpoint, generate an image url using the loader, such as:
// ' www.example.com/foo.jpg?w=480 480w, '
return widths.map(width=>`${callLoader({src,width,quality})} ${width}w`).join(', ');}function generatePreload({src,widths,unoptimized=false,sizes,quality}){// This function generates an image preload that makes use of the "imagesrcset" and "imagesizes"
// attributes for preloading responsive images. They're still experimental, but fully backward
// compatible, as the link tag includes all necessary attributes, even if the final two are ignored.
// See: https://web.dev/preload-responsive-images/
return/*#__PURE__*/_react.default.createElement(_head.default,null,/*#__PURE__*/_react.default.createElement("link",{rel:"preload",as:"image",href:computeSrc(src,unoptimized,quality)// @ts-ignore: imagesrcset and imagesizes not yet in the link element type
,imagesrcset:generateSrcSet({src,widths,quality}),imagesizes:sizes}));}function Image(_ref){let{src,sizes,unoptimized=false,priority=false,lazy,className,quality,width,height,unsized}=_ref,rest=(0,_objectWithoutPropertiesLoose2.default)(_ref,["src","sizes","unoptimized","priority","lazy","className","quality","width","height","unsized"]);const thisEl=(0,_react.useRef)(null);// Sanity Checks:
// If priority and lazy are present, log an error and use priority only.
if(priority&&lazy){if(process.env.NODE_ENV!=='production'){throw new Error(`Image with src "${src}" has both "priority" and "lazy" properties. Only one should be used.`);}}if(!priority&&typeof lazy==='undefined'){lazy=true;}(0,_react.useEffect)(()=>{const target=thisEl.current;if(target&&lazy){const observer=getObserver();if(observer){observer.observe(target);return()=>{observer.unobserve(target);};}}},[thisEl,lazy]);// Generate attribute values
const imgSrc=computeSrc(src,unoptimized,quality);const imgSrcSet=!unoptimized?generateSrcSet({src,widths:configSizes,quality}):undefined;let imgAttributes;if(!lazy){imgAttributes={src:imgSrc};if(imgSrcSet){imgAttributes.srcSet=imgSrcSet;}}else{imgAttributes={'data-src':imgSrc};if(imgSrcSet){imgAttributes['data-srcset']=imgSrcSet;}className=className?className+' __lazy':'__lazy';}// No need to add preloads on the client side--by the time the application is hydrated,
// it's too late for preloads
const shouldPreload=priority&&typeof window==='undefined';let divStyle;let imgStyle;let wrapperStyle;if(typeof height==='number'&&typeof width==='number'&&!unsized){// <Image src="i.png" width=100 height=100 />
const quotient=height/width;const ratio=isNaN(quotient)?1:quotient*100;wrapperStyle={maxWidth:'100%',width};divStyle={position:'relative',paddingBottom:`${ratio}%`};imgStyle={height:'100%',left:'0',position:'absolute',top:'0',width:'100%'};}else if(typeof height==='undefined'&&typeof width==='undefined'&&unsized){// <Image src="i.png" unsized />
if(process.env.NODE_ENV!=='production'){if(priority){// <Image src="i.png" unsized priority />
console.warn(`Image with src "${src}" has both "priority" and "unsized" properties. Only one should be used.`);}}}else{// <Image src="i.png" />
if(process.env.NODE_ENV!=='production'){throw new Error(`Image with src "${src}" must use "width" and "height" properties or "unsized" property.`);}}return/*#__PURE__*/_react.default.createElement("div",{style:wrapperStyle},/*#__PURE__*/_react.default.createElement("div",{style:divStyle},shouldPreload?generatePreload({src,widths:configSizes,unoptimized,sizes}):'',/*#__PURE__*/_react.default.createElement("img",Object.assign({},rest,imgAttributes,{className:className,sizes:sizes,ref:thisEl,style:imgStyle}))));}//BUILT IN LOADERS
function normalizeSrc(src){return src[0]==='/'?src.slice(1):src;}function imgixLoader({root,src,width,quality}){const params=['auto=format'];let paramsString='';if(width){params.push('w='+width);}if(quality){params.push('q='+quality);}if(params.length){paramsString='?'+params.join('&');}return`${root}${normalizeSrc(src)}${paramsString}`;}function akamaiLoader({root,src,width}){return`${root}${normalizeSrc(src)}${width?'?imwidth='+width:''}`;}function cloudinaryLoader({root,src,width,quality}){const params=['f_auto'];let paramsString='';if(width){params.push('w_'+width);}if(quality){params.push('q_'+quality);}if(params.length){paramsString=params.join(',')+'/';}return`${root}${paramsString}${normalizeSrc(src)}`;}function defaultLoader({root,src,width,quality}){return`${root}?url=${encodeURIComponent(src)}&${width?`w=${width}&`:''}q=${quality||'100'}`;}
//# sourceMappingURL=image.js.map