newICSS/src/common/components/Notify/notify.js

import React, { Component } from 'react';
import style from './index.less';
import className from 'classnames'
import close from "./img/close.png";

class NotifyBox extends Component {
    constructor() {
        super()
        this.transitionTime = 300
        this.state = { notices: [] ,timer:null}
        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) {
            clearTimeout(this.state.timer);
            const timer = setTimeout(() => {
                this.removeNotice(notice.key)
            }, notice.duration)
            this.setState({timer})
        }
        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: 'notify-info',
            success: 'notify-success',
            error: 'notify-error',
        }
        const styles = {
            success: {background:'#000',color:'#fff',opacity:'0.8'},
            error: {background:'#000',color:'#fff',opacity:'0.8'},
            info:{background:'#000',color:'#fff',opacity:'0.8'}
            // success: {background:'#7F7F7F',color:'#fff'},
            // error: {background:'#7F7F7F',color:'#fff'},
            // info:{background:'#7F7F7F',color:'#fff'}
        }
        return (
            <div className={style["notify"]}>
                {
                    notices.map(notice => (
                        <div className={style["notify-bg"]} key={notice.key}>
                            <div className={style['notify-box']} style={styles[notice.type]}>
                                <div className={style[`${icons[notice.type]}`]}></div>
                                <div className={style['notify-text']}>{notice.content}</div>
                                {notice.showClose&&<img  className={style['notify-close']} onClick={()=>{this.removeNotice(notice.key)}} src={close}/>}
                            </div>
                        </div>
                    ))
                }
            </div>
        )
    }
}

export default NotifyBox