import * as React from 'react' ; import { CSSTransition } from 'react-transition-group' ; import ClassNames from 'classnames' ; import { OverlayProps } from './interface' ; import Icon from '../icon' ; const noop = ( ) => { } ; const { useEffect , useRef } = React ; const defaultProps = { prefixCls : 'cp-ui-overlay' , visible : false , mask : true , maskClosable : true , closable : false , autoFix : false , destroy : true , onClose : noop , maskAnimationName : 'fade' , animationName : 'fade' } ; const getZIndex = ( zIndex ? ) => { return zIndex ; } ; const getClassNames = ( { mask , className , visible , prefixCls } ) => { return ClassNames ( prefixCls , className , { [ `${ prefixCls }-mask-show` ] : mask , [ `${ prefixCls }-visible` ] : visible } ) ; } ; const handleClose = ( onClose ) => { onClose ( ) ; } ; const maskClick = ( e , props ) => { if ( e . target === e . currentTarget ) { handleClose ( props . onClose ) ; } } ; const animateEnter = ( { destroy } , wrapRef ) => { if ( ! destroy ) { ; ( wrapRef . current as any ) . style . display = '' ; } } ; const animateLeave = ( { destroy } , wrapRef ) => { if ( ! destroy ) { ; ( wrapRef . current as any ) . style . display = 'none' ; } } ; const renderMask = ( { maskClassName , mask , prefixCls , zIndex , maskAnimationName , visible } ) => { const classStr = ClassNames ( `${ prefixCls }-mask` , maskClassName ) ; const zindex = getZIndex ( zIndex ) ; const style = zindex ? { zIndex : zindex } : { } ; if ( mask ) { return ( < CSSTransition in = { visible } timeout = { 300 } classNames = { `${ prefixCls }-${ maskAnimationName }` } > < div className = { classStr } style = { style } / > < /CSSTransition>); } return null ; } ; const renderHeader = ( { header , prefixCls } ) => { if ( header ) { return < div className = { `${ prefixCls }-header` } > { header } < /div>; } return null ; } ; const renderClose = ( { closable , onClose , close , prefixCls } ) => { if ( closable ) { return ( < div className = { `${ prefixCls }-close` } onClick = { ( ) => handleClose ( onClose ) } > { close || < Icon type = "close" / > } < /div>); } return null ; } ; const renderFooter = ( { footer , prefixCls } ) => { if ( footer ) { return < div className = { `${ prefixCls }-footer` } > { footer } < /div>; } return null ; } ; const renderBody = ( props , wrapRef ) => { const { prefixCls , children , animationName , zIndex , visible } = props ; const zindex = getZIndex ( zIndex ) ; const style = zIndex ? { zIndex : zindex } : { } ; return ( < CSSTransition in = { visible } timeout = { 300 } classNames = { `${ prefixCls }-${ animationName }` } onEnter = { ( ) => animateEnter ( props , wrapRef ) } onExited = { ( ) => animateLeave ( props , wrapRef ) } > < div className = { `${ prefixCls }-container` } style = { style } > { renderHeader ( props ) } { renderClose ( props ) } < div className = { `${ prefixCls }-body` } > { children } < /div> { renderFooter ( props ) } < /div> < /CSSTransition>); } ; const Overlay = props => { const { prefixCls , maskClosable } = props ; const classStr = getClassNames ( props ) ; const wrapRef = useRef ( null ) ; useEffect ( ( ) => { document . body . style . overflow = 'hidden' ; return ( ) => { document . body . style . overflow = 'auto' ; } ; } , [ ] ) ; return ( < div className = { classStr } ref = { wrapRef } > { renderMask ( props ) } < div className = { `${ prefixCls }-wrap` } onClick = { maskClosable ? e => { maskClick ( e , props ) ; } : undefined } > { renderBody ( props , wrapRef ) } < /div> < /div>); } ; Overlay . defaultProps = defaultProps ; export default Overlay ;