pitaya-launcher/js/components/edit/edit-view.jsx

75 lines
2.1 KiB
React
Raw Normal View History

2015-08-28 14:20:07 +02:00
var React = require('react');
2015-09-03 15:50:23 +02:00
var connect = require('react-redux').connect;
2015-09-11 16:25:45 +02:00
var ProfileTree = require('./profile-tree.jsx');
2015-08-28 14:20:07 +02:00
var DesktopAppList = require('./desktop-app-list.jsx');
2015-09-11 16:25:45 +02:00
var ItemForm = require('./item-form.jsx');
var IconThemeSelector = require('./icon-theme-selector.jsx');
2015-09-18 12:13:24 +02:00
var ProfileMenu = require('./profile-menu.jsx');
2015-09-17 12:04:33 +02:00
var tree = require('../../util/tree');
2015-09-11 16:25:45 +02:00
var actions = require('../../store/actions');
var DragDropContext = require('react-dnd').DragDropContext;
var HTML5Backend = require('react-dnd/modules/backends/HTML5');
2015-08-28 14:20:07 +02:00
2015-09-03 15:50:23 +02:00
var EditView = React.createClass({
componentDidMount: function() {
this.props.dispatch(actions.edit.loadDesktopApps());
},
2015-08-28 14:20:07 +02:00
render: function() {
return (
<div className="edit">
2015-09-11 16:25:45 +02:00
<div className="menu-bar">
2015-09-18 12:13:24 +02:00
<ProfileMenu />
2015-09-11 16:25:45 +02:00
</div>
<div className="workspace">
<div className="left-menu">
2015-09-16 17:26:56 +02:00
<IconThemeSelector onThemeSelected={this.handleThemeSelect} />
2015-09-11 16:25:45 +02:00
<DesktopAppList
theme={this.props.theme}
desktopApps={this.props.desktopApps}
2015-09-16 17:26:56 +02:00
onItemDropped={this.handleItemDrop} />
2015-09-11 16:25:45 +02:00
</div>
<ProfileTree />
2015-09-16 17:26:56 +02:00
<ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
2015-09-11 16:25:45 +02:00
</div>
2015-08-28 14:20:07 +02:00
</div>
);
2015-09-11 16:25:45 +02:00
},
2015-09-16 17:26:56 +02:00
handleItemDrop: function(desktopEntry, targetItem) {
2015-09-11 16:25:45 +02:00
var newProfileItem = {
label: desktopEntry.Name,
icon: desktopEntry.Icon,
exec: desktopEntry.Exec
};
this.props.dispatch(actions.edit.addProfileItem(newProfileItem, targetItem));
},
2015-09-16 17:26:56 +02:00
handleThemeSelect: function(theme) {
this.props.dispatch(actions.edit.useIconTheme(theme));
},
handleItemChange: function(item, key, value) {
this.props.dispatch(actions.edit.updateProfileItem(item, key, value));
2015-08-28 14:20:07 +02:00
}
});
2015-09-03 15:50:23 +02:00
function select(state) {
return {
2015-09-11 16:25:45 +02:00
desktopApps: state.desktopApps,
profile: state.profile,
2015-09-16 17:26:56 +02:00
theme: state.theme,
2015-09-17 12:04:33 +02:00
selectedItem: tree.matches(state.profile, {selected: true})[0]
2015-09-03 15:50:23 +02:00
};
}
2015-09-11 16:25:45 +02:00
module.exports = DragDropContext(HTML5Backend)(connect(select)(EditView));