newICSS/src/common/components/ConfirmModal/index.jsx

import React, { Component } from 'react';
import styles from './index.less';
import OldPortal from './OldPortal';
import NewPortal from './NewPortal'
import PropTypes from 'prop-types';
import close from "./img/close.png";

/***
 * 弹窗组件
 * author:zxc@2018-11-19
 * 接收参数：
 * visible: Boolean,对话框是否可见
 * title： 弹窗标题, String
 * titleBg: 标题背景颜色
 * children: 包含的子组件
 * noFooter: 是否包含底部,Boolean, 默认为false
 * confirm： 点击确认回调
 * close：点击遮罩层或右上角叉
 * cancel: 点击取消按钮的回调
 * closable: 是否显示右上角的关闭按钮, Boolean, 默认为true
 * mask：是否显示遮罩, Boolean, 默认为true
 * maskClosable: 点击蒙层是否允许关闭, Boolean, 默认为false
 * okText: 确认按钮文字,String,默认为确认
 * okColor: 确认按钮文字颜色
 * okBorderColor: 确认按钮边框颜色
 * oKBg: 确认按钮背景颜色
 * cancelText: 取消按钮文字, String，默认为取消
 * cancelColor: 取消按钮文字颜色
 * cancelBorderColor:取消按钮边框颜色
 * cancelBg: 取消按钮背景颜色
 * width： 宽度, string|number, 默认为300
 * height: 弹窗高度, string|number, 默认为200
 ***/

const propTypes = {
    visible: PropTypes.bool,
    confirm: PropTypes.func,
    cancel: PropTypes.func,
    close: PropTypes.func,
    title: PropTypes.string,
    titleBg: PropTypes.string,
    noFooter: PropTypes.bool,
    okText: PropTypes.string,
    okColor: PropTypes.string,
    okBorderColor: PropTypes.string,
    oKBg: PropTypes.string,
    cancelText: PropTypes.string,
    cancelColor: PropTypes.string,
    cancelBorderColor: PropTypes.string,
    cancelBg: PropTypes.string,



}

const defaultProps = {
    titleBg: '#fff',
    noFooter: false,
    mask: true,
    maskClosable: true,
    closable: true,
    okText: '确认',
    okColor: 'red',
    okBorderColor: 'red',
    oKBg:'#fff',
    cancelText: '取消',
    cancelColor: '#414141',
    cancelBorderColor: '#414141',
    cancelBg: '#fff',
    width: '300px',
    height: '200px',
};

class ConfirmModal extends Component {
    constructor(props) {
        super(props);

        this.confirm = this.confirm.bind(this);
        this.cancel = this.cancel.bind(this);
        this.maskClick = this.maskClick.bind(this);
        this.closeModal = this.closeModal.bind(this)

    }
    
    

    closeModal() {
        const { close } = this.props
        close && close()
    }

    confirm() {
        const { confirm } = this.props
        confirm && confirm()
    }
    cancel() {
        const { cancel } = this.props
        cancel && cancel()
    }

    maskClick() {
        const { close } = this.props
        close && close()
    }

    render() {
        const {
            visible,
            title, 
            titleBg,
            children, 
            mask, 
            maskClosable,
            okText, 
            okColor,
            okBorderColor,
            oKBg,
            cancelText, 
            cancelColor,
            cancelBorderColor,
            cancelBg,
            width, 
            height, 
            closable, 
            noFooter,
            icon
        } = this.props;
        const marginLeft = -parseInt(width)/2
        const marginTop = -parseInt(height)/2
        return (
            <NewPortal visible={visible}>
                <div className={styles['modal-wrapper']} id='confirm'>
                    <div className={styles[['modal']]} style = {{width: width, marginLeft:marginLeft, minHeight:height, marginTop:marginTop}}>
                        <div className={styles['modal-title']} style={{background: titleBg}}>
                            {icon?<img src={icon} className={styles['icon']}/>:''}
                            {title ? title : ''} 
                            {closable ? <img onClick={this.closeModal} className={styles['modal-close']} src = {close}/> : false}
                        </div>
                        <div className={styles['modal-content']}>{children}</div>
                        {noFooter ? '' : <div className={styles['modal-operator']+' clearfix'}>
                            <div className={styles['modal-btn-box']}>
                                <div 
                                    onClick={this.confirm} 
                                    className={styles['modal-operator-confirm']}
                                    style={{borderColor: okBorderColor, background: oKBg, color: okColor}}>
                                    { okText}
                                </div>
                            </div>
                            <div className={styles['modal-btn-box']}>
                                <div 
                                onClick={this.cancel} 
                                className={styles['modal-operator-close']}
                                style={{borderColor: cancelBorderColor, background: cancelBg, color: cancelColor}}>
                                { cancelText}
                            </div>
                            </div>
                        </div>}
                    </div>
                    {mask ? <div className={styles['mask']}
                        onClick = {maskClosable === true ? this.maskClick : ()=>{}}
                    ></div> : ''}
                </div>
            </NewPortal>
        )
    }
}

ConfirmModal.propTypes = propTypes;
ConfirmModal.defaultProps = defaultProps;

export default ConfirmModal;