import { Tasl } from '../../../model/tasl' ; import { classNames } from '../../../utils/classnames' ; import { convertImageUri } from '../../../utils/convert-image-uri' ; import { imageSizes , supportedSizes } from '../../../utils/image-sizes' ; import { ImageType } from '../../../model/image' ; import { isNotUndefined } from '../../../utils/array' ; import { FunctionComponent } from 'react' ; export type Props = { contentUrl : string ; width ? : number ; alt : string ; tasl ? : Tasl ; height ? : number ; caption ? : string ; lazyload ? : boolean ; sizesQueries ? : string ; copyright ? : string ; defaultSize ? : number ; clickHandler ? : ( ) => void ; zoomable ? : boolean ; extraClasses ? : string ; crops ? : { [ key ] : ImageType ; } ; style ? : Record < string , string > ; srcsetRequired ? : boolean ; } ; const Img = ( { width , height , contentUrl , copyright , lazyload = true , sizesQueries = '100vw' , defaultSize = 30 , alt = '' , clickHandler , zoomable , extraClasses , style , srcsetRequired = true , } ) => { const sizes = isNotUndefined ( width ) ? imageSizes ( width ) : supportedSizes ; return ( < img width = { width } height = { height } className = { classNames ( { image : true , 'bg-charcoal font-white' : true , 'lazy-image lazyload' : lazyload , 'cursor-zoom-in' : Boolean ( zoomable ) , [ `${ extraClasses || '' }` ] : Boolean ( extraClasses ) , } ) } src = { convertImageUri ( contentUrl , defaultSize ) } data - srcset = { srcsetRequired ? sizes . map ( size => { return `${ convertImageUri ( contentUrl , size ) } ${ size }w` ; } ) : undefined } sizes = { srcsetRequired ? sizesQueries : undefined } data - copyright = { copyright } onClick = { clickHandler } alt = { alt || '' } style = { style } / > ) ; } ; const Image = ( props ) => { const classes = classNames ( { 'image image--noscript bg-charcoal font-white' : true , [ `${ props . extraClasses || '' }` ] : Boolean ( props . extraClasses ) , } ) ; return ( < > < noscript dangerouslySetInnerHTML = { { __html : `
      <img width='${ props . width || '' }'
        height='${ props . height || '' }'
        class='${ classes }'
        src='${ convertImageUri ( props . contentUrl , 640 ) }'
        alt='${ props . alt || '' }' />` , } } /> < Img { ... props } /> < />); } ; export default Image ;