74 lines
1.4 KiB
JavaScript
74 lines
1.4 KiB
JavaScript
import React from "react";
|
|
const PropTypes = React.PropTypes;
|
|
|
|
var styles = {
|
|
container: {
|
|
bottom: 0,
|
|
fontSize: "55px",
|
|
left: 0,
|
|
position: "fixed",
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
content: {
|
|
marginTop: "30px",
|
|
position: "absolute",
|
|
textAlign: "center",
|
|
width: "100%"
|
|
}
|
|
};
|
|
|
|
class Loading extends React.Component {
|
|
constructor(props, context, updater) {
|
|
super(props, context, updater);
|
|
this.originalText = props.text;
|
|
this.state = {
|
|
text: this.originalText
|
|
};
|
|
}
|
|
|
|
componentWillMount() {
|
|
const stopper = `${this.originalText}...`;
|
|
this.interval = setInterval(() => {
|
|
if (this.state.text === stopper) {
|
|
// Usually: avoid setState in cDM, because it causes a re-render.
|
|
this.setState({
|
|
text: this.originalText
|
|
});
|
|
}
|
|
else {
|
|
this.setState({
|
|
text: `${this.state.text}.`
|
|
});
|
|
}
|
|
}, this.props.speed);
|
|
console.log("Loading: cDM", this.interval);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("Loading: cWU", this.interval);
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
render() {
|
|
console.log("Loading: render");
|
|
return (
|
|
<div style={styles.container}>
|
|
<p style={styles.content}>{this.state.text}</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Loading.defaultProps = {
|
|
speed: 300,
|
|
text: "Loading"
|
|
};
|
|
|
|
Loading.propTypes = {
|
|
speed: PropTypes.number,
|
|
text: PropTypes.string
|
|
};
|
|
|
|
export default Loading;
|