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 { getPositionIgnoreAngles , isPositionHorizontal , Position } from "../../common/position" ; import { DISPLAYNAME_PREFIX , Props , MaybeElement } from "../../common/props" ; 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 enum DrawerSize { SMALL = "360px" , STANDARD = "50%" , LARGE = "90%" } export type DrawerProps = IDrawerProps ; deprecated export interface IDrawerProps extends OverlayableProps , IBackdropProps , Props { /**
     * Name of a Blueprint UI icon (or an icon element) to render in the
     * drawer's header. Note that the header will only be rendered if `title` is
     * provided.
     */ icon ? : IconName | MaybeElement ; default isCloseButtonShown ? : boolean ; /**
     * Toggles the visibility of the overlay and its children.
     * This prop is required because the component is controlled.
     */ isOpen : boolean ; default position ? : Position ; default size ? : number | string ; 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 ; default deprecated vertical ? : boolean ; } @ polyfill export class Drawer extends AbstractPureComponent2 < DrawerProps > { public static displayName = `${ DISPLAYNAME_PREFIX }.Drawer` ; public static defaultProps : DrawerProps = { canOutsideClickClose : true , isOpen : false , style : { } , vertical : false , } ; deprecated public static readonly SIZE_SMALL = DrawerSize . SMALL ; deprecated public static readonly SIZE_STANDARD = DrawerSize . STANDARD ; deprecated public static readonly SIZE_LARGE = DrawerSize . LARGE ; public render ( ) { const { size , style , position , vertical } = this . props ; const realPosition = position ? getPositionIgnoreAngles ( position ) : undefined ; const classes = classNames ( Classes . DRAWER , { [ Classes . VERTICAL ] : ! realPosition && vertical , [ Classes . positionClass ( realPosition ) ?? "" ] : true , } , this . props . className ) ; const styleProp = size == null ? style : { ... style , [ ( realPosition ? isPositionHorizontal ( realPosition ) : vertical ) ? "height" : "width" ] : size , } ; return ( < Overlay { ... this . props } className = { Classes . OVERLAY_CONTAINER } > < div className = { classes } style = { styleProp } > { this . maybeRenderHeader ( ) } { this . props . children } < /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 ) ; } } if ( props . position != null ) { if ( props . vertical ) { console . warn ( Errors . DRAWER_VERTICAL_IS_IGNORED ) ; } if ( props . position !== getPositionIgnoreAngles ( props . position ) ) { console . warn ( Errors . DRAWER_ANGLE_POSITIONS_ARE_CASTED ) ; } } } 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 null ; } } private maybeRenderHeader ( ) { const { icon , title } = this . props ; if ( title == null ) { return null ; } return ( < div className = { Classes . DRAWER_HEADER } > < Icon icon = { icon } size = { IconSize . LARGE } / > < H4 > { title } < /H4> { this . maybeRenderCloseButton ( ) } < /div>); } }