-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
MiniQuickEmojiReactions.tsx
122 lines (114 loc) · 4.57 KB
/
MiniQuickEmojiReactions.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
122
import React, {useRef} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import type {Emoji} from '@assets/emojis/types';
import BaseMiniContextMenuItem from '@components/BaseMiniContextMenuItem';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import * as EmojiUtils from '@libs/EmojiUtils';
import getButtonState from '@libs/getButtonState';
import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
import * as Session from '@userActions/Session';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {ReportActionReactions} from '@src/types/onyx';
import type {BaseQuickEmojiReactionsProps} from './QuickEmojiReactions/types';
type MiniQuickEmojiReactionsOnyxProps = {
/** All the emoji reactions for the report action. */
emojiReactions: OnyxEntry<ReportActionReactions>;
/** The user's preferred skin tone. */
preferredSkinTone: OnyxEntry<string | number>;
};
type MiniQuickEmojiReactionsProps = BaseQuickEmojiReactionsProps & {
/**
* Will be called when the user closed the emoji picker
* without selecting an emoji.
*/
onEmojiPickerClosed?: () => void;
};
/**
* Shows the four common quick reactions and a
* emoji picker icon button. This is used for the mini
* context menu which we just show on web, when hovering
* a message.
*/
function MiniQuickEmojiReactions({
reportAction,
onEmojiSelected,
preferredLocale = CONST.LOCALES.DEFAULT,
preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE,
emojiReactions = {},
onPressOpenPicker = () => {},
onEmojiPickerClosed = () => {},
}: MiniQuickEmojiReactionsProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const ref = useRef<View>(null);
const {translate} = useLocalize();
const openEmojiPicker = () => {
onPressOpenPicker();
EmojiPickerAction.showEmojiPicker(
onEmojiPickerClosed,
(emojiCode, emojiObject) => {
onEmojiSelected(emojiObject, emojiReactions);
},
ref,
undefined,
() => {},
reportAction.reportActionID,
);
};
return (
<View style={styles.flexRow}>
{CONST.QUICK_REACTIONS.map((emoji: Emoji) => (
<BaseMiniContextMenuItem
key={emoji.name}
isDelayButtonStateComplete={false}
tooltipText={`:${EmojiUtils.getLocalizedEmojiName(emoji.name, preferredLocale)}:`}
onPress={Session.checkIfActionIsAllowed(() => onEmojiSelected(emoji, emojiReactions))}
>
<Text
style={[styles.miniQuickEmojiReactionText, styles.userSelectNone]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
{EmojiUtils.getPreferredEmojiCode(emoji, preferredSkinTone)}
</Text>
</BaseMiniContextMenuItem>
))}
<BaseMiniContextMenuItem
ref={ref}
onPress={Session.checkIfActionIsAllowed(() => {
if (!EmojiPickerAction.emojiPickerRef.current?.isEmojiPickerVisible) {
openEmojiPicker();
} else {
EmojiPickerAction.emojiPickerRef.current?.hideEmojiPicker();
}
})}
isDelayButtonStateComplete={false}
tooltipText={translate('emojiReactions.addReactionTooltip')}
>
{({hovered, pressed}) => (
<Icon
small
src={Expensicons.AddReaction}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false))}
/>
)}
</BaseMiniContextMenuItem>
</View>
);
}
MiniQuickEmojiReactions.displayName = 'MiniQuickEmojiReactions';
export default withOnyx<MiniQuickEmojiReactionsProps, MiniQuickEmojiReactionsOnyxProps>({
preferredSkinTone: {
key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
},
emojiReactions: {
key: ({reportActionID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`,
},
})(MiniQuickEmojiReactions);