commit
60f4e9c5f1
@ -1,45 +1,38 @@ |
||||
const inherits = require('util').inherits |
||||
const Component = require('react').Component |
||||
const { Component } = require('react') |
||||
const h = require('react-hyperscript') |
||||
|
||||
|
||||
inherits(LoadingIndicator, Component) |
||||
module.exports = LoadingIndicator |
||||
|
||||
function LoadingIndicator () { |
||||
Component.call(this) |
||||
} |
||||
|
||||
LoadingIndicator.prototype.render = function () { |
||||
const { isLoading, loadingMessage } = this.props |
||||
|
||||
return ( |
||||
isLoading ? h('.full-flex-height', { |
||||
style: { |
||||
left: '0px', |
||||
zIndex: 10, |
||||
position: 'absolute', |
||||
flexDirection: 'column', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
height: '100%', |
||||
width: '100%', |
||||
background: 'rgba(255, 255, 255, 0.8)', |
||||
}, |
||||
}, [ |
||||
h('img', { |
||||
src: 'images/loading.svg', |
||||
}), |
||||
|
||||
h('br'), |
||||
|
||||
showMessageIfAny(loadingMessage), |
||||
]) : null |
||||
) |
||||
class LoadingIndicator extends Component { |
||||
renderMessage () { |
||||
const { loadingMessage } = this.props |
||||
return loadingMessage && h('span', loadingMessage) |
||||
} |
||||
|
||||
render () { |
||||
return ( |
||||
h('.full-flex-height', { |
||||
style: { |
||||
left: '0px', |
||||
zIndex: 50, |
||||
position: 'absolute', |
||||
flexDirection: 'column', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
height: '100%', |
||||
width: '100%', |
||||
background: 'rgba(255, 255, 255, 0.8)', |
||||
}, |
||||
}, [ |
||||
h('img', { |
||||
src: 'images/loading.svg', |
||||
}), |
||||
|
||||
h('br'), |
||||
|
||||
this.renderMessage(), |
||||
]) |
||||
) |
||||
} |
||||
} |
||||
|
||||
function showMessageIfAny (loadingMessage) { |
||||
if (!loadingMessage) return null |
||||
return h('span', loadingMessage) |
||||
} |
||||
module.exports = LoadingIndicator |
||||
|
Loading…
Reference in new issue