import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes } from "../../common" ; import * as Errors from "../../common/errors" ; import { DISPLAYNAME_PREFIX , Props , MaybeElement } from "../../common/props" ; import { uniqueId } from "../../common/utils" ; import { Button } from "../button/buttons" ; import { H4 } from "../html/html" ; import { Icon , IconName , IconSize } from "../icon/icon" ; import { IBackdropProps , OverlayableProps , Overlay } from "../overlay/overlay" ; export type DialogProps = IDialogProps ; deprecated export interface IDialogProps extends OverlayableProps , IBackdropProps , Props { /**
     * Toggles the visibility of the overlay and its children.
     * This prop is required because the component is controlled.
     */ isOpen : boolean ; internal hasBackdrop ? : boolean ; /**
     * Name of a Blueprint UI icon (or an icon element) to render in the
     * dialog's header. Note that the header will only be rendered if `title` is
     * provided.
     */ icon ? : IconName | MaybeElement ; default isCloseButtonShown ? : boolean ; default style ? : React . CSSProperties ; /**
     * Title of the dialog. If provided, an element with `Classes.DIALOG_HEADER`
     * will be rendered inside the dialog before any children elements.
     */ title ? : React . ReactNode ; /**
     * Name of the transition for internal `CSSTransition`. Providing your own
     * name here will require defining new CSS transition properties.
     */ transitionName ? : string ; /**
     * ID of the element that contains title or label text for this dialog.
     *
     * By default, if the `title` prop is supplied, this component will generate
     * a unique ID for the `<H4>` title element and use that ID here.
     */ "aria-labelledby" ? : string ; /**
     * ID of an element that contains description text inside this dialog.
     */ "aria-describedby" ? : string ; } @ polyfill export class Dialog extends AbstractPureComponent2 < DialogProps > { public static defaultProps : DialogProps = { canOutsideClickClose : true , isOpen : false , } ; private titleId : string ; public static displayName = `${ DISPLAYNAME_PREFIX }.Dialog` ; public constructor ( props ) { super ( props ) ; const id = uniqueId ( "bp-dialog" ) ; this . titleId = `title-${ id }` ; } public render ( ) { return ( < Overlay { ... this . props } className = { Classes . OVERLAY_SCROLL_CONTAINER } hasBackdrop = { true } > < div className = { Classes . DIALOG_CONTAINER } > < div className = { classNames ( Classes . DIALOG , this . props . className ) } role = "dialog" aria - labelledby = { this . props [ "aria-labelledby" ] || ( this . props . title ? this . titleId : undefined ) } aria - describedby = { this . props [ "aria-describedby" ] } style = { this . props . style } > { this . maybeRenderHeader ( ) } { this . props . children } < /div> < /div> < /Overlay>); } protected validateProps ( props ) { if ( props . title == null ) { if ( props . icon != null ) { console . warn ( Errors . DIALOG_WARN_NO_HEADER_ICON ) ; } if ( props . isCloseButtonShown != null ) { console . warn ( Errors . DIALOG_WARN_NO_HEADER_CLOSE_BUTTON ) ; } } } private maybeRenderCloseButton ( ) { if ( this . props . isCloseButtonShown !== false ) { return ( < Button aria - label = "Close" className = { Classes . DIALOG_CLOSE_BUTTON } icon = { < Icon icon = "small-cross" size = { IconSize . LARGE } / > } minimal = { true } onClick = { this . props . onClose } / > ) ; } else { return undefined ; } } private maybeRenderHeader ( ) { const { icon , title } = this . props ; if ( title == null ) { return undefined ; } return ( < div className = { Classes . DIALOG_HEADER } > < Icon icon = { icon } size = { IconSize . LARGE } / > < H4 id = { this . titleId } > { title } < /H4> { this . maybeRenderCloseButton ( ) } < /div>); } }