/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2023-05-16 09:28:30
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 中间最下方带关闭图标的弹窗
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import MyModal from '../MyModal';
|
import { Button } from 'dingtalk-design-mobile';
|
import './index.less';
|
import Overlay from '../Overlay';
|
import { del } from '../../assets/icon';
|
|
// height 高度建议不要高于80%， top 距离顶部的距离
|
const ModalNewContent = ({ title, buttonTitle = '确定', content, zIndex = 999, width = '94%', onOk = true, height = '50%', top = '150px', centerMinHeight = '0', centerMaxHeight = '440px', 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: top,
|
width: `${countWidth}px`,
|
left: '50%',
|
marginLeft: `-${Number(countWidth) / 2}px`,
|
};
|
}
|
setStyles(obj);
|
}, [bottom, center, visible, width]);
|
return (
|
<div >
|
{
|
visible && (
|
<div ref={modalRef} className="ModalLContent" style={{ ...styles, zIndex: zIndex }}>
|
<div className='ModalLContent-main'>
|
{content}
|
<div className="ModalLContent-bottom" style={{ zIndex: zIndex }} onClick={() => visibleOnClick('', false)}>
|
<img className="ModalLContent-bottom-img" style={{ zIndex: zIndex }} src={del} alt="" />
|
</div>
|
</div>
|
</div>
|
)
|
}
|
< Overlay zIndex={zIndex - 1} show={visible} onOverlay={() => visibleOnClick('', false)} />
|
</div>
|
);
|
};
|
|
export default ModalNewContent;
|
