src/modal/Alert.js File

import React,{PropTypes} from 'react';
import Component from '../utils/Component';
import classnames from 'classnames';
import {setPhoenixPrefix} from '../utils/Tool';

import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import Dialog from './Dialog';

/**
 * Alert组件<br/>
 * - 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。
 * - 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)
 * - 默认有[确定]1个按钮，点击[确定]默认的执行函数是onClose直接关闭。
 * - 通过visible设置弹框是否显示, 可选true/false, 必需。
 * - 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
 * - 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
 * - 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。
 *
 * 主要属性和接口：
 * - title:弹框的标题，必需。
 * - content:弹框的内容，必需。
 * - buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。
 * - visible:弹框是否显示标识, 默认false不可见。
 * - onClose:关闭弹框的功能函数。
 * - closeButton:右上角关闭按钮是否显示的标识, 默认不显示。
 * - shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。
 *
 * 示例:
 * ```code
 *      const buttons = [
            {text: "取消", phStyle: "gray", otherProps: {hollow: true}}, // text默认"确定", phStyle默认primary，onHandle默认onClose
            {text: "确定", onHandle: this.onConfirm}
        ];
        ...
 *      <Alert closeButton shadowDisabled visible={this.state.visible} onClose={::this.onClose.bind(this,'visible')} 
 *          title="这是标题" content="这里是弹出框的内容..." buttons={buttons} />
 * ```
 *
 * @class Alert
 * @module 弹出框组件
 * @extends Component
 * @constructor
 * @since 1.5.0
 * @demo alert|alert.js {展示}
 * @show true
 * */

export default class Alert extends Component{

    static propTypes = {
        /**
         * 标题
         * @property title
         * @type String|Element
         * */
        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
        /**
         * 内容
         * @property title
         * @type String|Element
         * */
        content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
        /**
         * 尾部按钮
         * @property buttons
         * @type Array
         * */
        buttons: PropTypes.array,
        /**
         * 是否可见标识
         * @property visible
         * @type Boolean
         * */
        visible: PropTypes.bool,
        /**
         * 关闭弹框的执行函数
         * @method onClose
         * @type Function
         * */
        onClose: PropTypes.func,
        /**
         * 右上角按钮是否可见, 默认不可见
         * @property closeButton
         * @type Boolean
         * */
        closeButton: PropTypes.bool,
        /**
         * 阴影部分是否点击可关闭弹框, 默认传了onClose之后可关闭
         * @property shadowDisabled
         * @type Boolean
         * */
        shadowDisabled: PropTypes.bool,
    };

    static defaultProps = {
        visible: false
    };

    constructor(props, context) {
        super(props, context);

        this.buttons = [
            {text: "确定", onHandle: props.onClose}
        ];
    }

    renderButtons(){
        let {buttons, onClose} = this.props;
        if(buttons) this.buttons = buttons;
        let buttonsType = this.buttons.length>2;
        
        return (
            <ButtonGroup phType={buttonsType ? "tacked":"justify"}>
                {
                    this.buttons.map((button,index) => {
                        return <Button key={index} {...button.otherProps} phSize="lg" phStyle={button.phStyle || 'primary'} block={buttonsType}
                            onClick={button.onHandle || onClose}>{button.text || "确定"}</Button>
                    })
                }
            </ButtonGroup>
        );
    }

    render(){
        let {visible, onClose, title, content, closeButton, shadowDisabled} = this.props;

        return (
            <Dialog visible={visible} onClose={onClose} closeButton={closeButton} shadowDisabled={shadowDisabled}>
                <Dialog.Title>{title}</Dialog.Title>
                <Dialog.Body>{content}</Dialog.Body>
                <Dialog.Footer>{this.renderButtons()}</Dialog.Footer>
            </Dialog>
        );
    }
}