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

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

import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';

import BaseModal from '../modal/base-modal';
import styles from './info-modal.less';
import weeprabbit from '../../public/images/common/weep-rabbit.png';
import happyrabbit from '../../public/images/common/happy-rabbit.png';


const HeaderType = {weep: weeprabbit, happy: happyrabbit};
class InfoModal extends PureComponent {

    static propTypes = {
        visible: PropTypes.bool,
        loading: PropTypes.bool,
        cancelVisible: PropTypes.bool, // 取消按钮是否显示
        okText: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.element
        ]),
        headerType: PropTypes.string, // 头图片类型 weep,happy
        cancelText: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.element
        ]),
        okBtnStyle: PropTypes.object, // 确定按钮样式
        cancelBtnStyle: PropTypes.object, // 取消按钮样式
        onOk: PropTypes.func,
        onCancel: PropTypes.func,
    };

    static defaultProps = {
        visible: true,
        loading: false,
        cancelVisible: true,
        okText: '确认',
        okBtnStyle: {},
        cancelBtnStyle: {},
        cancelText: '再想想',
        headerType: 'happy',
        onCancel: () => {
            console.log('您点击了取消');
        }
    };

    state = {

    };

    handleonCancel = () => {
        let {onCancel} = this.props;
        onCancel && onCancel();
    };

    handleonOk = () => {
        let {onOk, onCancel, loading} = this.props;
        if (loading) return false;
        onOk ? onOk() : onCancel();
    };

    renderFooterBtn = () => {
        const {cancelVisible, cancelText, okText, okBtnStyle, cancelBtnStyle} = this.props;

        let buttons = [];
        if (cancelVisible) {
            buttons.push(<button key={'cancel'}
                style={cancelBtnStyle}
                className={styles['cancelBtn']}
                onClick={this.handleonCancel}>{cancelText}</button>);
        }
        buttons.push(<button key={'ok'}
            style={okBtnStyle}
            className={styles['okBtn']}
            onClick={this.handleonOk}>{okText}</button>);
        return buttons;
    }

    render() {
        const {visible, headerType, children} = this.props;
        let rabbit = HeaderType[headerType] || HeaderType['happy'];
        return visible ? (
            <BaseModal
                onCancel={this.handleonCancel}
                header={<div className={styles['info-header']}><img src={rabbit} alt="logo"/></div>}
                footer={<div className={styles['info-footer']}>
                    {this.renderFooterBtn()}
                </div>}>

                <div className={styles['info-form']}>
                    {children}
                </div>
            </BaseModal>
        ) : null;
    }
}

export default InfoModal;