import * as React from "react" ; import { Button } from "./shared/Button" ; import { GoX } from "./shared/Icons" ; export declare type ToastKind = "info" | "error" | "warning" ; export class ToastContainer extends React . Component < { } , { toasts : Array < { message : JSX . Element ; kind : ToastKind ; } > ; } > { constructor ( props ? ) { super ( props ) ; this . state = { toasts : [ ] } ; } showToast ( message , kind = "info" ) { const { toasts } = this . state ; toasts . push ( { message , kind } ) ; this . setState ( { toasts } ) ; } private onDismiss ( index ) { this . setState ( ( prevState ) => ( { toasts : prevState . toasts . filter ( ( key , value ) => value !== index ) } ) ) ; } render ( ) { if ( this . state . toasts . length === 0 ) { return null ; } return < div className = "toast-container" > { this . state . toasts . map ( ( toast , key ) => < Toast onDismiss = { this . onDismiss . bind ( this , key ) } key = { key } message = { toast . message } kind = { toast . kind } / > ) } < /div>; } } export interface ToastProps { message : JSX . Element ; kind ? : ToastKind ; onDismiss : Function ; } export class Toast extends React . Component < ToastProps , { } > { static defaultProps : ToastProps = { message : null , kind : "info" , onDismiss : ( ) => { } } ; render ( ) { const { message , onDismiss } = this . props ; const className = "toast " + this . props . kind ; return < div className = { className } > < div className = "toast-header" > { message } < Button icon = { < GoX / > } customClassName = { "button-toast" } label = "Dismiss" title = "Dismiss" onClick = { onDismiss } / > < /div> < /div>; } }