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

var React = require('react');
var CategoryHeader = require('./category-header.js');
var AppList = require('./app-list.js');
var Nav = require('./nav.js');
var AnimateMixin = require('../mixins/animate');
var actions = require('../../store/actions');
var connect = require('react-redux').connect;
var logger = require('../../util/logger');
var CrossfadeImage = require('../common/crossfade-image');
var path = require('path');

var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
var DEFAULT_BACKGROUND = '';

var LauncherView = React.createClass({

  mixins: [AnimateMixin],

  getInitialState: function() {
    return {
      currentItemPath: '',
      currentItem: null
    };
  },

  componentDidMount: function() {
    var profilePath = process.env.PITAYA_PROFILE || DEFAULT_PROFILE;
    this.props.dispatch(actions.common.loadProfile(profilePath));
  },

  componentWillReceiveProps: function(nextProps) {
    if( nextProps.profile && !this.state.currentItem ) {
      this.setState({ currentItem: nextProps.profile });
    }
  },

  render: function() {

    var currentItem = this.state.currentItem;
    var items = currentItem && currentItem.items ? currentItem.items : [];
    var currentItemPath = this.state.currentItemPath;

    var header = currentItemPath !== '' ?
      ( <CategoryHeader
          item={currentItem} /> ) :
      null
    ;

    var nav = currentItemPath !== '' ?
      ( <Nav
          onBackClick={this.onBackClick}
          item={currentItem}
          itemPath={currentItemPath} /> ) :
      null
    ;

    var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;

    return (
      <div className="launcher">
        <CrossfadeImage src={background} />
        {header}
        <div className="main">
          {nav}
          <AppList ref="appList"
            items={items}
            parentPath={currentItemPath}
            onItemClick={this.onItemClick} />
        </div>
      </div>
    );

  },

  onBackClick: function(itemPath) {

    var parentPath = this._normalizeItemPath(itemPath).slice(0, -1);
    var parentItem = this._getItemByPath(parentPath, this.props.profile);

    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) {

    logger.debug(item);

    if(item.items) {

      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))
      ;

    } else if(item.exec) {

      var el = evt.currentTarget;
      el.classList.add('pulse');

      this.props.dispatch(actions.launcher.runApp(item.exec))
        .then(function() {
          el.classList.remove('pulse');
        })
        .catch(function() {
          el.classList.remove('pulse');
        })
      ;

    } else {
      logger.info('No action associated with item "'+item.label+'".');
    }

  },

  _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);