# src/menu/MenuHeader.js File

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

    import Icon from '../Icon';

    /**
     * 菜单头部组件<br/>
     * - 通过align设置菜单按钮的位置, 可选[left, right]。
     *
     * 主要属性和接口：
     * - align:设置菜单按钮的位置,默认left。 <br/>
     * 如：
     * ```code
     *     <Menu>
     *         <Menu.Header align="right">
     *             标题一
     *         </Menu.Header>
     *         <Menu.Body>
     *             ...
     *         </Menu.Body>
     *     </Menu>
     * ```
     *
     * @class MenuHeader
     * @module 菜单组件
     * @extends Component
     * @constructor
     * @since 1.3.0
     * @demo menu|menu.js {展示}
     * @show true
     * */
    export default class MenuHeader extends Component {
        constructor(props, context){
            super(props, context);
        }

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'menu-header'
             * */
            classPrefix: PropTypes.string,
            /**
             * 菜单按钮位置, 可选[left,right], left
             * @property align
             * @type String
             * @default 'left'
             * */
            align: PropTypes.string,
        };

        static defaultProps = {
            align: 'left',
            classPrefix:'menu-header',
            classMapping : {
                'left':'left',
                'right':'right'
            }
        };

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

        render(){
            let {className} = this.props;

            return (
                <div {...this.props} className={classnames(
                        this.getProperty(true),
                        className
                    )}
                >
                    <Icon phIcon="menu" onClick={::this.onChange}/>
                    <div className={setPhoenixPrefix('menu-header-content')}>{this.props.children}</div>
                </div>
            );
        }
    };