pitaya-launcher/js/components/edit/profile-tree.js

97 lines
2.1 KiB
JavaScript
Raw Normal View History

2015-09-11 16:25:45 +02:00
var React = require('react');
var connect = require('react-redux').connect;
var actions = require('../../store/actions');
var TreeItem = require('./tree-item.js');
2015-09-11 16:25:45 +02:00
var TreeNode = React.createClass({
render: function() {
var data = this.props.data || {};
var subItems = data.items || [];
var listElements = subItems.map(function(subItem, i) {
return (
<li key={i} >
2015-09-16 17:26:56 +02:00
<TreeNode data={subItem}
selectedItem={this.props.selectedItem}
onItemClicked={this.props.onItemClicked}
onItemMoved={this.props.onItemMoved}
2015-10-10 18:44:31 +02:00
onItemRemoved={this.props.onItemRemoved}
2015-09-16 17:26:56 +02:00
theme={this.props.theme} />
2015-09-11 16:25:45 +02:00
</li>
);
}.bind(this));
var appEntry = data.icon || data.label ?
2015-09-16 17:26:56 +02:00
this.renderTreeItem(data):
2015-09-11 16:25:45 +02:00
null
;
return (
<div className="tree-item">
{appEntry}
<ul>
{listElements}
</ul>
</div>
);
2015-09-16 17:26:56 +02:00
},
renderTreeItem: function(data) {
return (
<TreeItem data={data}
selected={data.selected}
{...this.props} />
);
2015-09-11 16:25:45 +02:00
}
});
var ProfileTree = React.createClass({
render: function() {
return (
<div className="profile-tree">
2015-09-16 17:26:56 +02:00
{this.renderTreeNode(this.props.profile)}
2015-09-11 16:25:45 +02:00
</div>
);
},
2015-09-16 17:26:56 +02:00
renderTreeNode: function(data) {
return (
<TreeNode data={data}
selectedItem={this.props.selectedItem}
onItemClicked={this.onItemSelected}
onItemMoved={this.onItemMoved}
2015-10-10 18:44:31 +02:00
onItemRemoved={this.onItemRemoved}
2015-09-16 17:26:56 +02:00
theme={this.props.theme} />
);
},
2015-09-11 16:25:45 +02:00
onItemMoved: function(movedItem, targetItem) {
this.props.dispatch(actions.edit.moveProfileItem(movedItem, targetItem));
2015-09-16 17:26:56 +02:00
},
onItemSelected: function(selectedItem) {
this.props.dispatch(actions.edit.selectProfileItem(selectedItem));
2015-10-10 18:44:31 +02:00
},
onItemRemoved: function(selectedItem) {
this.props.dispatch(actions.edit.removeProfileItem(selectedItem));
2015-09-11 16:25:45 +02:00
}
});
function select(state) {
return {
2015-09-16 17:26:56 +02:00
profile: state.profile,
theme: state.theme
2015-09-11 16:25:45 +02:00
};
}
module.exports = connect(select)(ProfileTree);