UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

136 lines (128 loc) 4.75 kB
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;