# src/Popover.js File

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

    /**
     * 气泡组件<br/>
     * - 配合倾听者组件Whisper使用, 作为Whisper的target。
     *
     * 示例:
     * ```code
     *     const popover = ( // 可以通过style自定义位置
     *         <Popover>
     *             <ul className="ph-popover-list">
     *                 <li className="ph-popover-item">未上线单店</li>
     *                 <li className="ph-popover-item">未上线连锁店</li>
     *             </ul>
     *         </Popover>
     *     );
     * ```
     * ```code
     *     <Whisper placement="top" onTargetChange={()=>{console.log('气泡出现消失时额外的执行函数');}} target={popover} distance={10} >Top</Whisper>
     * ```
     *
     * @class Popover
     * @module 提示组件
     * @extends Component
     * @constructor
     * @since 1.0.0
     * @demo popover|popover.js {展示}
     * @show true
     * */
    export default class Popover extends Component{

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'popover'
             * */
            classPrefix: PropTypes.string,
            /**
             * 标签tagName
             * @property componentTag
             * @type String
             * */
            componentTag: PropTypes.string
        };

        static defaultProps = {
            classPrefix:'popover',
            componentTag: 'div',
            classMapping : {
                'top': 'top center-x',
                'bottom': 'bottom center-x',
                'left': 'left center-y',
                'right': 'right center-y',
                'top left': 'top left-x',
                'top right': 'top right-x',
                'bottom left': 'bottom left-x',
                'bottom right': 'bottom right-x'
            }
        };

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

            this.handleDocumentClick = this.handleDocumentClick.bind(this);

            document.addEventListener('click', this.handleDocumentClick, false);
        }

        handleDocumentClick(event){
            let el = event.target;

            if(!Tool.closest(el,'.ph-popover') && !(this.props.whisper==event.target)){
                this.props.onClose();
            }

            return false;
        }

        componentWillUnmount(){
            document.removeEventListener('click', this.handleDocumentClick, false);
        }

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

            return (
                <Component {...this.props}
                    className={classnames(
                        this.getProperty(true),
                        className
                    )}
                    style={Object.assign(styles, style)}
                >
                    <div className={Tool.setPhoenixPrefix('popover-arrow')}></div>
                    <div className={Tool.setPhoenixPrefix('popover-content')}>
                        {children}
                    </div>
                </Component>
            );
        }
    }