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