ws-react-menu-tree/src/menuTree.js

import React, { Component } from 'react';
import classnames from 'classnames';
import { FlexDiv } from 'ws-react-flex-layout';
import FontIcon from 'material-ui/FontIcon';

class WsReactTreeMenu extends React.Component {
    constructor(props) {
        super(props);

        this.DEFAULT_PREFIX_CLASS = 'menu-tree';
    }

    componentWillReceiveProps(newProps) {
        newProps.items.forEach(item => {
            if (this.isSelectItem(item)) {
                item.isOpen = true;
                this.forceUpdate();
            }
        });
    }

    /**
     * Этот пункт надо выделить
     * @param {*} item 
     */
    isSelectItem(item) {
        if (this.props.addConditionForSelect && this.props.addConditionForSelect(item)) {
            return true;
        }
        return false;
    }

    /**
     * Скрыть/Раскрыть дочерние пункты в меню
     * @param {*} item 
     */
    toggleChild(item) {
        item.isOpen = !item.isOpen;
        this.forceUpdate();
    }

    /**
     * Экшен по клику на пункте меню
     * @param {*} item 
     */
    handlerClick(item) {
        if (item && item.child && item.child.length) {
            this.toggleChild(item);
        }
        this.props.handlerClick(item);
    }

    /**
     * Получить объект класса для элемента меню
     * @param {*} item 
     */
    getClassItem(item, prefixClass) {
        let itemClassObj = {};
        itemClassObj[this.DEFAULT_PREFIX_CLASS + '__item--select'] = this.isSelectItem(item);
        itemClassObj[prefixClass + '__item--select'] = this.isSelectItem(item);
        return itemClassObj;
    }

    render() {
        const prefixClass = this.props.prefixClass ? this.props.prefixClass : this.DEFAULT_PREFIX_CLASS;
        return (
            <div>
                {
                    this.props.items.map((item, index) =>
                        <div key={index} className={classnames(
                            this.DEFAULT_PREFIX_CLASS + '__item-wrap',
                            prefixClass + '__item-wrap'
                        )}>
                            <FlexDiv row="start start" className={classnames(
                                this.DEFAULT_PREFIX_CLASS + '__item',
                                prefixClass + '__item',
                                'pointer',
                                this.getClassItem(item, prefixClass)
                            )} onClick={() => this.handlerClick(item)}>
                                <FlexDiv flex={true}>{item.title}</FlexDiv>
                                {
                                    !!item.child && !!item.child.length &&
                                    <FontIcon className={classnames(
                                        'material-icons',
                                        'pointer'
                                    )}>{item.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</FontIcon>
                                }
                            </FlexDiv>

                            {
                                !!item.isOpen && !!item.child && !!item.child.length &&
                                <div className={classnames(
                                    this.DEFAULT_PREFIX_CLASS + '__item-child-wrap',
                                    prefixClass + '__item-child-wrap'
                                )}>
                                    <WsReactTreeMenu
                                        prefixClass={prefixClass}
                                        addConditionForSelect={this.props.addConditionForSelect}
                                        handlerClick={this.props.handlerClick}
                                        items={item.child} />
                                </div>
                            }
                        </div>
                    )
                }
            </div>
        );
    }
}

export default WsReactTreeMenu;