import React from 'react'; import { FlatList, StyleSheet, Text, View, useWindowDimensions } from 'react-native'; import { TSupportedThemes, useTheme } from '../../theme'; import { themes } from '../../lib/constants'; import { CustomIcon } from '../CustomIcon'; import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode'; import { addFrequentlyUsed } from '../../lib/methods'; import { useFrequentlyUsedEmoji } from '../../lib/hooks'; import CustomEmoji from '../EmojiPicker/CustomEmoji'; import sharedStyles from '../../views/Styles'; import { IEmoji, TAnyMessageModel } from '../../definitions'; import Touch from '../Touch'; export interface IHeader { handleReaction: (emoji: IEmoji | null, message: TAnyMessageModel) => void; message: TAnyMessageModel; isMasterDetail: boolean; } type TOnReaction = ({ emoji }: { emoji?: IEmoji }) => void; interface THeaderItem { item: IEmoji; onReaction: TOnReaction; theme: TSupportedThemes; } interface THeaderFooter { onReaction: TOnReaction; theme: TSupportedThemes; } const ITEM_SIZE = 36; const CONTAINER_MARGIN = 8; const ITEM_MARGIN = 8; const styles = StyleSheet.create({ container: { alignItems: 'center', marginHorizontal: CONTAINER_MARGIN }, headerItem: { height: ITEM_SIZE, width: ITEM_SIZE, borderRadius: ITEM_SIZE / 2, marginHorizontal: ITEM_MARGIN, justifyContent: 'center', alignItems: 'center' }, headerIcon: { ...sharedStyles.textAlignCenter, fontSize: 20, color: '#fff' }, customEmoji: { height: 20, width: 20 } }); const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => ( onReaction({ emoji: item })} style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]} > {typeof item === 'string' ? ( {shortnameToUnicode(`:${item}:`)} ) : ( )} ); const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => ( onReaction(param)} style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]} > ); const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader) => { const { width } = useWindowDimensions(); const { theme } = useTheme(); const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(true); const size = (isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2; const quantity = Math.trunc(size / (ITEM_SIZE + ITEM_MARGIN * 2) - 1); const onReaction: TOnReaction = ({ emoji }) => { handleReaction(emoji || null, message); if (emoji) { addFrequentlyUsed(emoji); } }; const renderItem = ({ item }: { item: IEmoji }) => ; const renderFooter = () => ; if (!loaded) { return null; } return ( (typeof item === 'string' ? item : item.name)} showsHorizontalScrollIndicator={false} scrollEnabled={false} horizontal /> ); }); export default Header;