import { useEffect , useRef , useState } from "react" ; import utils from "../helpers/utils" ; import { showDialog } from "./Dialog" ; import "../less/preview-image-dialog.less" ; interface Props extends DialogProps { imgUrl : string ; } const PreviewImageDialog = ( { destroy , imgUrl } ) => { const imgRef = useRef < HTMLImageElement > ( null ) ; const [ imgWidth , setImgWidth ] = useState < number > ( - 1 ) ; useEffect ( ( ) => { utils . getImageSize ( imgUrl ) . then ( ( { width } ) => { if ( width !== 0 ) { setImgWidth ( 80 ) ; } else { setImgWidth ( 0 ) ; } } ) ; } , [ ] ) ; const handleCloseBtnClick = ( ) => { destroy ( ) ; } ; const handleDecreaseImageSize = ( ) => { if ( imgWidth > 30 ) { setImgWidth ( imgWidth - 10 ) ; } } ; const handleIncreaseImageSize = ( ) => { setImgWidth ( imgWidth + 10 ) ; } ; return ( < > < button className = "btn close-btn" onClick = { handleCloseBtnClick } > < img className = "icon-img" src = "/icons/close.svg" / > < /button> < div className = "img-container" > < img className = { imgWidth <= 0 ? "hidden" : "" } ref = { imgRef } width = { imgWidth + "%" } src = { imgUrl } / > < span className = { "loading-text " + ( imgWidth === - 1 ? "" : "hidden" ) } > 图片加载中 ... < /span> < span className = { "loading-text " + ( imgWidth === 0 ? "" : "hidden" ) } > 😟 图片加载失败 ， 可能是无效的链接 < /span> < /div> < div className = "action-btns-container" > < button className = "btn" onClick = { handleDecreaseImageSize } > ➖ < /button> < button className = "btn" onClick = { handleIncreaseImageSize } > ➕ < /button> < button className = "btn" onClick = { ( ) => setImgWidth ( 80 ) } > ⭕ < /button> < /div> < />); } ; export default function showPreviewImageDialog ( imgUrl ) { showDialog ( { className : "preview-image-dialog" , } , PreviewImageDialog , { imgUrl } ) ; }