79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
// Metro module 10339 (f10340).
|
|
import { useMemo, useCallback } from "react";
|
|
import { Keyboard, View } from "react-native";
|
|
import { NOTIFICATION_CONTAINER_MARGIN, NOTIFICATION_MAX_WIDTH } from "./InAppNotificationConstants";
|
|
import { EmojiPickerSource } from "../../emoji_picker/native/components/EmojiPickerListConstants";
|
|
import { EmojiIntention } from "../../emojis/EmojiConstants";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import { useEmojisForReactionRow } from "../../reactions/native/useEmojisForReactionRow";
|
|
import { trackInAppNotificationAccessoryClicked } from "./InAppNotificationUtils";
|
|
import { InAppNotificationAccessoryTypes } from "../InAppNotificationTypes";
|
|
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
|
|
import { ReactionTypes } from "../../messages/MessageReactionsTypes";
|
|
import { ReactionLocations } from "../../reactions/ReactionActionCreators";
|
|
import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import { EmojiReactionRowButton, getEmojiKey, EmojiPickerRowButton } from "../../reactions/native/EmojiReactionRowButton";
|
|
const PX_12 = Module712.space.PX_12;
|
|
const useStyles = createStyles({
|
|
container: {
|
|
alignSelf: "center",
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: PX_12,
|
|
paddingVertical: 10,
|
|
width: "100%"
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE,
|
|
margin: 0,
|
|
padding: 0
|
|
},
|
|
roundButton: {
|
|
borderRadius: Module712.radii.round
|
|
}
|
|
});
|
|
export function MessageNotificationReactBar(props) {
|
|
let callback;
|
|
const { notification, onReactionPress, animationStyle } = props;
|
|
callback = void 0;
|
|
const styles = useStyles();
|
|
const width = useWindowDimensions_native().width;
|
|
const emojisForReactionRow = useEmojisForReactionRow(notification.channel, useMemo(() => {
|
|
const r1 = 2 * PX_12;
|
|
return Math.min(NOTIFICATION_MAX_WIDTH - r1, width - r1 - 2 * NOTIFICATION_CONTAINER_MARGIN);
|
|
}, [width]), 48);
|
|
const callback2 = useCallback(() => {
|
|
Keyboard.dismiss();
|
|
trackInAppNotificationAccessoryClicked(notification, InAppNotificationAccessoryTypes.REACTION_PICKER_BUTTON);
|
|
openEmojiPickerActionSheet({
|
|
onPressEmoji: onReactionPress,
|
|
channel: notification.channel,
|
|
pickerIntention: EmojiIntention.REACTION,
|
|
reactionType: ReactionTypes.NORMAL,
|
|
analyticsObject: ReactionLocations.IN_APP_NOTIFICATION,
|
|
startExpanded: false,
|
|
source: EmojiPickerSource.NOTIFICATION
|
|
});
|
|
}, [onReactionPress, notification]);
|
|
callback = useCallback((a0) => {
|
|
trackInAppNotificationAccessoryClicked(notification, InAppNotificationAccessoryTypes.REACTION_BUTTON);
|
|
if (a0 != null) {
|
|
onReactionPress(a0);
|
|
}
|
|
}, [notification, onReactionPress]);
|
|
return <ReanimatedRexport.View style={animationStyle}>
|
|
<View style={styles.divider} />
|
|
<View style={styles.container}>
|
|
{emojisForReactionRow.map((item, index) => {
|
|
return <EmojiReactionRowButton key={getEmojiKey(item, index)} emoji={item == null ? null : item} onPress={() => callback(item)} emojiSize={20} emojiFontSize={16} emojiContainerSize={40} emojiLineHeight={22} styles={styles.roundButton} />;
|
|
})}
|
|
<EmojiPickerRowButton emojiContainerSize={40} onPress={callback2} iconSize="sm" styles={styles.roundButton} />
|
|
</View>
|
|
</ReanimatedRexport.View>;
|
|
}
|