# src/menu/MenuBody.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';
    import Icon from '../Icon';

    /**
     * 菜单内容组件<br/>
     * - 通过placement设置菜单出现的位置和类型, 可选 [top,left,right,left-full,right-full,full-screen]。
     * - 可通过width设置侧边菜单的宽度, 当前placement为top和full-screen不生效。
     * - 可通过closeButton来配置菜单主体右上角X按钮是否显示。
     *
     * 主要属性和接口：
     * - placement:菜单出现的位置和类型, 默认top。
     * - width:侧边菜单的宽度, 当前placement为top和full-screen不生效。
     * - closeButton:菜单主体右上角X按钮是否显示, 默认不显示。<br/>
     * 如：
     * ```code
     *     <Menu>
     *         <Menu.Header>
     *             标题一
     *         </Menu.Header>
     *         <Menu.Body width={60} placement="left" closeButton>
     *             ...
     *         </Menu.Body>
     *     </Menu>
     * ```
     *
     * @class MenuBody
     * @module 菜单组件
     * @extends Component
     * @constructor
     * @since 1.3.0
     * @demo menu|menu.js {展示}
     * @show true
     * */
    export default class MenuBody extends Component{
        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'menu-body'
             * */
            classPrefix: PropTypes.string,
            /**
             * 菜单位置, 可选[top,left,right,left-full,right-full,full-screen], 默认top
             * @property placement
             * @type String
             * @default 'top'
             * */
            placement: PropTypes.string,
            /**
             * 自定义菜单宽度百分比（限左右）
             * @property width
             * @type Number
             * @default 50
             * */
            width: PropTypes.number,
            // closeMode: PropTypes.string,
            /**
             * 右上角按钮是否可见, 默认不可见
             * @property closeButton
             * @type Boolean
             * */
            closeButton: PropTypes.bool,
        };

        static defaultProps = {
            width: 50,
            classPrefix:'menu-body',
            placement: 'top',
            classMapping : {
                'top':'top',
                'left':'left',
                'right':'right',
                'left-full':'left-full',
                'right-full':'right-full',
                'full-screen':'full-screen'
            }
        };

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

        componentDidMount(){
            this.setSize();
        }

        componentDidUpdate(){
            this.setSize();
        }

        setSize(){
            let {visible, placement, width} = this.props;

            // if(placement=="top") this.menuBodyParent.style.height = visible? this.menuBody.offsetHeight+'px' : 0;

            if(this.props.visible && width){
                if(placement=="top") return;
                if(placement=="full-screen") width = 100;
                this.menuBodyParent.style.width = width +'%';
            }
        }

        renderAnimation(){
            let {visible,children,className} = this.props;

            if(visible){
                return (
                    <div {...this.props} className={classnames(this.getProperty(true),className, 'animated')}
                        ref={(menuBodyParent)=>{this.menuBodyParent = menuBodyParent;}}>
                        {this.renderCloseButton()}
                        {children}
                    </div>
                );
            }else{
                return '';
            }
        }

        renderCloseButton(){
            let {closeButton} = this.props;

            if(closeButton){
                return <Icon phIcon="close" className={classnames(setPhoenixPrefix('menu-close-button'))} onClick={::this.onChange} />;
            }else{
                return '';
            }
        }

        onChange(){
            this.props.changeVisible();
        }

        render(){
            let {placement} = this.props;
            let animateName = `slide-${this.props.placement}`;

            if(placement=="full-screen") animateName = "fade";

            return (
                <Animate transitionName={animateName}>
                    {this.renderAnimation()}
                </Animate>
            );
        }
    }