import Typography from "@material-ui/core/Typography" ; import { CloseIcon } from "../icons" ; import clsx from "clsx" ; import React from "react" ; import { IconButton } from "../IconButton" ; import { CompleteIcon , InfoIcon , NotAllowedIcon , WarningIcon } from "../icons" ; import { AlertBase , AlertBaseProps , AlertVariant } from "./AlertBase" ; import useStyles from "./styles" ; export interface AlertProps extends AlertBaseProps { close ? : boolean ; title ? : string ; } interface IconProps extends React . SVGProps < SVGSVGElement > { variant : AlertVariant ; } const Icon = ( { variant , ... props } ) => { switch ( variant ) { case "error" : return < NotAllowedIcon { ... props } / > ; case "warning" : return < WarningIcon { ... props } / > ; case "success" : return < CompleteIcon { ... props } / > ; default : return < InfoIcon { ... props } / > ; } } ; export const Alert = ( { close = true , variant = "info" , title , children , ... rest } ) => { const classes = useStyles ( ) ; const [ visible , setVisible ] = React . useState ( true ) ; if ( ! visible ) { return null ; } return ( < AlertBase variant = { variant } { ... rest } > < div className = { classes . container } > < div className = { classes . icon } > < Icon className = { clsx ( { [ classes . error ] : variant === "error" , [ classes . warning ] : variant === "warning" , [ classes . success ] : variant === "success" } ) } variant = { variant } / > < /div> < div className = { classes . content } > < div className = { classes . titleBar } > { title && < Typography variant = "h5" > { title } < /Typography>} { close && ( < IconButton className = { clsx ( classes . close , { [ classes . closeNoContent ] : ! children } ) } hoverOutline = { false } variant = "secondary" onClick = { ( ) => setVisible ( false ) } data - test = "close" > < CloseIcon /> < /IconButton>)} < /div> { typeof children === "string" ? ( < Typography variant = "body1" > { children } < /Typography>) : (children)} < /div> < /div> < /AlertBase>); } ; Alert . displayName = "Alert" ;