import * as React from 'react' ; import classNames from 'classnames' ; import noop from '../_utils/noop' ; import confirm from './confirm' ; import Popup from '../popup' ; export interface DialogProps { prefixCls ? : string ; className ? : string ; style ? : React . CSSProperties ; title ? : string ; footer ? : React . ReactNode ; bodyStyle ? : React . CSSProperties ; onClose ? : ( e : any ) => void ; show ? : boolean ; maskCloseable ? : boolean ; dialogTransition ? : string ; maskTransition ? : string ; usePortal ? : boolean ; } interface DialogState { show ? : boolean ; } export default class Dialog extends React . PureComponent < DialogProps , DialogState > { static confirm = confirm ; static defaultProps = { prefixCls : 'Yep-dialog' , style : { } , bodyStyle : { } , show : false , maskCloseable : false , maskTransition : 'fade' , dialogTransition : 'zoom' , onClose : noop , usePortal : true , } ; constructor ( props ) { super ( props ) ; this . renderHeader = this . renderHeader . bind ( this ) ; this . renderBody = this . renderBody . bind ( this ) ; this . renderFooter = this . renderFooter . bind ( this ) ; this . close = this . close . bind ( this ) ; this . onMaskClick = this . onMaskClick . bind ( this ) ; this . state = { show : props . show , } ; } componentWillReceiveProps ( nextProps ) { this . setState ( { show : nextProps . show , } ) ; } close ( e ) { const { onClose } = this . props ; if ( onClose ) { onClose ( e ) ; } } onMaskClick ( e ) { const { maskCloseable } = this . props ; if ( e . target === e . currentTarget && maskCloseable ) { this . close ( e ) ; } } renderHeader ( ) { const { prefixCls , title } = this . props ; return ( < div className = { `${ prefixCls }-header` } > < div className = { `${ prefixCls }-title` } > { title } < /div> < /div>); } renderBody ( ) { const { prefixCls , bodyStyle , children } = this . props ; return ( < div className = { `${ prefixCls }-body` } style = { bodyStyle } > { children } < /div>); } renderFooter ( ) { const { prefixCls , footer } = this . props ; return < div className = { `${ prefixCls }-footer` } > { footer } < /div>; } render ( ) { const { prefixCls , className , style , title , maskTransition , dialogTransition , footer , usePortal , maskCloseable , } = this . props ; const cls = classNames ( prefixCls , className , `${ prefixCls }-transparent` ) ; return ( < Popup show = { this . state . show } maskTransition = { maskTransition } popupTransition = { dialogTransition } maskCloseable = { maskCloseable } usePortal = { usePortal } > < div className = { `${ prefixCls }-wrap` } onClick = { this . onMaskClick } > < div className = { cls } style = { style } > < div className = { `${ prefixCls }-content` } > { title && this . renderHeader ( ) } { this . renderBody ( ) } { footer && this . renderFooter ( ) } < /div> < /div> < /div> < /Popup>); } }