import { createElement , CSSProperties , HTMLAttributes , ReactElement , ReactEventHandler , ReactNode } from "react" ; import classNames from "classnames" ; import { HeightUnitEnum , WidthUnitEnum } from "../../../typings/ImageProps" ; import { LightboxProps } from "../Lightbox" ; import "../../ui/Image.scss" ; function getStyle ( value , type ) { if ( type === "pixels" ) { return value ; } else if ( type === "percentage" ) { return value + "%" ; } return "" ; } export interface ImageWrapperProps { className ? : string ; responsive : boolean ; hasImage : boolean ; children : ReactElement < ImageContentGlyphicon | ImageContentImage > | [ ReactElement < ImageContentGlyphicon | ImageContentImage > , ReactElement < LightboxProps > | false ] ; } export interface ImageContentProps { style ? : CSSProperties ; onClick ? : ReactEventHandler < HTMLElement > ; altText ? : string ; } function Wrapper ( props ) { return ( < div className = { classNames ( "mx-image-viewer" , { "mx-image-viewer-responsive" : props . responsive } , props . className , { hidden : ! props . hasImage } ) } > { props . children } < /div>); } export interface ImageContentGlyphicon extends ImageContentProps { icon : string | undefined ; size : number ; } function ContentGlyphicon ( props ) { const accessibilityProps = props . altText ? { "aria-label" : props . altText , role : "img" } : { } ; const onClickProps = getImageContentOnClickProps ( props . onClick ) ; return ( < span className = { classNames ( "glyphicon" , props . icon ) } style = { { ... props . style , fontSize : `${ props . size }px` } } { ... accessibilityProps } { ... onClickProps } />); } export interface ImageContentImage extends ImageContentProps { image : string | undefined ; height : number ; heightUnit : HeightUnitEnum ; width : number ; widthUnit : WidthUnitEnum ; className ? : string ; } function ContentImage ( props ) { const onClickProps = getImageContentOnClickProps ( props . onClick ) ; return ( < img className = { props . className } src = { props . image } style = { { ... props . style , height : getStyle ( props . height , props . heightUnit ) , width : getStyle ( props . width , props . widthUnit ) } } alt = { props . altText } { ... onClickProps } />); } function getImageContentOnClickProps ( onClick ) { if ( ! onClick ) { return { } ; } return { onClick , role : "button" , tabIndex : 0 , onKeyDown : event => { if ( event . key === "Enter" || event . key === " " ) { onClick ( event ) ; } } } ; } interface BackgroundImageProps extends ImageContentImage { children : ReactNode ; } function BackgroundImage ( props ) { return ( < div className = { classNames ( "mx-image-viewer" , "mx-image-background" , props . className ) } onClick = { props . onClick } style = { { ... props . style , height : getStyle ( props . height , props . heightUnit ) , width : getStyle ( props . width , props . widthUnit ) , backgroundImage : `url('${ props . image }')` } } > { props . children } < /div>); } export const ImageUi = { Wrapper , BackgroundImage , ContentGlyphicon , ContentImage } ;