111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
|
|
import mui from 'material-ui'
|
|
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'
|
|
|
|
import RefreshIndicator from 'material-ui/lib/refresh-indicator'
|
|
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
|
|
|
|
const style = {
|
|
container: {
|
|
position: 'relative',
|
|
},
|
|
refresh: {
|
|
display: 'inline-block',
|
|
position: 'relative',
|
|
},
|
|
}
|
|
|
|
const {
|
|
Styles
|
|
} = mui
|
|
|
|
const Colors = Styles.Colors
|
|
|
|
const DefaultRawTheme = Styles.LightRawTheme
|
|
|
|
export default class EntryLoader extends React.Component {
|
|
constructor(props, context){
|
|
super(props, context)
|
|
this.state = {loaded: false}
|
|
}
|
|
|
|
static get childContextTypes(){
|
|
return {muiTheme: React.PropTypes.object}
|
|
}
|
|
|
|
getChildContext() {
|
|
return {
|
|
muiTheme: this.context.muiTheme || getMuiTheme(DefaultRawTheme)
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.updateState(this.props)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.updateState(nextProps)
|
|
}
|
|
|
|
updateState = (props) => {
|
|
props || (props = {})
|
|
|
|
var loaded = this.state.loaded
|
|
|
|
// update loaded state, if supplied
|
|
if ('loaded' in props) {
|
|
loaded = !!props.loaded
|
|
}
|
|
this.setState({loaded: loaded})
|
|
};
|
|
|
|
getContent = () => {
|
|
return this.props.children
|
|
}
|
|
|
|
getLoader = () => {
|
|
if(!this.state.loaded){
|
|
return (
|
|
<div key="loader">
|
|
<div className="loader">
|
|
<div className="spinner">
|
|
<RefreshIndicator
|
|
size={50}
|
|
left={0}
|
|
top={0}
|
|
loadingColor={"#FF9800"}
|
|
status="loading"
|
|
style={style.refresh}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
else{
|
|
return (<div key="loaded"></div>)
|
|
}
|
|
};
|
|
|
|
render(){
|
|
return (
|
|
<div
|
|
id={this.props.id || "entry-loader"}
|
|
style={style.container}
|
|
>
|
|
<ReactCSSTransitionGroup
|
|
transitionName="entry-loader"
|
|
transitionLeaveTimeout={200}
|
|
transitionEnterTimeout={200}
|
|
>
|
|
{this.getLoader()}
|
|
</ReactCSSTransitionGroup>
|
|
{this.getContent()}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|