99 lines
4.8 KiB
TypeScript
99 lines
4.8 KiB
TypeScript
// Metro module 9594 (f9595).
|
|
import { memo, useEffect, useRef, useCallback } from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
import { AnalyticEvents, ChatInputComponentViewedTypes, VerticalGradient } from "../../../../Constants";
|
|
import { EmojiIntention } from "../../../emojis/EmojiConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
|
|
import { useSharedValue } from "../../../reanimated/ReanimatedRexport";
|
|
import { useEmojiCategories } from "../../EmojiPickerUtils";
|
|
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
|
|
import useEmojiPickerSearchState from "./useEmojiPickerSearchState";
|
|
import useExpressionPickerInsets from "../../../expression_picker/native/useExpressionPickerInsets";
|
|
import { SearchField } from "../../../../design/components/TextField/native/SearchField.native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import EmojiPickerList from "./EmojiPickerList";
|
|
import { openEmojiActionSheet } from "./openEmojiActionSheet";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import { hexOpacityToRgba } from "../../../../utils/ColorUtils";
|
|
import EmojiPickerCategories from "./categories/EmojiPickerCategories";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flex: 1
|
|
},
|
|
list: {
|
|
overflow: "hidden",
|
|
flex: 1
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
paddingTop: Module712.space.PX_8,
|
|
paddingBottom: 1,
|
|
gap: Module712.space.PX_12
|
|
},
|
|
headerGradientColor: {
|
|
color: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
|
|
},
|
|
headerGradient: {
|
|
...StyleSheet.absoluteFillObject,
|
|
height: Module712.space.PX_8 + 1,
|
|
bottom: void 0,
|
|
top: -1
|
|
}
|
|
});
|
|
const r66 = memo(function EmojiPicker(props) {
|
|
let ref, handleTextChange;
|
|
const { bottomSheetRef, bottomSheetIndex, channel, onPressEmoji, onBackspace, inPortalKeyboard } = props;
|
|
ref = void 0;
|
|
handleTextChange = void 0;
|
|
const styles = useStyles();
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
|
|
type: ChatInputComponentViewedTypes.EMOJI,
|
|
channel_id: channel.id,
|
|
guild_id: channel.guild_id
|
|
});
|
|
}, [channel.id, channel.guild_id]);
|
|
const sharedValue = useSharedValue(0);
|
|
const emojiCategories = useEmojiCategories(EmojiIntention.CHAT, channel);
|
|
const ref2 = useRef(null);
|
|
ref = useRef(null);
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMOJI_PICKER).analyticsLocations;
|
|
const emojiPickerSearchState = useEmojiPickerSearchState(channel, sharedValue, EmojiIntention.CHAT);
|
|
handleTextChange = emojiPickerSearchState.handleTextChange;
|
|
const { searchQueryRef, searchResults } = emojiPickerSearchState;
|
|
const callback2 = useCallback(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
|
|
type: ChatInputComponentViewedTypes.EMOJI_SEARCH,
|
|
channel_id: channel.id,
|
|
guild_id: channel.guild_id
|
|
});
|
|
}, [channel]);
|
|
const callback = useCallback(() => {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.setText("");
|
|
}
|
|
handleTextChange("");
|
|
}, [handleTextChange]);
|
|
const expressionPickerInsets = useExpressionPickerInsets({
|
|
hasCategories: true
|
|
});
|
|
const { safeAreaStyle, safeAreaBottomKeyboardAware } = expressionPickerInsets;
|
|
return <AnalyticsLocationProvider value={analyticsLocations}>
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<SearchField ref={ref} size="md" placeholder={intl.string(t.KgK5qg)} onChange={handleTextChange} onFocus={callback2} isRound />
|
|
</View>
|
|
<View style={styles.list}>
|
|
<EmojiPickerList bottomSheetIndex={bottomSheetIndex} emojiPickerListRef={ref2} categories={emojiCategories} categoryIndexActive={sharedValue} emojis={searchResults} onPressEmoji={onPressEmoji} onLongPressEmoji={openEmojiActionSheet} channel={channel} emojiPickerIntention={EmojiIntention.CHAT} insetBottom={safeAreaBottomKeyboardAware} inPortalKeyboard={inPortalKeyboard} searchQueryRef={searchQueryRef} />
|
|
<Module4611 style={styles.headerGradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[hexOpacityToRgba(styles.headerGradientColor.color, 100), hexOpacityToRgba(styles.headerGradientColor.color, 0)]} />
|
|
</View>
|
|
<EmojiPickerCategories bottomSheetRef={bottomSheetRef} bottomSheetIndex={bottomSheetIndex} style={safeAreaStyle} emojiPickerListRef={ref2} categories={emojiCategories} categoryIndexActive={sharedValue} onBackspace={onBackspace} inPortalKeyboard={inPortalKeyboard} isSearching={searchResults != null} onClearSearch={callback} />
|
|
</View>
|
|
</AnalyticsLocationProvider>;
|
|
});
|
|
export default r66;
|