/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-17 09:04:28
|
* @LastEditTime: 2022-09-20 09:41:25
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 我的 “弹窗” 组件
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import './index.less';
|
import Overlay from '../Overlay';
|
|
/**
|
* width: string | number // 支持百分比类型
|
*/
|
const MyModal = ({ visible, title, width = '85%', center, bottom, bodyClass, zIndex = 999, onClose, children }) => {
|
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 (
|
<>
|
{visible && (
|
<div ref={modalRef} className="myModal" style={{ ...styles, zIndex: zIndex }}>
|
{(center || styles) && (
|
<div className={`myModal-main ${bodyClass || ''}`}>
|
{!!title && <div className="myModal-title">{title}</div>}
|
<div>{children}</div>
|
</div>
|
)}
|
</div>
|
)}
|
<Overlay zIndex={zIndex - 1} show={visible} onOverlay={onClose} />
|
</>
|
);
|
};
|
|
export default MyModal;
|
