Reorganisierte den Code ein bisschen. Ich glaube, das macht den Code sauberer und einfacher zu stylen. Und hoffentlich beantwortet Ihre Frage :)
// 'components/Modal.js'
import React from 'react';
import ReactLoading from 'react-loading';
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
status: 'prompting' //'prompting', 'deleting', 'deleted'
};
}
removeUser =() => {
this.setState({ status: 'deleting' });
// simulate async loading action
setTimeout(
() =>
this.setState({
status: 'deleted'
}),
2000,
);
//simulate promise (function above then this below)
setTimeout(() => this.props.removeUser(this.props.data), 2001);
};
closeModal =() => {
this.props.closeModal();
this.setState({ status: 'prompting' });
};
render() {
const { id, name } = this.props.data;
const {status} = this.state;
// The gray background
const backdropStyle = {
position: 'fixed',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.3)',
padding: 50,
};
// The modal "window"
const modalStyle = {
backgroundColor: '#fff',
borderRadius: 3,
maxWidth: 400,
minHeight: 200,
margin: '0 auto',
padding: 30,
};
const modal = {
"prompting": (<div className="prompting">
<h5>You want to delete user {id} : {name}</h5>
<button onClick={this.removeUser}>Delete</button>
<button onClick={this.closeModal}>Cancel</button>
</div>
),
"deleting": (<div className="deleting">
<h5> Deleting </h5>
<div>
<ReactLoading type="spin" color="#444" />
</div>
</div>),
"deleted": (<div className="deleted">
<h5> Deleted </h5>
<button onClick={this.closeModal}>OK</button>
</div>)
};
if(this.props.displayModal){
return (
<div className="backdrop" style={backdropStyle}>
<div className="modal" style={modalStyle}>
{modal[status]}
</div>
</div>
);
}
else
return null;
}
}
export default Modal;