import classnames from 'classnames' ; import * as React from 'react' ; import Notification from 'rmc-notification' ; import Icon from '../icon' ; import './style/index.scss' ; const SHORT = 3 ; interface IToastConfig { duration : number ; mask : boolean ; } const config = { duration : SHORT , mask : true } ; enum toastType { success = 'success' , fail = 'fail' , info = 'info' , loading = 'loading' , offline = 'offline' } let messageInstance ; let messageNeedHide ; const prefixCls = 'cp-ui-toast' ; function getMessageInstance ( mask , callback ) { return Notification . newInstance ( { prefixCls , style : { } , transitionName : 'cp-ui-fade' , className : classnames ( { [ `${ prefixCls }-mask` ] : mask , [ `${ prefixCls }-nomask` ] : ! mask } ) } , ( notification ) => callback && callback ( notification ) ) ; } function notice ( content , type , duration = config . duration , onClose , mask = config . mask ) { const iconTypes = { info : '' , success : 'check-circle-o' , fail : 'close' , offline : 'meh-o' , loading : 'circle-o-notch' } ; const iconType = iconTypes [ type ] ; messageNeedHide = false ; getMessageInstance ( mask , notification => { if ( ! notification ) { return ; } if ( messageInstance ) { messageInstance . destroy ( ) ; messageInstance = null ; } if ( messageNeedHide ) { notification . destroy ( ) ; messageNeedHide = false ; return ; } messageInstance = notification ; notification . notice ( { duration , style : { } , content : ! ! iconType ? ( < div className = { `${ prefixCls }-text ${ prefixCls }-text-icon` } role = "alert" aria - live = "assertive" > < Icon type = { iconType } size = "32px" spin = { type === 'loading' } /> < div className = { `${ prefixCls }-text-info` } > { content } < /div> < /div>) : (<div className={`${prefixCls}-text`} role="alert" aria-live="assertive"> < div > { content } < /div> < /div>), closable : true , onClose ( ) { if ( onClose ) { onClose ( ) ; } notification . destroy ( ) ; notification = null ; messageInstance = null ; } } ) ; } ) ; } export default { SHORT , LONG : 8 , show ( content , duration ? , mask ? ) { return notice ( content , toastType . info , duration , ( ) => { } , mask ) ; } , info ( content , duration ? , onClose ? , mask ? ) { return notice ( content , toastType . info , duration , onClose , mask ) ; } , success ( content , duration ? , onClose ? , mask ? ) { return notice ( content , toastType . success , duration , onClose , mask ) ; } , fail ( content , duration ? , onClose ? , mask ? ) { return notice ( content , toastType . fail , duration , onClose , mask ) ; } , offline ( content , duration ? , onClose ? , mask ? ) { return notice ( content , toastType . offline , duration , onClose , mask ) ; } , loading ( content , duration ? , onClose ? , mask ? ) { return notice ( content , toastType . loading , duration , onClose , mask ) ; } , hide ( ) { if ( messageInstance ) { messageInstance . destroy ( ) ; messageInstance = null ; } else { messageNeedHide = true ; } } , config ( conf = { } ) { const { duration = SHORT , mask } = conf ; config . duration = duration ; if ( mask === false ) { config . mask = false ; } } } ;