popbean-react
Version:
let me think about something,comming soon...
252 lines (248 loc) • 7.54 kB
JavaScript
var React = require('react/addons');
//
var List = require('../../../src/bs3/list');
var Panel = require('../../../src/bs3/panel');
var ActionButton = require('../../../src/bs3/action-button');
var sb_style = require('../../../less/bs3/sb-spa-2.less');
//var sb_mini_style = require('../../less/bs3/sidebar.less');
var Select = require('react-select');
var select_css = require('../../../node_modules/react-select/dist/default.css');
//
var LensedStateMixin = require('../../../src/bs3/linked-state');
//
var left_model = [
{
"code":"code_1",
"label":"label_1"
},
{
"code":"code_2",
"label":"label_2"
}
];
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
var RightFootBar = React.createClass({
getDefaultProps:function(){
return {
multi:true
};
},
getInitialState:function(){
return {
};
},
render:function(){
return (
<div className="panel-footer clearfix">
<div className="input-group pull-right" style={{"width":"100%"}}>
<Select
name="form-field-name"
placeholder="输入待添加的内容"
value={this.props.selected}
options={this.props.dataSource}
multi={this.props.multi}
onChange={this.props.refChange}
/>
<span className="input-group-btn">
<ActionButton icon="glyphicon glyphicon glyphicon-ok" type="icon" handler={this.props.onAddSave}/>
<ActionButton icon="glyphicon glyphicon-remove" type="icon" handler={this.props.onDelete}/>
<ActionButton icon="glyphicon glyphicon-triangle-top" type="icon"/>
<ActionButton icon="glyphicon glyphicon-triangle-bottom" type="icon"/>
</span>
</div>
</div>
);
}
});
var RightListItemRender = React.createClass({
render:function(){
return (
<div className="input-group">
<span className="input-group-addon">
<input type="checkbox" aria-label="..." oncChange={this.props.onChange}/>
</span>
<span className="form-control" aria-label="...">{this.props.data.label}</span>
</div>
);
}
});
var List2List = React.createClass({
getDefaultProps:function(){
return {
title:'hello world',
};
},
getInitialState:function(){
return {
data:{
}
};
},
componentDidMount:function(){
fetch('/service/cms/resource-mapping/role-account/model')
.then(function(response){
return response.json();
}).then(function(json){
var data = json['data'];
}).catch(function(ex){
console.log(ex);
});
},
render:function(){//怎么看怎么觉得应该有个壳子
//<PanelView title="" icon="" titlebar={SomeBar}><List /></>
var titlebar = (
<div className="input-group pull-right" style={{"width":"50%"}}>
<input ref="subject_filter" type="text" className="form-control" placeholder="Search for..." onChange={this.fetchSubject}/>
<span className="input-group-btn">
<button className="btn btn-default" type="button">Go!</button>
</span>
</div>
);
var right_tb = (
<div className="input-group pull-right" style={{"width":"50%"}}>
<input type="text" className="form-control" placeholder="Search for..."/>
<span className="input-group-btn">
<button className="btn btn-default" type="button">Go!</button>
</span>
</div>
);
//
var self = this;
var refChange = function(ids){
self.setState({selected:ids});
};
var footbar = (
<RightFootBar onAddSave={this.onAddSave.bind(this)} dataSource={options}
onDelete={this.onDelete.bind(this)}
selected={this.state.selected}
refChange={refChange}/>
);
var left_footbar = (
<div className="panel-footer clearfix">
双击后，自动添加至右侧
</div>
);
var right_item_render =
React.createClass({
mixins:[LensedStateMixin],
getDefaultProps:function(){
return {
data:{
selected:false
}
};
},
getInitialState:function(){
return {
data:{
}
};
},
render:function(){
//<input type="checkbox" aria-label="..." checkedLink={this.linkState('data.selected')}/>
return (
<div className="input-group">
<span className="input-group-addon">
<input type="checkbox" aria-label="..." checked={this.props.data.selected} onChange={self.changeChoice.bind(self,this.props.data)}/>
</span>
<span className="form-control" aria-label="...">{this.props.data.label}</span>
</div>
);
}
});
//<actionbutton icon="" type="icon" handler= label=/>
console.log('render beging',left_model);
var list_model = left_model;
return(
<div id="page-wrapper">
<div className="row">
<div className="col-lg-12">
<h3 className="panel-heading">验证资源授权相关界面</h3>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<Panel title="subject list" icon="fa fa-bar-chart-o fa-fw" showborder="false" titlebar={titlebar}>
<List model={this.state.listModel} onItemClick={self.fetchResource}/>
</Panel>
</div>
<div className="col-lg-6">
<Panel title="resource list" icon="fa fa-bar-chart-o fa-fw" showborder="false"
titlebar={right_tb} footbar={footbar}>
<List model ={this.state.listModel} renderComponent={right_item_render} ref="rightList"/>
</Panel>
</div>
</div>
</div>
);
},
onAddSave:function(){
var value = this.state.selected;//id1,id2不是字符串
var id_array = value.split(',');
//从model中找到这些值，然后，添加这些选中的到其中
},
logChange:function(opt){
console.log('change:',opt);
},
changeChoice:function(data){//根据传来的数据找到，隶属的state
left_model.map(function(item){
if(item['code'] == data['code']){
item['selected'] = !item['selected'];
}
});
console.log('this.props.data',data);
},
onDelete:function(){//删除被选中的数据
var tmp = [];
left_model.map(function(item){
if(!item.selected){
tmp.push(item);
}
});
left_model = tmp;
this.setState({
listModel:tmp
});
},
fetchResource:function(data){//当前选中的行
},
fetchSubject:function(event){
var filter = event.target.value;
fetch('/sevice/cms').then(function(response){
return response.json();
}).then(function(json){
var tmp = json['data'];
})
.catch(function(ex){
console.log(ex);
});
}
});
module.exports = List2List;
/*
<div className="panel-footer">Panel footer</div>
<div className="input-group">
<input type="text" className="form-control" placeholder="Search for..."/>
<span className="input-group-btn">
<button className="btn btn-default" type="button">Go!</button>
</span>
</div>
<div className="panel panel-default">
<div className="panel-heading clearfix">
<span className="panel-title pull-left" style={{"padding-top":"7.5px"}}>
<i className="fa fa-bar-chart-o fa-fw"></i>
subject list
</span>
<div className="input-group pull-right" style={{"width":"50%"}}>
<input type="text" className="form-control" placeholder="Search for..."/>
<span className="input-group-btn">
<button className="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<List model ={left_model}/>
</div>
*/