import * as React from 'react' ; import classNames from 'classnames' ; import { CSSTransition } from 'react-transition-group' ; import Mask from '../mask' ; import { createPortal } from 'react-dom' ; export interface PopupProps { /**
     * 是否显示
     */ show ? : boolean ; /**
     * popup弹出动画，默认提供 slide-up、slide-down、slide-right，默认为 slide-up
     */ popupTransition ? : 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | string ; /**
     * mask层的动画，默认为fade
     */ maskTransition ? : string ; /**
     * 点击遮罩层是否关闭
     */ maskCloseable ? : boolean ; /**
     * 关闭事件回调
     */ onCancel ? : ( e : React . TouchEvent < HTMLDivElement > ) => void ; prefixCls ? : string ; className ? : string ; style ? : React . CSSProperties ; usePortal ? : boolean ; } export default class Popup extends React . PureComponent < PopupProps , any > { static defaultProps = { prefixCls : 'Yep-popup' , style : { } , show : false , popupTransition : 'slide-up' , maskTransition : 'fade' , maskCloseable : true , onCancel : ( ) => { } , usePortal : false , } ; onMaskClick = ( e ) => { const { maskCloseable , onCancel } = this . props ; if ( e . target === e . currentTarget && maskCloseable && onCancel ) { onCancel ( e ) ; } } ; render ( ) { const { show , popupTransition , maskTransition , prefixCls , className , style , usePortal , children } = this . props ; const cls = classNames ( prefixCls , className ) ; const content = ( < div > < CSSTransition in = { show } timeout = { 300 } classNames = { maskTransition } unmountOnExit = { true } > < Mask onClick = { this . onMaskClick } /> < /CSSTransition> < CSSTransition in = { show } timeout = { 300 } classNames = { popupTransition } unmountOnExit = { true } > < div className = { cls } style = { style } onClick = { this . onMaskClick } > { children } < /div> < /CSSTransition> < /div>); if ( usePortal ) { return createPortal ( content , document . body ) ; } return content ; } }