diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx index 5c9e6db5c..0ed26f1fa 100644 --- a/app/containers/EmojiPicker/Footer.tsx +++ b/app/containers/EmojiPicker/Footer.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, Pressable } from 'react-native'; -import { BorderlessButton } from 'react-native-gesture-handler'; import { useTheme } from '../../theme'; import { CustomIcon } from '../CustomIcon'; @@ -9,19 +8,22 @@ import { IFooterProps } from './interfaces'; const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 }; -const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps) => { +const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.ReactElement => { const { colors } = useTheme(); return ( - + [[styles.footerButtonsContainer, { opacity: pressed ? 0.7 : 1 }]]}> - + [{ opacity: pressed ? 0.7 : 1 }]}> ); -}); +}; export default Footer; diff --git a/app/containers/EmojiPicker/TabBar.tsx b/app/containers/EmojiPicker/TabBar.tsx index 51506816c..50326ee30 100644 --- a/app/containers/EmojiPicker/TabBar.tsx +++ b/app/containers/EmojiPicker/TabBar.tsx @@ -24,7 +24,7 @@ const TabBar = ({ activeTab, tabs, goToPage }: ITabBarProps): React.ReactElement backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent' } ]}> - + ))} diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx index 19cd6a39d..344cad49d 100644 --- a/app/containers/EmojiPicker/index.tsx +++ b/app/containers/EmojiPicker/index.tsx @@ -19,7 +19,7 @@ import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definiti import { useAppSelector } from '../../lib/hooks'; import { IEmojiPickerProps, EventTypes } from './interfaces'; -const useFrequentlyUsedEmoji = () => { +export const useFrequentlyUsedEmoji = () => { const [frequentlyUsed, setFrequentlyUsed] = useState([]); const [loaded, setLoaded] = useState(false); const getFrequentlyUsedEmojis = async () => { @@ -41,146 +41,150 @@ const useFrequentlyUsedEmoji = () => { return { frequentlyUsed, loaded }; }; -const EmojiPicker = React.memo( - ({ onItemClicked, tabEmojiStyle, isEmojiKeyboard = false, searching = false, searchedEmojis = [] }: IEmojiPickerProps) => { - const [width, setWidth] = useState(null); - const { colors } = useTheme(); - const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(); +const EmojiPicker = ({ + onItemClicked, + tabEmojiStyle, + isEmojiKeyboard = false, + searching = false, + searchedEmojis = [] +}: IEmojiPickerProps): React.ReactElement | null => { + const [width, setWidth] = useState(null); + const { colors } = useTheme(); + const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(); - const baseUrl = useAppSelector(state => state.server?.server); - const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis); - const customEmojis = useMemo( - () => - Object.keys(allCustomEmojis) - .filter(item => item === allCustomEmojis[item].name) - .map(item => ({ - content: allCustomEmojis[item].name, - extension: allCustomEmojis[item].extension, - isCustom: true - })), - [allCustomEmojis] - ); + const baseUrl = useAppSelector(state => state.server?.server); + const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis); + const customEmojis = useMemo( + () => + Object.keys(allCustomEmojis) + .filter(item => item === allCustomEmojis[item].name) + .map(item => ({ + content: allCustomEmojis[item].name, + extension: allCustomEmojis[item].extension, + isCustom: true + })), + [allCustomEmojis] + ); - const handleEmojiSelect = (emoji: IEmoji) => { - try { - if (emoji.isCustom) { - _addFrequentlyUsed({ - content: emoji.content, - extension: emoji.extension, - isCustom: true - }); - onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); - } else { - const content = emoji; - _addFrequentlyUsed({ content, isCustom: false }); - const shortname = `:${emoji}:`; - onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname); - } - } catch (e) { - log(e); - } - }; - - const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => { - const db = database.active; - const freqEmojiCollection = db.get('frequently_used_emojis'); - let freqEmojiRecord: TFrequentlyUsedEmojiModel; - try { - freqEmojiRecord = await freqEmojiCollection.find(emoji.content); - } catch (error) { - // Do nothing - } - - await db.write(async () => { - if (freqEmojiRecord) { - await freqEmojiRecord.update(f => { - if (f.count) { - f.count += 1; - } - }); - } else { - await freqEmojiCollection.create(f => { - f._raw = sanitizedRaw({ id: emoji.content }, freqEmojiCollection.schema); - Object.assign(f, emoji); - f.count = 1; - }); - } - }); - }); - - const onLayout = ({ - nativeEvent: { - layout: { width } - } - }: any) => setWidth(width); - - const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string, tabsCount: number) => { - let emojis = []; - if (i === 0) { - emojis = frequentlyUsed; - } else if (i === 1) { - emojis = customEmojis; + const handleEmojiSelect = (emoji: IEmoji) => { + try { + if (emoji.isCustom) { + _addFrequentlyUsed({ + content: emoji.content, + extension: emoji.extension, + isCustom: true + }); + onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); } else { - emojis = emojisByCategory[category]; + const content = emoji; + _addFrequentlyUsed({ content, isCustom: false }); + const shortname = `:${emoji}:`; + onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname); } - return ( + } catch (e) { + log(e); + } + }; + + const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => { + const db = database.active; + const freqEmojiCollection = db.get('frequently_used_emojis'); + let freqEmojiRecord: TFrequentlyUsedEmojiModel; + try { + freqEmojiRecord = await freqEmojiCollection.find(emoji.content); + } catch (error) { + // Do nothing + } + + await db.write(async () => { + if (freqEmojiRecord) { + await freqEmojiRecord.update(f => { + if (f.count) { + f.count += 1; + } + }); + } else { + await freqEmojiCollection.create(f => { + f._raw = sanitizedRaw({ id: emoji.content }, freqEmojiCollection.schema); + Object.assign(f, emoji); + f.count = 1; + }); + } + }); + }); + + const onLayout = ({ + nativeEvent: { + layout: { width } + } + }: any) => setWidth(width); + + const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string, tabsCount: number) => { + let emojis = []; + if (i === 0) { + emojis = frequentlyUsed; + } else if (i === 1) { + emojis = customEmojis; + } else { + emojis = emojisByCategory[category]; + } + return ( + handleEmojiSelect(emoji)} + style={styles.categoryContainer} + width={width} + baseUrl={baseUrl} + tabLabel={label} + tabsCount={tabsCount} + isBottomSheet={!isEmojiKeyboard} + /> + ); + }; + + if (!loaded) { + return null; + } + + const tabsCount = frequentlyUsed.length === 0 ? categories.tabs.length - 1 : categories.tabs.length; + + return ( + + {searching ? ( handleEmojiSelect(emoji)} style={styles.categoryContainer} width={width} baseUrl={baseUrl} - tabLabel={label} + tabLabel={'searching'} tabsCount={tabsCount} isBottomSheet={!isEmojiKeyboard} /> - ); - }; - - if (!loaded) { - return null; - } - - const tabsCount = frequentlyUsed.length === 0 ? categories.tabs.length - 1 : categories.tabs.length; - - return ( - - {searching ? ( - handleEmojiSelect(emoji)} - style={styles.categoryContainer} - width={width} - baseUrl={baseUrl} - tabLabel={'searching'} - tabsCount={tabsCount} - isBottomSheet={!isEmojiKeyboard} - /> - ) : ( - } - contentProps={{ - keyboardShouldPersistTaps: 'always', - keyboardDismissMode: 'none' - }} - style={{ backgroundColor: colors.focusedBackground }} - > - {categories.tabs.map((tab: any, i) => - i === 0 && frequentlyUsed.length === 0 - ? null // when no frequentlyUsed don't show the tab - : renderCategory(tab.category, i, tab.tabLabel, tabsCount) - )} - - )} - {isEmojiKeyboard && ( -