86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
|
|
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
|
|
import theme from 'antd/lib/theme';
|
|
import { DownloadOutlined } from '@ant-design/icons';
|
|
import './index.less'
|
|
|
|
type ViewLargerImageModalParams = {
|
|
imgSrc?: string;
|
|
warningData?: {
|
|
label?: string;
|
|
value?: string;
|
|
}[];
|
|
};
|
|
|
|
export interface ViewLargerImageModalRef {
|
|
show: (params?: ViewLargerImageModalParams) => void;
|
|
handleCancel: () => void;
|
|
}
|
|
|
|
export interface ViewLargerImageModalProps {
|
|
imgStyle?: React.CSSProperties;
|
|
downloadImg?: (imgSrc?: string) => void;
|
|
title?: string;
|
|
downloadText?: string;
|
|
modalProps?: ModalProps
|
|
spaceProps?: SpaceProps;
|
|
}
|
|
|
|
export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
|
|
(props, ref) => {
|
|
|
|
const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
|
|
const { useToken } = theme
|
|
const { token } = useToken()
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
const [imgSrc, setImgSrc] = useState<string>();
|
|
const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
|
|
|
|
const handleCancel = () => {
|
|
setOpen(false);
|
|
}
|
|
|
|
useImperativeHandle(ref, () => {
|
|
return {
|
|
show: (_params) => {
|
|
setOpen(true);
|
|
setImgSrc(_params?.imgSrc)
|
|
setWarningData(_params?.warningData)
|
|
},
|
|
handleCancel
|
|
};
|
|
});
|
|
|
|
return (
|
|
<Modal
|
|
className='zhst-biz-view-warning-larger-image-modal'
|
|
open={open}
|
|
destroyOnClose
|
|
title={title}
|
|
width="1029px"
|
|
footer={null}
|
|
onCancel={handleCancel}
|
|
{...modalProps}
|
|
>
|
|
<Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
|
|
<img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', ...imgStyle }} />
|
|
<div className='right-context'>
|
|
{warningData?.map(({ label, value }) => (
|
|
<div key={label} >
|
|
<span className='context-key'>{`${label}: `}</span>
|
|
{value}
|
|
</div>
|
|
))}
|
|
{imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
|
|
</div>
|
|
</Space>
|
|
</Modal>
|
|
);
|
|
}
|
|
)
|
|
|
|
export default ViewLargerImageModal;
|
|
|
|
export const useViewLargerImageModal = () => {
|
|
return useRef<ViewLargerImageModalRef>(null);
|
|
}; |