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

169 lines
4.0 KiB
JavaScript
Raw Normal View History

2015-08-28 14:20:07 +02:00
var React = require('react');
var CategoryHeader = require('./category-header.js');
var AppList = require('./app-list.js');
2015-10-12 17:44:18 +02:00
var Nav = require('./nav.js');
var AnimateMixin = require('../mixins/animate');
2015-09-11 16:25:45 +02:00
var actions = require('../../store/actions');
var connect = require('react-redux').connect;
var debug = require('../../util/debug')('launcher-view');
2015-10-07 14:25:30 +02:00
var path = require('path');
2015-08-28 14:20:07 +02:00
2015-10-07 14:25:30 +02:00
var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
2015-08-28 14:20:07 +02:00
var LauncherView = React.createClass({
2015-08-28 14:20:07 +02:00
mixins: [AnimateMixin],
2015-08-28 14:20:07 +02:00
getInitialState: function() {
return {
currentItemPath: '',
currentItem: null
};
},
componentDidMount: function() {
var profilePath = process.env.PITAYA_PROFILE || DEFAULT_PROFILE;
2015-09-17 17:29:59 +02:00
this.props.dispatch(actions.common.loadProfile(profilePath));
},
2015-08-28 14:20:07 +02:00
componentWillReceiveProps: function(nextProps) {
if( nextProps.profile && !this.state.currentItem ) {
this.setState({ currentItem: nextProps.profile });
}
2015-08-28 14:20:07 +02:00
},
render: function() {
var currentItem = this.state.currentItem;
var items = currentItem && currentItem.items ? currentItem.items : [];
2015-08-28 14:20:07 +02:00
var currentItemPath = this.state.currentItemPath;
var header = currentItemPath !== '' ?
( <CategoryHeader
2015-10-12 17:44:18 +02:00
item={currentItem} /> ) :
null
;
var nav = currentItemPath !== '' ?
( <Nav
2015-08-28 14:20:07 +02:00
onBackClick={this.onBackClick}
item={currentItem}
itemPath={currentItemPath} /> ) :
null
;
2015-10-12 17:44:18 +02:00
var style = {};
if(currentItem && currentItem.background) {
style.backgroundImage = 'url('+currentItem.background+')';
}
2015-08-28 14:20:07 +02:00
return (
2015-10-12 17:44:18 +02:00
<div className="launcher" style={style}>
2015-08-28 14:20:07 +02:00
{header}
2015-10-12 17:44:18 +02:00
<div className="main">
{nav}
<AppList ref="appList"
items={items}
parentPath={currentItemPath}
onItemClick={this.onItemClick} />
</div>
2015-08-28 14:20:07 +02:00
</div>
);
},
onBackClick: function(itemPath) {
var parentPath = this._normalizeItemPath(itemPath).slice(0, -1);
var parentItem = this._getItemByPath(parentPath, this.props.profile);
2015-08-28 14:20:07 +02:00
this.play(this.refs.appList, 'slide-out-right 250ms ease-in-out')
.then(function() {
this.setState({currentItem: parentItem, currentItemPath: parentPath.join('.')});
return this.play(this.refs.appList, 'slide-in-left 250ms ease-in-out');
}.bind(this))
;
},
onItemClick: function(evt, itemPath, item) {
if(item.exec) {
debug('Launching application "'+item.exec+'"...');
var el = evt.currentTarget;
el.classList.add('pulse');
2015-08-28 14:20:07 +02:00
this.props.dispatch(actions.launcher.runApp(item.exec))
2015-08-28 14:20:07 +02:00
.then(function() {
el.classList.remove('pulse');
2015-08-28 14:20:07 +02:00
})
.catch(function() {
el.classList.remove('pulse');
2015-08-28 14:20:07 +02:00
})
;
} else {
this.play(this.refs.appList, 'slide-out-left 250ms ease-in-out')
.then(function() {
this.setState({ currentItemPath: itemPath, currentItem: item });
return this.play(this.refs.appList, 'slide-in-right 250ms ease-in-out');
}.bind(this))
;
}
},
_getItemByPath: function(itemPath, rootItem) {
itemPath = this._normalizeItemPath(itemPath);
var itemIndex = itemPath[0];
if(itemIndex === undefined) {
return rootItem;
}
if(!('items' in rootItem)) {
return undefined;
}
var subItem = rootItem.items[itemIndex];
if(itemPath.length === 0) {
return subItem;
}
return this._getItemByPath(itemPath.slice(1), subItem);
},
_normalizeItemPath: function(itemPath) {
if( Array.isArray(itemPath) ) return itemPath;
if((typeof itemPath === 'string' && itemPath.length === 0) || !itemPath) return [];
return itemPath.split('.').reduce(function(arr, index) {
if(index !== '') {
arr.push(+index);
}
return arr;
}, []);
}
});
function select(state) {
return {
processOpts: state.processOpts,
profile: state.profile
};
}
module.exports = connect(select)(LauncherView);