/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-09 09:38:59
|
* @LastEditTime: 2024-03-06 10:49:19
|
* @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 ModalContent = ({ title, buttonTitle = '确定', headBackground, headStyle, centerBackground, footBackground, buttonStyle, content, zIndex = 999, width = '94%', onOk = true, height = '50%', top = '150px', centerMinHeight = '0', centerMaxHeight = '440px', visible, center, bottom, disabledButton = false, visibleOnClick, buttonNum }) => {
|
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'>
|
<div className='ModalLContent-head' style={headBackground ? { backgroundColor: '#fff', color: '#171A1D' } : { ...headStyle }} >{title}</div>
|
<div className='ModalLContent-content' style={{ minHeight: centerMinHeight, maxHeight: centerMaxHeight, backgroundColor: centerBackground }}>{content}</div>
|
<div style={{ zIndex: zIndex, backgroundColor: footBackground ? "#ffffff" : "#f2f2f2", margin: '0', borderRadius: '0 0 10px 10px' }} >
|
{
|
onOk &&
|
<div style={{ ...buttonStyle }}>
|
<Button
|
disabled={disabledButton}
|
onClick={() => {
|
visibleOnClick('submit', false);
|
}}
|
style={{ flex: 2 }}
|
type="primary"
|
>
|
{buttonTitle}{buttonNum ? `(${buttonNum})` : ''}
|
</Button>
|
</div>
|
}
|
</div>
|
<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 ModalContent;
|
