-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
index.tsx
121 lines (113 loc) · 4.31 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import PopoverMenu from '@components/PopoverMenu';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Browser from '@libs/Browser';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {Modal} from '@src/types/onyx';
import type ThreeDotsMenuProps from './types';
type ThreeDotsMenuOnyxProps = {
/** Details about any modals being used */
modal: OnyxEntry<Modal>;
};
function ThreeDotsMenu({
iconTooltip = 'common.more',
icon = Expensicons.ThreeDots,
iconFill,
iconStyles,
onIconPress = () => {},
menuItems,
anchorPosition,
anchorAlignment = {
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
},
shouldOverlay = false,
shouldSetModalVisibility = true,
disabled = false,
modal = {},
}: ThreeDotsMenuProps) {
const theme = useTheme();
const styles = useThemeStyles();
const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
const buttonRef = useRef<View>(null);
const {translate} = useLocalize();
const isBehindModal = modal?.willAlertModalBecomeVisible && !modal?.isPopover && !shouldOverlay;
const showPopoverMenu = () => {
setPopupMenuVisible(true);
};
const hidePopoverMenu = () => {
setPopupMenuVisible(false);
};
useEffect(() => {
if (!isBehindModal || !isPopupMenuVisible) {
return;
}
hidePopoverMenu();
}, [isBehindModal, isPopupMenuVisible]);
return (
<>
<View>
<Tooltip text={translate(iconTooltip)}>
<PressableWithoutFeedback
onPress={() => {
if (isPopupMenuVisible) {
hidePopoverMenu();
return;
}
buttonRef.current?.blur();
showPopoverMenu();
if (onIconPress) {
onIconPress();
}
}}
disabled={disabled}
onMouseDown={(e) => {
/* Keep the focus state on mWeb like we did on the native apps. */
if (!Browser.isMobile()) {
return;
}
e.preventDefault();
}}
ref={buttonRef}
style={[styles.touchableButtonImage, iconStyles]}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate(iconTooltip)}
>
<Icon
src={icon}
fill={iconFill ?? isPopupMenuVisible ? theme.success : theme.icon}
/>
</PressableWithoutFeedback>
</Tooltip>
</View>
<PopoverMenu
onClose={hidePopoverMenu}
isVisible={isPopupMenuVisible && !isBehindModal}
anchorPosition={anchorPosition}
anchorAlignment={anchorAlignment}
onItemSelected={hidePopoverMenu}
menuItems={menuItems}
withoutOverlay={!shouldOverlay}
shouldSetModalVisibility={shouldSetModalVisibility}
anchorRef={buttonRef}
shouldEnableNewFocusManagement
/>
</>
);
}
ThreeDotsMenu.displayName = 'ThreeDotsMenu';
export default withOnyx<ThreeDotsMenuProps, ThreeDotsMenuOnyxProps>({
modal: {
key: ONYXKEYS.MODAL,
},
})(ThreeDotsMenu);