89 lines
2.0 KiB
JavaScript
89 lines
2.0 KiB
JavaScript
var React = require('react');
|
|
var Util = require('../../util');
|
|
var LazyLoad = require('../mixins/lazy-load');
|
|
var logger = Util.Logger;
|
|
var _ = require('lodash');
|
|
|
|
var LOADING_ICON = 'img/hourglass.svg';
|
|
var DEFAULT_ICON = 'img/default-icon.svg';
|
|
|
|
module.exports = React.createClass({
|
|
|
|
mixins: [LazyLoad],
|
|
|
|
componentWillMount: function() {
|
|
if(!this._findIconDebounced) {
|
|
this._findIconDebounced = _.debounce(this._findIcon, 250);
|
|
}
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return { icon: DEFAULT_ICON, iconPath: DEFAULT_ICON, currentTheme: '' };
|
|
},
|
|
|
|
onInViewport: function() {
|
|
this.updateIconIfInViewport();
|
|
},
|
|
|
|
updateIconIfInViewport: function() {
|
|
|
|
var currentIcon = this.state.icon;
|
|
var newIcon = this.props.icon;
|
|
var currentTheme = this.state.currentTheme;
|
|
var newTheme = this.props.theme;
|
|
|
|
var shouldUpdate = this.isInViewport() &&
|
|
( (newTheme && newTheme !== currentTheme) || (newIcon && newIcon !== currentIcon) )
|
|
;
|
|
|
|
if( !shouldUpdate ) return;
|
|
|
|
this.setState({ icon: newIcon, iconPath: LOADING_ICON, currentTheme: newTheme });
|
|
|
|
this._findIconDebounced(newIcon, newTheme);
|
|
|
|
},
|
|
|
|
componentDidUpdate: function() {
|
|
this.updateIconIfInViewport();
|
|
},
|
|
|
|
render: function() {
|
|
|
|
var icon = this.state.iconPath;
|
|
|
|
var style = {
|
|
backgroundImage: 'url('+icon+')'
|
|
};
|
|
|
|
return (
|
|
<div className="app-icon" style={style}></div>
|
|
);
|
|
|
|
},
|
|
|
|
_findIcon: function(iconPath, theme) {
|
|
|
|
var self = this;
|
|
|
|
logger.debug('Search icon %s:%s', iconPath, theme);
|
|
|
|
Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
|
|
.then(function(iconPath) {
|
|
if(!iconPath) return DEFAULT_ICON;
|
|
return Util.System.exists(iconPath)
|
|
.then(function(exists) {
|
|
return exists ? iconPath : DEFAULT_ICON;
|
|
})
|
|
;
|
|
})
|
|
.then(function(iconPath) {
|
|
logger.debug('Found icon %s', iconPath);
|
|
self.setState({ iconPath: iconPath });
|
|
})
|
|
;
|
|
|
|
}
|
|
|
|
});
|