react-app-shell/activity/src/components/modal/base-modal.js

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

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;