react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
136 lines (128 loc) • 4.75 kB
JavaScript
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import closeImg from '../../public/images/common/close.png';
import styles from './base.less';
class BaseModal extends PureComponent {
static propTypes = {
visible: PropTypes.bool,
callback: PropTypes.func,
modalType: PropTypes.string, // modal类型 info,edit
header: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
footer: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
closable: PropTypes.bool, // 是否显示下面的关闭按钮
onCancel: PropTypes.func,
onOk: PropTypes.func,
};
static defaultProps = {
visible: true,
closable: false,
modalType: 'info',
header: null,
footer: null,
onOk: () => {
console.log('您点击了确定');
},
onCancel: () => {
console.log('您点击了取消');
}
};
state = {
ua: navigator.userAgent.toLocaleLowerCase()
};
componentDidMount() {
// 解决ios下UC浏览器 抖动的问题 this.props.modalType === 'edit' &&this.is_uc()
if (this.props.modalType === 'edit' && this.is_uc()) {
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
}
}
componentWillUnmount() {
// this.props.modalType === 'edit' &&this.is_uc()
if (this.props.modalType === 'edit' && this.is_uc()) {
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
}
}
is_uc = () => {
let ua = navigator.userAgent;
if (ua.match(/WeiBo/i) || ua.match(/UCBrowser/i)) {
return true;
}
return false;
}
handleonCancel = () => {
let {onCancel, modalType} = this.props;
if (modalType === 'edit' && this.is_uc()) {
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
}
onCancel && onCancel();
};
handleonOk = () => {
let {onOk} = this.props;
onOk && onOk();
};
renderContent = () => {
const {closable, header, footer, children, modalType} = this.props;
if (this.is_uc() && modalType === 'edit') {
return (
<div className={styles['layer-wrapper-uc']}>
<div className={styles['layermain']}>
<div className={styles['layersection']}>
<div className={styles['modal-body']}>
<div className={styles['header']}>
{header}
</div>
<div className={styles['content']}>
{children}
</div>
<div className={styles['footer']}>
{footer}
</div>
</div>
{closable && <div className={styles['closeBtn']} onClick={this.handleonCancel}>
<img src={closeImg} alt="关闭"/>
</div>
}
</div>
</div>
</div>
);
}
return (
<div className={styles['layer-wrapper']}>
<div className={styles['layershade']}/>
<div className={styles['layermain']}>
<div className={styles['layersection']}>
<div className={styles['modal-body']}>
<div className={styles['header']}>
{header}
</div>
<div className={styles['content']}>
{children}
</div>
<div className={styles['footer']}>
{footer}
</div>
</div>
{closable && <div className={styles['closeBtn']} onClick={this.handleonCancel} >
<img src={closeImg} alt="关闭"/>
</div>
}
</div>
</div>
</div>
);
}
render() {
const {visible} = this.props;
return visible ? this.renderContent() : null;
}
}
export default BaseModal;