# src/modal/Dialog.js File

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

    import Animate from '../Animate';

    /**
     * <h5>弹出框组件，主要包括组件:</h5>
     * <strong><a href='../classes/Dialog.html'>Dialog 基础弹框</a></strong><br/>
     * <strong><a href='../classes/Alert.html'>Alert弹框</a></strong><br>
     * <strong><a href='../classes/Prompt.html'>Prompt弹框</a></strong>
     * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
     * @module 弹出框组件
     * @main 弹出框组件
     * @static
     */
    /**
     * 弹框组件<br/>
     * - 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。
     * - 通过visible设置弹框是否显示, 可选true/false, 必需。
     * - 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
     * - 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
     * - 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。
     *
     * 主要属性和接口：
     * - visible:弹框是否显示标识, 默认false不可见<br/>
     * - onClose:关闭弹框的功能函数<br/>
     * - closeButton:右上角关闭按钮是否显示的标识, 默认不显示<br/>
     * - shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭<br/>
     *
     * 示例:
     * ```code
     *     <Dialog visible={this.state.visible} onClose={::this.onClose} closeButton shadowDisabled>
     *         <Dialog.Title>标题标题</Dialog.Title>
     *         <Dialog.Body>
     *             <p>可自定义表格内容</p>
     *         </Dialog.Body>
     *         <Dialog.Footer>
     *             <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose}>取消</Button>
     *         </Dialog.Footer>
     *     </Dialog>
     * ```
     * ```code
     *     onShow(){
     *         this.setState({
     *             visible: true
     *         });
     *     }
     *     onClose(){
     *         this.setState({
     *             visible: false
     *         });
     *     }
     * ```
     *
     * @class Dialog
     * @module 弹出框组件
     * @extends Component
     * @constructor
     * @since 0.4.0
     * @demo dialog|dialog.js {展示}
     * @show true
     * */

    class Dialog extends Component{

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'dialog'
             * */
            classPrefix: PropTypes.string,
            /**
             * 标签tagName
             * @property componentTag
             * @type String
             * */
            componentTag:PropTypes.string,
            /**
             * 是否可见标识
             * @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,
            classPrefix:'dialog',
            componentTag:'div',
            classMapping : {}
        };

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

        onShadowClose(){
            let {shadowDisabled, onClose} = this.props;

            if(shadowDisabled) return;
            onClose();
        }

        renderShadow(){
            let {visible} = this.props;

            if(visible){
                return <div className={classnames(setPhoenixPrefix("dialog-shadow"), "animated")} onClick={::this.onShadowClose}></div>;
            }else{
                return '';
            }
        }

        renderContent(){
            let {visible, closeButton, onClose} = this.props;

            if(visible){
                return (
                    <div className={classnames(setPhoenixPrefix("dialog-main"), "animated")}>
                        <div className={classnames(setPhoenixPrefix("dialog-content"), "animated")}>
                            <a href="javascript:;" onClick={onClose} className={classnames(
                                setPhoenixPrefix("dialog-close"),
                                closeButton ? "show":"hide",
                                "gfs-icon icon-close"
                            )}></a>
                            {this.renderDialog()}
                        </div>
                    </div>
                );
            }else{
                return '';
            }
        }

        renderDialog(){
            let newChildren = [];
            let {visible, children} = this.props;

            React.Children.forEach(children, function(child, index){
                // console.log(child.type.name);

                newChildren.push(React.cloneElement(child,{
                    key: index,
                    visible: visible
                }));
            });

            return newChildren;
        }

        render(){
            let {componentTag:Component, className} = this.props;

            return (
                <Component {...this.props} className={classnames(
                    this.getProperty(true),
                    className
                )}>
                    <Animate>
                        {this.renderShadow()}
                    </Animate>
                    <Animate>
                        {this.renderContent()}
                    </Animate>
                </Component>
            );
        }
    }

    class DialogTitle extends Component{

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

        render(){
            return (
                <h2 {...this.props} className={classnames(
                    setPhoenixPrefix('dialog-title'),
                    this.props.className
                )}>
                    {this.props.children}
                </h2>
            );
        }
    }

    class DialogBody extends Component{

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

        render(){
            return (
                <div {...this.props} className={classnames(
                    setPhoenixPrefix('dialog-body'),
                    this.props.className
                )}>
                    {this.props.children}
                </div>
            );
        }
    }

    class DialogFooter extends Component{

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

        render(){
            return (
                <div {...this.props} className={classnames(
                    setPhoenixPrefix('dialog-footer'),
                    this.props.className,
                    'clearfix'
                )}>
                    {this.props.children}
                </div>
            );
        }
    }

    Dialog.Title = DialogTitle;
    Dialog.Body = DialogBody;
    Dialog.Footer = DialogFooter;

    export default Dialog;