packageDocumentation module import "./MessageBox.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { DialogButtonDef , MessageSeverity } from "@itwin/appui-abstract" ; import { Dialog } from "../dialog/Dialog" ; import { CommonProps } from "../utils/Props" ; public export interface MessageBoxProps extends CommonProps { /** Severity of MessageBox */ severity : MessageSeverity ; /** whether to show dialog or not */ opened : boolean ; /** List of [[DialogButtonDef]] objects specifying buttons and associated onClick events */ buttonCluster : DialogButtonDef [ ] ; /** Title to show in title bar of dialog  */ title ? : string | JSX . Element ; /** onClick event for X button for dialog */ onClose ? : ( ) => void ; /** 'keyup' event for <Esc> key */ onEscape ? : ( ) => void ; /** minimum width that the dialog may be resized to. Default: 400 */ minWidth ? : number ; /** minimum height that the dialog may be resized to. Default: 400 */ minHeight ? : number ; /** initial width of dialog.
     * Displayed in px if value is a number, otherwise displayed in specified CSS unit.
     * Default: "50%"
     */ width ? : string | number ; /** initial height of dialog.
     * Displayed in px if value is a number, otherwise displayed in specified CSS unit.
     * Default: ""
     */ height ? : string | number ; /** Whether to show background overlay. Default: true */ modal ? : boolean ; /** Custom CSS class name for the content */ contentClassName ? : string ; /** Custom CSS Style for the content */ contentStyle ? : React . CSSProperties ; } public export class MessageBox extends React . PureComponent < MessageBoxProps > { public static defaultProps : Partial < MessageBoxProps > = { minWidth : 400 , minHeight : 400 , width : "512px" , modal : true } ; public override render ( ) { return ( < Dialog title = { this . props . title } buttonCluster = { this . props . buttonCluster } opened = { this . props . opened } width = { this . props . width } onClose = { this . props . onClose } onEscape = { this . props . onEscape } modal = { this . props . modal } className = { this . props . className } style = { this . props . style } > < MessageContainer severity = { this . props . severity } className = { this . props . contentClassName } style = { this . props . contentStyle } > { this . props . children } < /MessageContainer> < /Dialog>); } } public export interface MessageContainerProps extends CommonProps { severity : MessageSeverity ; } public export class MessageContainer extends React . PureComponent < MessageContainerProps > { public static getIconClassName ( severity , hollow ? ) { let iconClassName = "" ; switch ( severity ) { case MessageSeverity . None : iconClassName = " " ; break ; case MessageSeverity . Success : iconClassName = hollow ? "icon-status-success-hollow" : "icon-status-success" + " core-message-box-success" ; break ; case MessageSeverity . Information : iconClassName = hollow ? "icon-info-hollow" : "icon-info" + " core-message-box-information" ; break ; case MessageSeverity . Question : iconClassName = hollow ? "icon-help-hollow" : "icon-help" + " core-message-box-question" ; break ; case MessageSeverity . Warning : iconClassName = hollow ? "icon-status-warning" : "icon-status-warning" + " core-message-box-warning" ; break ; case MessageSeverity . Error : iconClassName = hollow ? "icon-status-error-hollow" : "icon-status-error" + " core-message-box-error" ; break ; case MessageSeverity . Fatal : iconClassName = hollow ? "icon-status-rejected" : "icon-status-rejected" + " core-message-box-fatal" ; break ; } return iconClassName ; } public override render ( ) { const iconClassName = classnames ( "icon" , "core-message-box-icon" , MessageContainer . getIconClassName ( this . props . severity ) ) ; return ( < div className = "core-message-box-container" > < div className = { iconClassName } /> < div className = { classnames ( "core-message-box-content" , this . props . className ) } style = { this . props . style } > { this . props . children } < /div> < /div>); } }