1import * as React from 'react' 2import Box from './box' 3import Icon from './icon' 4import {EscapeHandler} from '../util/key-event-handler.desktop' 5import * as Styles from '../styles' 6import {Props} from './popup-dialog' 7import ModalTabBarShim from './modal-tab-bar-shim' 8 9function stopBubbling(ev) { 10 ev.stopPropagation() 11} 12 13export function PopupDialog({ 14 children, 15 onClose, 16 onMouseUp, 17 onMouseDown, 18 onMouseMove, 19 fill, 20 immuneToEscape, 21 styleCover, 22 styleContainer, 23 styleClose, 24 styleClipContainer, 25 tabBarShim, // Move out of the way the nav column. 26 allowClipBubbling, 27}: Props) { 28 const [mouseDownOnCover, setMouseDownOnCover] = React.useState(false) 29 return ( 30 <EscapeHandler onESC={!immuneToEscape ? onClose || null : null}> 31 <Box 32 style={Styles.collapseStyles([tabBarShim ? styles.coverTabBarShim : styles.cover, styleCover])} 33 onMouseUp={(e: React.MouseEvent) => { 34 if (mouseDownOnCover) { 35 onClose && onClose() 36 } 37 onMouseUp && onMouseUp(e) 38 }} 39 onMouseDown={(e: React.MouseEvent) => { 40 setMouseDownOnCover(true) 41 onMouseDown && onMouseDown(e) 42 }} 43 onMouseMove={onMouseMove} 44 > 45 {tabBarShim && <ModalTabBarShim />} 46 <Box 47 style={Styles.collapseStyles([styles.container, fill && styles.containerFill, styleContainer])} 48 onMouseDown={(e: React.BaseSyntheticEvent) => { 49 setMouseDownOnCover(false) 50 e.stopPropagation() 51 }} 52 onMouseUp={(e: React.BaseSyntheticEvent) => e.stopPropagation()} 53 > 54 {onClose && ( 55 <Icon 56 type="iconfont-close" 57 style={Styles.collapseStyles([styles.close, styleClose])} 58 color={Styles.globalColors.whiteOrWhite_75} 59 onClick={onClose} 60 hoverColor={Styles.globalColors.white_40OrWhite_40} 61 /> 62 )} 63 <Box 64 style={Styles.collapseStyles([styles.clipContainer, styleClipContainer])} 65 onClick={allowClipBubbling ? undefined : stopBubbling} 66 > 67 {children} 68 </Box> 69 </Box> 70 </Box> 71 </EscapeHandler> 72 ) 73} 74 75const styles = Styles.styleSheetCreate(() => ({ 76 get clipContainer() { 77 return Styles.platformStyles({ 78 isElectron: { 79 ...Styles.desktopStyles.boxShadow, 80 ...Styles.globalStyles.flexBoxColumn, 81 backgroundColor: Styles.globalColors.white, 82 borderRadius: Styles.borderRadius, 83 flex: 1, 84 maxWidth: '100%', 85 position: 'relative', 86 }, 87 }) 88 }, 89 close: Styles.platformStyles({ 90 isElectron: { 91 cursor: 'pointer', 92 padding: Styles.globalMargins.tiny, 93 position: 'absolute', 94 right: Styles.globalMargins.tiny * -4, 95 }, 96 }), 97 container: { 98 ...Styles.globalStyles.flexBoxRow, 99 maxHeight: '100%', 100 maxWidth: '100%', 101 position: 'relative', 102 }, 103 containerFill: { 104 height: '100%', 105 width: '100%', 106 }, 107 cover: { 108 ...Styles.globalStyles.flexBoxColumn, 109 ...Styles.globalStyles.fillAbsolute, 110 alignItems: 'center', 111 backgroundColor: Styles.globalColors.black_50OrBlack_60, 112 justifyContent: 'center', 113 paddingBottom: Styles.globalMargins.small, 114 paddingLeft: Styles.globalMargins.large, 115 paddingRight: Styles.globalMargins.large, 116 paddingTop: Styles.globalMargins.large, 117 }, 118 coverTabBarShim: { 119 ...Styles.globalStyles.flexBoxRow, 120 ...Styles.globalStyles.fillAbsolute, 121 alignItems: 'center', 122 backgroundColor: Styles.globalColors.black_50OrBlack_60, 123 justifyContent: 'center', 124 paddingBottom: Styles.globalMargins.small, 125 paddingLeft: 0, 126 paddingRight: 0, 127 paddingTop: Styles.globalMargins.large, 128 }, 129})) 130 131export default PopupDialog 132