import classNames from "classnames" ; import * as React from "react" ; import { polyfill } from "react-lifecycles-compat" ; import { AbstractPureComponent2 , Classes , DISPLAYNAME_PREFIX , Intent , Props , MaybeElement } from "../../common" ; import { ALERT_WARN_CANCEL_ESCAPE_KEY , ALERT_WARN_CANCEL_OUTSIDE_CLICK , ALERT_WARN_CANCEL_PROPS , } from "../../common/errors" ; import { Button } from "../button/buttons" ; import { Dialog } from "../dialog/dialog" ; import { Icon , IconName } from "../icon/icon" ; import { IOverlayLifecycleProps } from "../overlay/overlay" ; export type AlertProps = IAlertProps ; deprecated export interface IAlertProps extends IOverlayLifecycleProps , Props { default canEscapeKeyCancel ? : boolean ; default canOutsideClickCancel ? : boolean ; /**
     * The text for the cancel button.
     * If this prop is defined, then either `onCancel` or `onClose` must also be defined.
     */ cancelButtonText ? : string ; default confirmButtonText ? : string ; /** Name of a Blueprint UI icon (or an icon element) to display on the left side. */ icon ? : IconName | MaybeElement ; /**
     * The intent to be applied to the confirm (right-most) button and the icon (if provided).
     */ intent ? : Intent ; /**
     * Toggles the visibility of the alert.
     * This prop is required because the component is controlled.
     */ isOpen : boolean ; default loading ? : boolean ; /**
     * CSS styles to apply to the alert.
     */ style ? : React . CSSProperties ; default transitionDuration ? : number ; default portalContainer ? : HTMLElement ; /**
     * Handler invoked when the alert is canceled. Alerts can be **canceled** in the following ways:
     * - clicking the cancel button (if `cancelButtonText` is defined)
     * - pressing the escape key (if `canEscapeKeyCancel` is enabled)
     * - clicking on the overlay backdrop (if `canOutsideClickCancel` is enabled)
     *
     * If any of the `cancel` props are defined, then either `onCancel` or `onClose` must be defined.
     */ onCancel ? ( evt ? ) : void ; /**
     * Handler invoked when the confirm button is clicked. Alerts can be **confirmed** in the following ways:
     * - clicking the confirm button
     * - focusing on the confirm button and pressing `enter` or `space`
     */ onConfirm ? ( evt ? ) : void ; /**
     * Handler invoked when the Alert is confirmed or canceled; see `onConfirm` and `onCancel` for more details.
     * First argument is `true` if confirmed, `false` otherwise.
     * This is an alternative to defining separate `onConfirm` and `onCancel` handlers.
     */ onClose ? ( confirmed , evt ? ) : void ; } @ polyfill export class Alert extends AbstractPureComponent2 < AlertProps > { public static defaultProps : AlertProps = { canEscapeKeyCancel : false , canOutsideClickCancel : false , confirmButtonText : "OK" , isOpen : false , loading : false , } ; public static displayName = `${ DISPLAYNAME_PREFIX }.Alert` ; public render ( ) { const { canEscapeKeyCancel , canOutsideClickCancel , children , className , icon , intent , loading , cancelButtonText , confirmButtonText , onClose , ... overlayProps } = this . props ; return ( < Dialog { ... overlayProps } className = { classNames ( Classes . ALERT , className ) } canEscapeKeyClose = { canEscapeKeyCancel } canOutsideClickClose = { canOutsideClickCancel } onClose = { this . handleCancel } portalContainer = { this . props . portalContainer } > < div className = { Classes . ALERT_BODY } > < Icon icon = { icon } size = { 40 } intent = { intent } / > < div className = { Classes . ALERT_CONTENTS } > { children } < /div> < /div> < div className = { Classes . ALERT_FOOTER } > < Button loading = { loading } intent = { intent } text = { confirmButtonText } onClick = { this . handleConfirm } / > { cancelButtonText && ( < Button text = { cancelButtonText } disabled = { loading } onClick = { this . handleCancel } / > ) } < /div> < /Dialog>); } protected validateProps ( props ) { if ( props . onClose == null && ( props . cancelButtonText == null ) !== ( props . onCancel == null ) ) { console . warn ( ALERT_WARN_CANCEL_PROPS ) ; } const hasCancelHandler = props . onCancel != null || props . onClose != null ; if ( props . canEscapeKeyCancel && ! hasCancelHandler ) { console . warn ( ALERT_WARN_CANCEL_ESCAPE_KEY ) ; } if ( props . canOutsideClickCancel && ! hasCancelHandler ) { console . warn ( ALERT_WARN_CANCEL_OUTSIDE_CLICK ) ; } } private handleCancel = ( evt ? ) => this . internalHandleCallbacks ( false , evt ) ; private handleConfirm = ( evt ) => this . internalHandleCallbacks ( true , evt ) ; private internalHandleCallbacks ( confirmed , evt ? ) { const { onCancel , onClose , onConfirm } = this . props ; ( confirmed ? onConfirm : onCancel ) ?. ( evt ) ; onClose ?. ( confirmed , evt ) ; } }