src/menu/MenuList.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/>
 * - 通过activeName设置当前导航选中的菜单项， 必需。
 * - 通过onMenulistChange函数设置点击菜单项时的回调，函数内必需手动更改activeName值，必需。
 *
 * 主要属性和接口：
 * - activeName:设置当前导航选中的菜单项,默认null。 
 * - onMenulistChange:点击菜单项时的回调。 <br/>
 * 如：
 * ```code
 *     <Menu>
 *         <Menu.Header>
 *             标题一
 *         </Menu.Header>
 *         <Menu.Body>
 *             <Menu.Nav>
 *                  <Menu.List activeName={this.state.activeName} onMenulistChange={(name)=>{this.setState({activeName:name})}}>
 *                      ...
 *                  </Menu.List>
 *              </Menu.Nav>
 *         </Menu.Body>
 *     </Menu>
 * ```
 *
 * @class MenuList
 * @module 菜单组件
 * @extends Component
 * @constructor
 * @since 1.4.0
 * @demo menu|menu.js {展示}
 * @show true
 * */
export default class MenuList extends Component {
    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'menu-list'
         * */
        classPrefix: PropTypes.string,
        /**
         * 当前选中的项目name，对应item的name属性
         * @property activeName
         * @type String
         * @default null
         * */
        activeName: PropTypes.string,
        /**
         * 点击事件的回调函数
         * @method onMenulistChange
         * @type Function
         * @default null
         * */
        onMenulistChange: PropTypes.func
    };

    static defaultProps = {
        activeName: null,
        classPrefix:'menu-list',
        classMapping : {}        
    };

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

    changeActive(name){
        if(this.props.onMenulistChange) this.props.onMenulistChange(name);
    }

    renderChildren(){
        let _this = this;
        let newChildren = [];

        React.Children.forEach(this.props.children, function(child, index){
            newChildren.push(React.cloneElement(child, {
                key: index,
                activeName: _this.props.activeName,
                changeActive: _this.changeActive.bind(_this)
            }));
        });

        return newChildren;
    }

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

        return (
            <ul {...this.props} className={classnames(
                    this.getProperty(true),
                    className
                )}
            >
                {this.renderChildren()}
            </ul>
        );
    }
};