265 lines
10 KiB
TypeScript
265 lines
10 KiB
TypeScript
// Metro module 10388 (f10389).
|
|
import _slicedToArray from "../../../_bundle/_slicedToArray";
|
|
import { useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback } from "react";
|
|
import { StyleSheet, Keyboard, View } from "react-native";
|
|
import ChannelStore from "../../../stores/ChannelStore";
|
|
import { EmojiIntention } from "../../emojis/EmojiConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useMobileVisualRefreshConfig } from "../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
|
|
import { ChatInputReplyBar } from "../../chat_input/native/ChatInputContextBar";
|
|
import { useNullableMessageAuthor } from "../../messages/useMessageAuthor";
|
|
import useChannelName from "../../channel/useChannelName";
|
|
import { useInputStyles } from "../../../design/components/Input/native/InputFieldContainer.native";
|
|
import { trackInAppNotificationAccessoryClicked } from "./InAppNotificationUtils";
|
|
import { InAppNotificationAccessoryTypes } from "../InAppNotificationTypes";
|
|
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
|
|
import MessageParser from "../../messages/MessageParser";
|
|
import MessageActionCreators from "../../../actions/MessageActionCreators";
|
|
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
|
|
import getEmojiText from "../../emojis/utils/getEmojiText";
|
|
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
|
|
import { ArrowAngleLeftUpIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowAngleLeftUpIcon";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { NativeTextInput } from "../../../design/components/Input/native/NativeTextInput.native";
|
|
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
|
|
import { SendMessageIcon } from "../../../design/components/Icon/native/redesign/generated/SendMessageIcon";
|
|
let useStyles, c6955_13;
|
|
let env6955 = {};
|
|
const AnimatedChatInputReplyBar = function AnimatedChatInputReplyBar(props) {
|
|
const { replying, pendingReply, pendingReplyAuthor, onToggleReplyMention: onToggleReplyMention2 } = props;
|
|
const chatInputFloating = useMobileVisualRefreshConfig({
|
|
location: "MessageReplyInput"
|
|
}).chatInputFloating;
|
|
const styles = useStyles();
|
|
const sharedValue = useSharedValue(0);
|
|
useEffect(() => {
|
|
const r12 = {
|
|
duration: 150
|
|
};
|
|
if (replying) {
|
|
sharedValue.set(withTiming(1, r12));
|
|
} else {
|
|
sharedValue.set(withTiming(0, r12));
|
|
}
|
|
}, [replying, sharedValue]);
|
|
const y = () => ({
|
|
height: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [0, 40]),
|
|
opacity: sharedValue.get()
|
|
});
|
|
y.__closure = {
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
sv: sharedValue,
|
|
REPLY_BAR_HEIGHT: 40
|
|
};
|
|
y.__workletHash = 878601267127;
|
|
y.__initData = c6955_13;
|
|
return <ReanimatedRexport.View style={[styles.replyBarContainer, chatInputFloating ? styles.replyBarRedesign : styles.replyBarNoRedesign, useAnimatedStyle(y)]}>
|
|
<ChatInputReplyBar pendingReply={pendingReply} pendingReplyAuthor={pendingReplyAuthor} onToggleReplyMention={onToggleReplyMention2} chatInputFloatingOverride />
|
|
</ReanimatedRexport.View>;
|
|
};
|
|
useStyles = createStyles({
|
|
inputContainer: {
|
|
flexDirection: "column",
|
|
gap: 0,
|
|
backgroundColor: Module712.colors.MOBILE_ALERT_BACKGROUND_DEFAULT,
|
|
padding: 0,
|
|
marginHorizontal: Module712.space.PX_16,
|
|
marginBottom: Module712.space.PX_4,
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden"
|
|
},
|
|
iconsContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 4
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
borderRadius: Module712.radii.none,
|
|
border: 0,
|
|
color: Module712.colors.TEXT_DEFAULT
|
|
},
|
|
inputRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
paddingHorizontal: Module712.space.PX_12,
|
|
paddingVertical: Module712.space.PX_12
|
|
},
|
|
placeholderText: {
|
|
color: Module712.colors.INPUT_PLACEHOLDER_TEXT_DEFAULT
|
|
},
|
|
replyBarContainer: {
|
|
justifyContent: "center",
|
|
alignContent: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: Module712.colors.BORDER_MUTED,
|
|
overflow: "hidden"
|
|
},
|
|
replyBarNoRedesign: {
|
|
paddingLeft: Module712.space.PX_12,
|
|
paddingRight: Module712.space.PX_8
|
|
},
|
|
replyBarRedesign: {
|
|
paddingLeft: Module712.space.PX_4
|
|
}
|
|
});
|
|
c6955_13 = {
|
|
code: "function MessageReplyInputTsx1(){const{interpolate,sv,REPLY_BAR_HEIGHT}=this.__closure;return{height:interpolate(sv.get(),[0,1],[0,REPLY_BAR_HEIGHT]),opacity:sv.get()};}"
|
|
};
|
|
export function MessageReplyInput(props) {
|
|
let c17919_0;
|
|
let env17918 = {
|
|
$parent: env6955
|
|
};
|
|
const notification = props.notification;
|
|
env17918[0] = notification;
|
|
const onMessageSent = props.onMessageSent;
|
|
env17918[1] = onMessageSent;
|
|
env17918[2] = void 0;
|
|
env17918[3] = void 0;
|
|
env17918[4] = void 0;
|
|
env17918[5] = void 0;
|
|
env17918[6] = void 0;
|
|
env17918[7] = void 0;
|
|
env17918[8] = void 0;
|
|
env17918[9] = void 0;
|
|
env17918[10] = void 0;
|
|
env17918[11] = void 0;
|
|
env17918[12] = void 0;
|
|
env17918[13] = void 0;
|
|
env17918[14] = void 0;
|
|
const ref = useRef(null);
|
|
env17918[2] = ref;
|
|
const r31 = _slicedToArray(useState(""), 2);
|
|
const value = r31[0];
|
|
env17918[3] = value;
|
|
const onChangeText = r31[1];
|
|
env17918[4] = onChangeText;
|
|
const r34 = _slicedToArray(useState(false), 2);
|
|
const loading = r34[0];
|
|
env17918[5] = loading;
|
|
env17918[6] = r34[1];
|
|
const r38 = _slicedToArray(useState(false), 2);
|
|
const replying2 = r38[0];
|
|
env17918[7] = replying2;
|
|
env17918[8] = r38[1];
|
|
const r43 = _slicedToArray(useState(true), 2);
|
|
const r24 = r43[0];
|
|
env17918[9] = r24;
|
|
env17918[10] = r43[1];
|
|
const styles = useStyles();
|
|
const message = notification.message;
|
|
env17918[11] = message;
|
|
const channel = notification.channel;
|
|
env17918[12] = channel;
|
|
const nullableMessageAuthor = useNullableMessageAuthor(message);
|
|
const channelName = useChannelName(channel, true);
|
|
const styles2 = useInputStyles({});
|
|
const memo = useMemo(() => {
|
|
const channel = env17918[12];
|
|
return {
|
|
shouldMention: env17918[9],
|
|
showMentionToggle: !channel.isPrivate(),
|
|
channel,
|
|
message: env17918[11]
|
|
};
|
|
}, [r24, channel, message]);
|
|
env17918[13] = memo;
|
|
useLayoutEffect(() => {
|
|
const current = env17918[2].current;
|
|
if (current != null) {
|
|
current.focus();
|
|
}
|
|
}, []);
|
|
c17919_0 = void 0;
|
|
c17919_0 = async (c30217_0) => {
|
|
let c30217_1;
|
|
L18: {
|
|
L17: {
|
|
c30217_1 = void 0;
|
|
if (env17918[5] === true) {
|
|
break L18;
|
|
}
|
|
const id = c30217_0.channel.id;
|
|
const r12 = env17918[3];
|
|
if (r12.length === 0) {
|
|
break L18;
|
|
}
|
|
if (id != null) {
|
|
trackInAppNotificationAccessoryClicked(c30217_0, InAppNotificationAccessoryTypes.SEND_MESSAGE_BUTTON);
|
|
(0, env17918[6])(true);
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
|
|
await MessageActionCreators.sendMessage(id, MessageParser.parse(ChannelStore.getChannel(id), r12), false, {
|
|
...env17918[7] ? MessageActionCreators.getSendMessageOptionsForReply(env17918[13]) : {},
|
|
location: "InAppNotification"
|
|
});
|
|
(0, env17918[1])();
|
|
(0, env17918[6])(false);
|
|
(0, env17918[4])("");
|
|
break L17;
|
|
}
|
|
break L18;
|
|
}
|
|
return void 0;
|
|
}
|
|
};
|
|
env17918[14] = useCallback(function() {
|
|
return c17919_0.apply(this, arguments);
|
|
}, [value, onMessageSent, memo, replying2, loading]);
|
|
const r73 = [notification.channel, ,];
|
|
const id = notification.guild?.id;
|
|
const r77 = () => {
|
|
Keyboard.dismiss();
|
|
const r16 = {
|
|
onPressEmoji: (a0) => {
|
|
let c30218_0 = getEmojiText(a0);
|
|
(0, env17918[4])((a0) => `${a0} ${c30218_0}`);
|
|
const current = env17918[2].current;
|
|
if (current != null) {
|
|
current.focus();
|
|
}
|
|
},
|
|
pickerIntention: EmojiIntention.CHAT,
|
|
channel: null,
|
|
guildId: null,
|
|
startExpanded: false
|
|
};
|
|
const r17 = env17918[0];
|
|
let channel = r17.channel;
|
|
if (channel == null) {
|
|
channel = void 0;
|
|
}
|
|
r16.channel = channel;
|
|
let guildId = r17.guild?.id;
|
|
if (guildId == null) {
|
|
guildId = void 0;
|
|
}
|
|
r16.guildId = guildId;
|
|
openEmojiPickerActionSheet(r16);
|
|
};
|
|
r73[1] = id;
|
|
const callback = useCallback(r77, r73);
|
|
return <View style={styles.inputContainer}>
|
|
<AnimatedChatInputReplyBar replying={replying2} pendingReply={memo} pendingReplyAuthor={nullableMessageAuthor} onToggleReplyMention={() => (0, env17918[10])(!env17918[9])} />
|
|
<View style={styles.inputRow}>
|
|
<IconButton variant={replying2 ? "secondary" : "icon-only"} size="sm" icon={<ArrowAngleLeftUpIcon size="sm" color={Module712.colors.CHAT_INPUT_ICON_DEFAULT_TINT} />} onPress={() => {
|
|
trackInAppNotificationAccessoryClicked(env17918[0], InAppNotificationAccessoryTypes.REPLY_TOGGLE);
|
|
(0, env17918[8])(!env17918[7]);
|
|
}} accessibilityLabel={intl.string(t["5IEsGx"])} />
|
|
<NativeTextInput ref={ref} style={[styles.input, styles2.text]} placeholderTextColor={styles.placeholderText.color} placeholder={intl.formatToPlainString(t["8lzR/R"], {
|
|
channel: channelName
|
|
})} autoFocus value={value} onChangeText={onChangeText} />
|
|
<View style={styles.iconsContainer}>
|
|
<IconButton variant="icon-only" size="sm" icon={<ReactionIcon size="sm" color={Module712.colors.CHAT_INPUT_ICON_DEFAULT_TINT} />} onPress={callback} accessibilityLabel={intl.string(t.sMOuuS)} />
|
|
<IconButton variant="primary" size="sm" accessibilityLabel={intl.string(t.TXNS7S)} icon={<SendMessageIcon size="sm" color={Module712.colors.WHITE} />} onPress={() => (0, env17918[14])(env17918[0])} loading={loading} />
|
|
</View>
|
|
</View>
|
|
</View>;
|
|
}
|