import React , { Component , ReactElement } from 'react' ; import { ModalProps } from 'antd/es/modal' ; import { Modal , Icon } from 'antd' ; import RouteContext from '@ant-design/pro-layout/es/RouteContext' ; export interface InlineModalProps extends ModalProps { element ? : ReactElement ; maxmin : boolean ; fullScreen : boolean ; beforeOpen ? : Function ; beforeClose ? : Function ; } interface InlineModalState { visible : boolean ; fullScreen : boolean ; } class InlineModal extends Component < InlineModalProps , InlineModalState > { static defaultProps = { maxmin : true , fullScreen : false , } ; constructor ( props ) { super ( props ) ; this . state = { visible : ! ! props . visible , fullScreen : props . fullScreen , } ; } showModalHandler = ( e ) => { e . stopPropagation ( ) ; const { beforeOpen } = this . props ; if ( beforeOpen ) { beforeOpen ( ) ; } this . handleModalVisible ( true ) ; } ; hideModalHandler = ( ) => { const { beforeClose } = this . props ; if ( beforeClose ) { beforeClose ( ) ; } this . handleModalVisible ( false ) ; } ; handleModalVisible = ( flag ? ) => { this . setState ( { visible : ! ! flag , } ) ; } ; okHandler = ( e ) => { e . stopPropagation ( ) ; const { onOk } = this . props ; if ( onOk ) { const ret = onOk ( e ) ; if ( ret instanceof Promise ) { ret . then ( ( ) => { this . hideModalHandler ( ) ; } ) . catch ( err => { console . error ( err ) ; } ) ; } else if ( ret ) { this . hideModalHandler ( ) ; } } else { this . hideModalHandler ( ) ; } } ; cancelHandler = ( e ) => { e . stopPropagation ( ) ; const { onCancel } = this . props ; if ( onCancel ) { const ret = onCancel ( e ) ; if ( ret instanceof Promise ) { ret . then ( ( ) => { this . hideModalHandler ( ) ; } ) . catch ( ( ) => { } ) ; } else { this . hideModalHandler ( ) ; } } else { this . hideModalHandler ( ) ; } } ; toggleFullScreen = ( ) => { const { fullScreen } = this . state ; this . setState ( { fullScreen : ! fullScreen , } ) ; } ; titleRender = ( ) => { const { title , maxmin } = this . props ; const { fullScreen } = this . state ; return ( < > { title } { maxmin && ( < button type = "button" className = "ant-modal-close" style = { { right : 42 } } onClick = { this . toggleFullScreen } > < span className = "ant-modal-close-x" > < Icon className = "ant-modal-close-icon" type = { fullScreen ? 'shrink' : 'arrows-alt' } / > < /span> < /button>)} < />); } ; render ( ) { const { children , title , element , onCancel , onOk , maxmin , fullScreen : f , ... rest } = this . props ; const { footer } = rest ; const { visible , fullScreen } = this . state ; return ( < RouteContext . Consumer > { ( { tabsView , fixedHeader , } ) => ( < > { element && React . cloneElement ( element , { onClick : this . showModalHandler } ) } { } < span onClick = { ( e ) => e . stopPropagation ( ) } > < Modal wrapClassName = { `wm-modal-wrap${ fullScreen ? ' wm-modal-wrap-fullscreen' : '' }${ footer === false ? ' wm-modal-wrap-nofooter' : '' }` } title = { this . titleRender ( ) } visible = { visible } centered onOk = { this . okHandler } onCancel = { this . cancelHandler } getContainer = { ( tabsView && fixedHeader && ( document . querySelector ( '.ant-tabs-tabpane.ant-tabs-tabpane-active' ) as HTMLElement ) ) || undefined } { ... rest } > { children } < /Modal> < /span> < />)} < /RouteContext.Consumer>); } } export default InlineModal ;