/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2023-03-27 19:13:24
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 中间最下方带关闭图标的弹窗
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import './index.less';
|
import Overlay from '../../Overlay';
|
import { del } from '../../../assets/icon';
|
import { workLog_img_2 } from '../../../assets/img';
|
import './index.less'
|
|
const ModalContent = ({ title, content, zIndex = 999, width = '94%', visible, center, bottom, visibleOnClick }) => {
|
const modalRef = useRef();
|
|
const [styles, setStyles] = useState();
|
|
useEffect(() => {
|
if (!visible) return;
|
let obj = {};
|
let countWidth = 0;
|
if (width.toString().indexOf('%') !== -1) {
|
let windowWidth = document.body.clientWidth;
|
countWidth = (windowWidth * parseInt(width)) / 100;
|
} else {
|
countWidth = width;
|
}
|
if (center) {
|
obj = {
|
top: '50%',
|
marginTop: `-${modalRef.current.clientHeight / 2}px`,
|
width: `${countWidth}px`,
|
left: '50%',
|
marginLeft: `-${Number(countWidth) / 2}px`,
|
};
|
} else if (bottom) {
|
obj = {
|
bottom: '24px',
|
left: '24px',
|
right: '24px',
|
};
|
} else {
|
obj = {
|
top: '150px',
|
width: `${countWidth}px`,
|
left: '50%',
|
marginLeft: `-${Number(countWidth) / 2}px`,
|
};
|
}
|
setStyles(obj);
|
}, [bottom, center, visible, width]);
|
return (
|
<div >
|
{
|
visible && (
|
<div ref={modalRef} className="ModalContent" style={{ ...styles, zIndex: zIndex }}>
|
<div className='ModalContent-main'>
|
<div style={{ padding: '12px 16px 0 12px', backgroundColor: '#fff' }}>
|
<div className='ModalContent-head'>
|
<div className='ModalContent-head-l'>{title}</div>
|
<span style={{ zIndex: zIndex, height: '20px', lineHeight: '20px' }} onClick={() => visibleOnClick('workLogEdit', false)} className='public-tag5 public-tag5-blue'>修改</span>
|
{/* <div className="ModalContent-head-img" >
|
</div> */}
|
</div>
|
|
</div>
|
<div className='ModalContent-content'>{content}</div>
|
<div className="ModalContent-bottom" style={{ zIndex: zIndex }} onClick={() => visibleOnClick('', false)}>
|
<img className="ModalContent-bottom-img" style={{ zIndex: zIndex }} src={del} alt="" />
|
</div>
|
</div>
|
</div>
|
)
|
}
|
< Overlay zIndex={zIndex - 1} show={visible} onOverlay={() => visibleOnClick('', false)} />
|
</div >
|
);
|
};
|
|
export default ModalContent;
|
