popbean-react
Version:
let me think about something,comming soon...
80 lines (79 loc) • 2.52 kB
JSX
var React = require('react');
//
var AppNavMenuItem = React.createClass({
getInitialState:function(){
return {
open:false
};
},
render:function(){
var children = this.props.model.children || [];
//console.log('has render component',this.props.model.renderComponent,'children:',children);
if(this.props.model.renderComponent){
var model = this.props.model;
//<li class="divider"></li>
return (
<li className={this.state.open ? 'dropdown open':'dropdown'}>
<a className="dropdown-toggle" data-toggle="dropdown"
aria-expanded={this.state.open}
onClick={this.toggleMenuItem}
onBlur={this.toggleMenuItem}
style={{"cursor":"pointer"}}>
<i className={this.props.model.icon}></i>{this.props.model.label}{(children && children.length>0)?<i className="fa fa-caret-down"></i>:''}
</a>
<ul className="dropdown-menu dropdown-messages">
{children.map(function(child){
return (
<li>
{React.createElement(model.renderComponent,{data:child})}
</li>
);
})}
</ul>
</li>
);
}else{
return (
<li className={this.state.open ? 'dropdown open':'dropdown'} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<a className="dropdown-toggle" data-toggle="dropdown" aria-expanded={this.state.open} style={{"cursor":"pointer"}}>
<i className={this.props.model.icon}></i>{this.props.model.label}{(children && children.length>0)?<i className="fa fa-caret-down"></i>:''}
</a>
<ul className="dropdown-menu dropdown-user">
{children.map(function(child){
if(child.type == 'divider'){
return (<li className="divider"></li>);
}else{
if(child.url){
return (
<li><a href={child.url}><i className={child.icon}></i> {child.label}</a></li>
);
}else{
return (
<li><a style={{"cursor":"pointer"}}><i className={child.icon}></i> {child.label}</a></li>
);
}
}
})}
</ul>
</li>
);
}
},
onMouseOver:function(event){
if(!this.state.open){
this.setState({
open:true
});
}
},
onMouseOut:function(event){
var e = event.toElement || event.relatedTarget ;//特殊情况e为空
if (!e || e.parentNode == this || e == this) {//为了保障在child中时，不会被触发，试了几个浏览器没有问题
return;
}
this.setState({
open:false
});
}
});
module.exports = AppNavMenuItem;