72 lines
1.5 KiB
React
72 lines
1.5 KiB
React
|
var React = require('react');
|
||
|
|
var Util = require('../util');
|
||
|
|
var LazyLoad = require('./mixins/lazy-load');
|
||
|
|
|
||
|
|
var LOADING_ICON = 'img/hourglass.svg';
|
||
|
|
var DEFAULT_ICON = 'img/default-icon.svg';
|
||
|
|
|
||
|
|
module.exports = React.createClass({
|
||
|
|
|
||
|
|
mixins: [LazyLoad],
|
||
|
|
|
||
|
|
getInitialState: function() {
|
||
|
|
return { icon: DEFAULT_ICON, currentTheme: undefined };
|
||
|
|
},
|
||
|
|
|
||
|
|
onInViewport: function() {
|
||
|
|
this.updateIconIfInViewport();
|
||
|
|
},
|
||
|
|
|
||
|
|
updateIconIfInViewport: function() {
|
||
|
|
|
||
|
|
var currentTheme = this.state.currentTheme;
|
||
|
|
var newTheme = this.props.theme;
|
||
|
|
|
||
|
|
if( !this.isInViewport() || newTheme === currentTheme ) return;
|
||
|
|
|
||
|
|
this.setState({ icon: LOADING_ICON, currentTheme: newTheme });
|
||
|
|
|
||
|
|
var desktopEntry = this.props.desktopEntry;
|
||
|
|
|
||
|
|
this._findIcon(this.props.icon, newTheme);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidUpdate: function() {
|
||
|
|
this.updateIconIfInViewport();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
|
||
|
|
var icon = this.state.icon;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<img src={icon} className="app-icon" />
|
||
|
|
);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_findIcon: function(iconPath, theme) {
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
console.log('Search icon %s:%s', iconPath, theme);
|
||
|
|
|
||
|
|
Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
|
||
|
|
.then(function(iconPath) {
|
||
|
|
if( !iconPath || /\.xpm$/.test(iconPath) ) {
|
||
|
|
return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
|
||
|
|
}
|
||
|
|
return iconPath;
|
||
|
|
})
|
||
|
|
.then(function(iconPath) {
|
||
|
|
global.window.requestAnimationFrame(function() {
|
||
|
|
self.setState({ icon: iconPath });
|
||
|
|
});
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|