react-zeanium-ui-ui/src/ui/NavigationMenu.js

Zeanium UI Framework for React.js

require('./NavigationMenu.less');
var React = require('react');
var ReactDOM = require('react-dom');

var NavigationMenu = React.createClass({
	displayName:'NavigationMenu',
	getDefaultProps: function (){
		return {
			items: [],
			index: 0,
			path: '',
			className: ''
		};
	},
	getInitialState:function(){
		return {
			path: null
		}
	},

	componentDidMount:function(){
		this.fireIndex(this.props.index);
	},
	fireIndex: function (index){
		var _item = this._items[index];
		if(_item){
			this.__onItemClick(null, _item);
		}
	},
	__buildPath: function (item){
		var _value = this.props.onBuildPath && this.props.onBuildPath(item);
		if(!_value){
			_value = (item.prefix||'') + item.title + '_' + item.index;
		}

		return _value;
	},
	__onItemClick: function (event, item) {
		!!event && event.stopPropagation();
		this.setState({
			path: item.path
		});
		this.props.onItemClick && this.props.onItemClick(event, item);
	},
	__childRender: function (item, index){
		if(item.items&&item.items.length){
			return <ul className="c-navigation-menu">
				{
					item.items.map(function (_item, _index){
						_item.index = _index;
						_item.prefix = item.path||'';
						_item.path = this.__buildPath(_item);
						this._items[_item.path] = this._items[this._index++] = _item;
						return <li key={_item.path} onClick={(event)=>this.__onItemClick(event, _item)}>
							<div className={"item-content item " + (this.state.path === _item.path ? 'curr' : '')}><i className={"fa " + _item.icon} />{_item.title}</div>
						</li>;
					}.bind(this))
				}
			</ul>;
		}
	},
	__itemRender: function (item, index){
		item.index = index;
		item.path = this.__buildPath(item);
		this._items[item.path] = this._items[this._index++] = item;
		return <li key={item.path} onClick={(event)=>this.__onItemClick(event, item)}>
			{
				this.props.onItemRender?this.props.onItemRender(item):<div className={"item-content title " + (this.state.path === item.path ? 'curr' : '')}>
					<i className={"fa " + item.icon}></i>
					{item.title}
					{/*_ifExt && <i className="ext fa"></i>*/}
				</div>
			}
			{this.__childRender(item, index)}
		</li>;
	},
	render:function(){
		this._items = {};
		this._index = 0;
		return (
			<ul className={"c-navigation-menu " + this.props.className} style={this.props.style}>
				{
					this.props.items.map(this.__itemRender)
				}
			</ul>
		);
	}
});

module.exports = NavigationMenu;