jsx import { jsx , Theme , Interpolation , ArrayInterpolation } from "@emotion/react" ; import { Overlay } from "../Overlay" ; import { style , DialogType , AnimationStatus , getAnimation } from "./style" ; export interface WrapperProps { type ? : DialogType ; children ? : React . ReactNode ; status ? : AnimationStatus ; onHide ? : ( ) => void ; showMask ? : boolean ; maskColor ? : string ; onBlankClick ? : ( event ? : React . MouseEvent < HTMLDivElement , MouseEvent > ) => void ; boxStyle ? : Interpolation < Theme > ; maskStyle ? : Interpolation < Theme > ; } export function Wrapper ( props ) { const { type = "center" , status = "show" , children , onHide , showMask = true , maskColor , maskStyle , boxStyle , onBlankClick , } = props ; const { animation , keyframes } = getAnimation ( type , status ) ; let boxCss = [ style . boxCss ] ; if ( [ "pullUp" , "pullDown" , "pullLeft" , "pullRight" ] . includes ( type ) ) { boxCss . push ( style [ type as keyof typeof style ] ) ; } let maskCss = [ style . mask , status === "show" ? style . maskShow : style . maskHide , maskStyle , ] ; if ( maskColor ) { maskCss . push ( { backgroundColor : maskColor } ) ; } const blankClick = ( event ) => { if ( event . target === event . currentTarget ) { event . stopPropagation ( ) ; onBlankClick ?. ( event ) ; } } ; return ( < Overlay css = { { overflow : "hidden" } } centerContent = { type === "center" } maskColor = "transparent" fullScreen onClick = { showMask ? undefined : blankClick } > { showMask && < div css = { maskCss } onClick = { blankClick } / > } < div css = { [ boxCss , boxStyle , animation ] } onAnimationEnd = { ( event ) => { if ( status === "hide" && event . animationName === keyframes . name ) { onHide ?. ( ) ; } } } > { children } < /div> < /Overlay>); }