import * as React from 'react' ; import { Img } from 'polar-shared/src/metadata/Img' ; import { HighlightColor } from "polar-shared/src/metadata/IBaseHighlight" ; import { deepMemo } from '../react/ReactUtils' ; interface IProps { readonly id : string ; readonly img ? : Img ; readonly color ? : HighlightColor ; readonly defaultText ? : string ; readonly style ? : React . CSSProperties ; } /**
 * Shows a and image and re-sizes it to its parent properly.
 */ export const ResponsiveImg = deepMemo ( function ResponsiveImg ( props ) { const { img , id , color } = props ; if ( img ) { const width = Math . floor ( img . width ) ; const height = Math . floor ( img . height ) ; return ( < div className = "area-highlight m-1" data - annotation - id = { id } data - annotation - color = { color } style = { { display : 'block' , textAlign : 'center' , position : 'relative' , ... props . style } } > < img style = { { width : '100%' , height : 'auto' , objectFit : 'contain' , objectPosition : '50% top' , maxWidth : width , maxHeight : height , boxSizing : 'content-box' , } } draggable = { false } className = "" width = { width } height = { height } alt = "screenshot" src = { img . src } / > < /div>); } else { return ( < div > { props . defaultText || 'No image' } < /div>); } } ) ;