/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2023-03-07 15:45:59
|
* @LastEditTime: 2023-03-07 15:46:10
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { Component } from 'react';
|
|
class ToastBox extends Component {
|
constructor() {
|
super();
|
this.transitionTime = 300;
|
this.state = { notices: [] };
|
this.removeNotice = this.removeNotice.bind(this);
|
}
|
|
getNoticeKey() {
|
const { notices } = this.state;
|
return `notice-${new Date().getTime()}-${notices.length}`;
|
}
|
|
addNotice(notice) {
|
const { notices } = this.state;
|
notice.key = this.getNoticeKey();
|
|
// notices.push(notice);//展示所有的提示
|
notices[0] = notice; //仅展示最后一个提示
|
|
this.setState({ notices });
|
if (notice.duration > 0) {
|
setTimeout(() => {
|
this.removeNotice(notice.key);
|
}, notice.duration);
|
}
|
return () => {
|
this.removeNotice(notice.key);
|
};
|
}
|
|
removeNotice(key) {
|
const { notices } = this.state;
|
this.setState({
|
notices: notices.filter((notice) => {
|
if (notice.key === key) {
|
if (notice.onClose) setTimeout(notice.onClose, this.transitionTime);
|
return false;
|
}
|
return true;
|
}),
|
});
|
}
|
|
render() {
|
const { notices } = this.state;
|
const icons = {
|
info: 'toast_info',
|
success: 'toast_success',
|
error: 'toast_error',
|
loading: 'toast_loading',
|
};
|
return (
|
<div className="toast">
|
{notices.map((notice) => (
|
<div className="toast_bg" key={notice.key}>
|
<div className="toast_box">
|
<div className={`toast_icon ${icons[notice.type]}`}></div>
|
<div className="toast_text">{notice.content}</div>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
}
|
}
|
|
export default ToastBox;
|
