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

Zeanium UI Framework for React.js

require('./TreeMenu.less');
var React = require('react');
var ListView = require('./ListView');
var Icon = require('./Icon');

var TreeMenuItem = React.createClass({
	displayName: 'TreeMenuItem',
	getDefaultProps: function () {
		return {
			active: true
		};
	},
	getInitialState: function(){
		return {
			active: null
		};
	},
	componentDidMount:function(){
		this.active(this.props.active);
	},
	__onItemClick: function (event, item, index){
		this.props.singleSelect && this.setState({ currIndex: index });
		item.index = index;
		if(event){
			event.stopPropagation();
			event.preventDefault();
		}
		this.props.onClick && this.props.onClick(event, item);
	},
	active: function(active){
		var _icon = this.refs.icon;
		if(!_icon){ return; }
		if(!!active){
			_icon.setState({
				icon: 'fa-caret-down'
			});
		} else {
			_icon.setState({
				icon: 'fa-caret-right'
			});
		}
		this.setState({
			active: active
		});
	},
	__onIconClick: function (event, icon){
		this.active(!this.state.active);
	},
	renderIcon: function (){
		var _seps = [];
		for(var i = 0, _len = this.props.sep; i<_len; i++){
			_seps.push(1);
		}
		return <div className="seps">
			{
				_seps.map(function (item, index){
					return <div key={index} className="sep"></div>;
				})
			}
			<span className="sep">
				{this.__isTreeRow() && <Icon ref="icon" onClick={this.__onIconClick} />}
			</span>
		</div>;
	},
	__isTreeRow: function (){
		var _return = this.props.isTreeRow && this.props.isTreeRow(this.props, this);
		if(_return === undefined) {
			_return = !!this.props.sons;
		}

		return _return;
	},
	render:function(){
		var _sep = this.props.sep;

		return (
			<div className="tree-row" data-active={this.state.active}>
				<div className="row-title">{this.renderIcon()}<span>{this.props.label}</span></div>
				{this.__isTreeRow() && <TreeMenu sep={++_sep} autoLoad={true} data={this.props.data} ref="row_content" />}
			</div>
		);
	}
});

var TreeMenu = React.createClass({
	getDefaultProps: function () {
		return {
			sep: 0,
			autoLoad: true,
			singleSelect: true
		};
	},
	displayName: 'TreeMenu',
	getInitialState: function(){
		return {
			currIndex: null,
			data: null
		}
	},
	componentDidMount:function(){

	},
	__onItemClick: function (event, item, index){
		this.props.singleSelect && this.setState({ currIndex: index });
		item.index = index;
		if(event){
			event.stopPropagation();
			event.preventDefault();
		}
		this.props.onClick && this.props.onClick(event, item);
	},
	__itemRender: function (item, index){
		var _content = null;
		if(typeof item=='string'){
			item = { text: item, value: item };
		}
		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}
		if(!_content){
			_content = <TreeMenuItem sep={this.props.sep} isTreeRow={this.props.isTreeRow} key={index} {...item} />;
		}

		return _content;
	},
	render:function(){
		return (
			<ListView skin="tree" autoLoad={this.props.autoLoad||false} data={this.props.data} itemRender={this.__itemRender} />
		);
	}
});

module.exports = TreeMenu;