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

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

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import BaseModal from './base-modal';

import style from './tips.less';

export default class TipsModal extends Component {

    static propTypes = {
        visible: PropTypes.bool,
        isShowCancel: PropTypes.bool,
        headText: PropTypes.string,
        okText: PropTypes.string,
        cancelText: PropTypes.string,
        footer: PropTypes.element,
        onOk: PropTypes.func,
        onCancel: PropTypes.func
    };

    static defaultProps = {
        visible: false,
        isShowCancel: false, // 是否展示取消按钮，默认不展示
        headText: '提示',
        okText: '确定',
        cancelText: '取消',
        footer: null,
        onOk: null,
        onCancel: null
    };

    renderHeader = () => {
        const {headText} = this.props;
        return (
            <div className={style['header']}>
                {headText}
            </div>
        );
    };

    renderFooter = () => {
        const {okText, cancelText, footer, isShowCancel} = this.props;
        if (footer) {
            return footer;
        }

        if (isShowCancel) {
            return (
                <div className={style['btn-content']}>
                    <button className={style['cancel-button']} onClick={this.handleCancel}>{cancelText}</button>
                    <button className={style['ok-button']} onClick={this.handleOk}>{okText}</button>
                </div>
            );
        }

        return (
            <div className={style['btn-content']}>
                <button className={`${style['ok-button']} ${style['ok-long-button']}`} onClick={this.handleOk}>{okText}</button>
            </div>
        );
    };

    handleOk = () => {
        const {onOk} = this.props;
        onOk && onOk();
    };

    handleCancel = () => {
        const {onCancel} = this.props;
        onCancel && onCancel();
    };

    render() {
        const {visible, children} = this.props;
        return (
            <BaseModal
                visible={visible}
                header={this.renderHeader()}
                footer={this.renderFooter()}>
                <div className={style['content']}>
                    {children}
                </div>
            </BaseModal>
        );
    }
}