From 349c56ba4519c4d0d7627e5475a7ce489ac044f4 Mon Sep 17 00:00:00 2001 From: Danish Ahmed Mirza Date: Sat, 25 Jun 2022 02:21:19 +0530 Subject: [PATCH] Add backspace button and same number of columns as category tabs --- app/containers/EmojiPicker/EmojiCategory.tsx | 14 +++++----- app/containers/EmojiPicker/Footer.tsx | 25 +++++++++++++++++ app/containers/EmojiPicker/TabBar.tsx | 10 ++----- app/containers/EmojiPicker/index.tsx | 26 ++++++++++-------- app/containers/EmojiPicker/interfaces.ts | 22 +++++++++++++++ app/containers/EmojiPicker/styles.ts | 13 +++++++++ app/containers/MessageBox/EmojiKeyboard.tsx | 16 ++++++----- app/containers/MessageBox/index.tsx | 28 ++++++++++++++------ app/definitions/IEmoji.ts | 1 + app/views/RoomView/ReactionPicker.tsx | 6 +++-- 10 files changed, 117 insertions(+), 44 deletions(-) create mode 100644 app/containers/EmojiPicker/Footer.tsx create mode 100644 app/containers/EmojiPicker/interfaces.ts diff --git a/app/containers/EmojiPicker/EmojiCategory.tsx b/app/containers/EmojiPicker/EmojiCategory.tsx index d8a20b0d3..f5fed80de 100644 --- a/app/containers/EmojiPicker/EmojiCategory.tsx +++ b/app/containers/EmojiPicker/EmojiCategory.tsx @@ -7,7 +7,7 @@ import CustomEmoji from './CustomEmoji'; import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps'; import { IEmoji, IEmojiCategory } from '../../definitions/IEmoji'; -const EMOJI_SIZE = 50; +const MAX_EMOJI_SIZE = 50; const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => { if (emoji && emoji.isCustom) { @@ -26,7 +26,9 @@ const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => { ); }; -const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, ...props }: IEmojiCategory) => { +const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, tabsCount, ...props }: IEmojiCategory) => { + const emojiSize = width ? Math.min(width / tabsCount, MAX_EMOJI_SIZE) : MAX_EMOJI_SIZE; + const numColumns = Math.trunc(width ? width / emojiSize : tabsCount); const renderItem = (emoji: IEmoji) => ( onEmojiSelected(emoji)} testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}> - {renderEmoji(emoji, EMOJI_SIZE, baseUrl)} + {renderEmoji(emoji, emojiSize, baseUrl)} ); @@ -42,14 +44,10 @@ const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, ... return null; } - const numColumns = Math.trunc(width / EMOJI_SIZE); - const marginHorizontal = (width - numColumns * EMOJI_SIZE) / 2; - return ( (item && item.isCustom && item.content) || item} data={emojis} diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx new file mode 100644 index 000000000..1d0a139c7 --- /dev/null +++ b/app/containers/EmojiPicker/Footer.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { View, TouchableOpacity } from 'react-native'; +import { BorderlessButton } from 'react-native-gesture-handler'; + +import { useTheme } from '../../theme'; +import { CustomIcon } from '../CustomIcon'; +import styles from './styles'; +import { IFooterProps } from './interfaces'; + +const Footer = React.memo(({ onBackspacePressed }: IFooterProps) => { + const { colors } = useTheme(); + return ( + + console.log('Search!')} style={styles.footerButtonsContainer}> + + + + + + + + ); +}); + +export default Footer; diff --git a/app/containers/EmojiPicker/TabBar.tsx b/app/containers/EmojiPicker/TabBar.tsx index 887e93c81..51945015b 100644 --- a/app/containers/EmojiPicker/TabBar.tsx +++ b/app/containers/EmojiPicker/TabBar.tsx @@ -1,15 +1,9 @@ import React from 'react'; -import { StyleProp, Text, TextStyle, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; import styles from './styles'; import { useTheme } from '../../theme'; - -interface ITabBarProps { - goToPage?: (page: number) => void; - activeTab?: number; - tabs?: string[]; - tabEmojiStyle: StyleProp; -} +import { ITabBarProps } from './interfaces'; const TabBar = React.memo(({ activeTab, tabs, goToPage, tabEmojiStyle }: ITabBarProps) => { const { colors } = useTheme(); diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx index a456149de..2e563c927 100644 --- a/app/containers/EmojiPicker/index.tsx +++ b/app/containers/EmojiPicker/index.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from 'react'; -import { StyleProp, TextStyle, View } from 'react-native'; +import { View } from 'react-native'; import ScrollableTabView from 'react-native-scrollable-tab-view'; import orderBy from 'lodash/orderBy'; import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord'; import TabBar from './TabBar'; import EmojiCategory from './EmojiCategory'; +import Footer from './Footer'; import styles from './styles'; import categories from './categories'; import database from '../../lib/database'; @@ -16,13 +17,9 @@ import log from '../../lib/methods/helpers/log'; import { useTheme } from '../../theme'; import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions'; import { useAppSelector } from '../../lib/hooks'; +import { IEmojiPickerProps, EventTypes } from './interfaces'; -interface IEmojiPickerProps { - onEmojiSelected: (emoji: string, shortname?: string) => void; - tabEmojiStyle?: StyleProp; -} - -const EmojiPicker = React.memo(({ onEmojiSelected, tabEmojiStyle }: IEmojiPickerProps) => { +const EmojiPicker = React.memo(({ onItemClicked, tabEmojiStyle }: IEmojiPickerProps) => { const [frequentlyUsed, setFrequentlyUsed] = useState([]); const [show, setShow] = useState(false); const [width, setWidth] = useState(null); @@ -54,12 +51,12 @@ const EmojiPicker = React.memo(({ onEmojiSelected, tabEmojiStyle }: IEmojiPicker extension: emoji.extension, isCustom: true }); - onEmojiSelected(`:${emoji.content}:`); + onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); } else { const content = emoji; _addFrequentlyUsed({ content, isCustom: false }); const shortname = `:${emoji}:`; - onEmojiSelected(shortnameToUnicode(shortname), shortname); + onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname); } } catch (e) { log(e); @@ -112,7 +109,7 @@ const EmojiPicker = React.memo(({ onEmojiSelected, tabEmojiStyle }: IEmojiPicker } }: any) => setWidth(width); - const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string) => { + const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string, tabsCount: number) => { let emojis = []; if (i === 0) { emojis = frequentlyUsed; @@ -129,13 +126,19 @@ const EmojiPicker = React.memo(({ onEmojiSelected, tabEmojiStyle }: IEmojiPicker width={width} baseUrl={baseUrl} tabLabel={label} + tabsCount={tabsCount} /> ); }; + const onBackspacePressed = () => onItemClicked(EventTypes.BACKSPACE_PRESSED); + if (!show) { return null; } + + const tabsCount = frequentlyUsed.length === 0 ? categories.tabs.length - 1 : categories.tabs.length; + return ( i === 0 && frequentlyUsed.length === 0 ? null // when no frequentlyUsed don't show the tab - : renderCategory(tab.category, i, tab.tabLabel) + : renderCategory(tab.category, i, tab.tabLabel, tabsCount) )} +