From 1ca401ef3c9cd3371253ff4581ed1c7707b7feee Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Fri, 17 Jun 2022 05:04:07 -0400 Subject: [PATCH] Do not cover empty search results on Emoji picker (#6402) --- .../emoji_picker/filtered/index.tsx | 31 +++++-- .../emoji_picker/filtered/no_results.tsx | 90 ------------------- app/components/emoji_picker/index.tsx | 3 + .../post/body/reactions/reactions.tsx | 2 +- app/screens/custom_status/index.tsx | 2 +- .../reaction_bar/reaction_bar.tsx | 2 +- 6 files changed, 30 insertions(+), 100 deletions(-) delete mode 100644 app/components/emoji_picker/filtered/no_results.tsx diff --git a/app/components/emoji_picker/filtered/index.tsx b/app/components/emoji_picker/filtered/index.tsx index 138ffd0a38..b290eea483 100644 --- a/app/components/emoji_picker/filtered/index.tsx +++ b/app/components/emoji_picker/filtered/index.tsx @@ -3,24 +3,34 @@ import Fuse from 'fuse.js'; import React, {useCallback, useMemo} from 'react'; -import {FlatList} from 'react-native'; +import {FlatList, StyleSheet, View} from 'react-native'; +import NoResultsWithTerm from '@components/no_results_with_term'; import {getEmojis, searchEmojis} from '@utils/emoji/helpers'; import EmojiItem from './emoji_item'; -import NoResults from './no_results'; import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji'; type Props = { customEmojis: CustomEmojiModel[]; + keyboardHeight: number; skinTone: string; searchTerm: string; onEmojiPress: (emojiName: string) => void; }; -const EmojiFiltered = ({customEmojis, skinTone, searchTerm, onEmojiPress}: Props) => { +const style = StyleSheet.create({ + noResultContainer: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, +}); + +const EmojiFiltered = ({customEmojis, keyboardHeight, skinTone, searchTerm, onEmojiPress}: Props) => { const emojis = useMemo(() => getEmojis(skinTone, customEmojis), [skinTone, customEmojis]); + const flatListStyle = useMemo(() => ({flexGrow: 1, paddingBottom: keyboardHeight}), [keyboardHeight]); const fuse = useMemo(() => { const options = {findAllMatches: true, ignoreLocation: true, includeMatches: true, shouldSort: false, includeScore: true}; @@ -37,6 +47,14 @@ const EmojiFiltered = ({customEmojis, skinTone, searchTerm, onEmojiPress}: Props const keyExtractor = useCallback((item) => item, []); + const renderEmpty = useCallback(() => { + return ( + + + + ); + }, [searchTerm]); + const renderItem = useCallback(({item}) => { return ( ; - } - return ( diff --git a/app/components/emoji_picker/filtered/no_results.tsx b/app/components/emoji_picker/filtered/no_results.tsx deleted file mode 100644 index f853095cb9..0000000000 --- a/app/components/emoji_picker/filtered/no_results.tsx +++ /dev/null @@ -1,90 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {useIntl} from 'react-intl'; -import {Text, View} from 'react-native'; - -import CompassIcon from '@components/compass_icon'; -import {useTheme} from '@context/theme'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; - -type Props = { - searchTerm: string; -} - -const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => { - return { - flex: { - flex: 1, - }, - flexCenter: { - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, - notFoundIcon: { - backgroundColor: changeOpacity(theme.centerChannelColor, 0.04), - width: 120, - height: 120, - borderRadius: 60, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - notFoundText: { - color: theme.centerChannelColor, - marginTop: 16, - }, - notFoundText20: { - fontSize: 20, - fontWeight: '600', - }, - notFoundText15: { - fontSize: 15, - }, - }; -}); - -const NoResults = ({searchTerm}: Props) => { - const theme = useTheme(); - const intl = useIntl(); - - const styles = getStyleSheetFromTheme(theme); - const title = intl.formatMessage( - { - id: 'mobile.emoji_picker.search.not_found_title', - defaultMessage: 'No results found for "{searchTerm}"', - }, - { - searchTerm, - }, - ); - - const description = intl.formatMessage({ - id: 'mobile.emoji_picker.search.not_found_description', - defaultMessage: 'Check the spelling or try another search.', - }); - - return ( - - - - - - - {title} - - - {description} - - - - ); -}; - -export default NoResults; diff --git a/app/components/emoji_picker/index.tsx b/app/components/emoji_picker/index.tsx index 67a2002e42..10c492cd2d 100644 --- a/app/components/emoji_picker/index.tsx +++ b/app/components/emoji_picker/index.tsx @@ -15,6 +15,7 @@ import {Preferences} from '@constants'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {debounce} from '@helpers/api/general'; +import {useKeyboardHeight} from '@hooks/device'; import {queryAllCustomEmojis} from '@queries/servers/custom_emoji'; import {queryPreferencesByCategoryAndName} from '@queries/servers/preference'; import {observeConfigBooleanValue, observeRecentReactions} from '@queries/servers/system'; @@ -56,6 +57,7 @@ type Props = { const EmojiPicker = ({customEmojis, customEmojisEnabled, onEmojiPress, recentEmojis, skinTone, testID = ''}: Props) => { const theme = useTheme(); const serverUrl = useServerUrl(); + const keyboardHeight = useKeyboardHeight(); const [width, setWidth] = useState(0); const [searchTerm, setSearchTerm] = useState(); const onLayout = useCallback(({nativeEvent}: LayoutChangeEvent) => setWidth(nativeEvent.layout.width), []); @@ -75,6 +77,7 @@ const EmojiPicker = ({customEmojis, customEmojisEnabled, onEmojiPress, recentEmo EmojiList = ( { diff --git a/app/screens/custom_status/index.tsx b/app/screens/custom_status/index.tsx index 0fae454b18..2d34c6d038 100644 --- a/app/screens/custom_status/index.tsx +++ b/app/screens/custom_status/index.tsx @@ -284,7 +284,7 @@ class CustomStatusModal extends NavigationComponent { const title = intl.formatMessage({id: 'mobile.custom_status.choose_emoji', defaultMessage: 'Choose an emoji'}); const passProps = {closeButton: source, onEmojiPress: this.handleEmojiClick}; - showModal(screen, title, passProps); + showModal(screen, title, passProps, {modal: {swipeToDismiss: false}}); }); }); diff --git a/app/screens/post_options/reaction_bar/reaction_bar.tsx b/app/screens/post_options/reaction_bar/reaction_bar.tsx index 24690b4a67..116ed85e62 100644 --- a/app/screens/post_options/reaction_bar/reaction_bar.tsx +++ b/app/screens/post_options/reaction_bar/reaction_bar.tsx @@ -62,7 +62,7 @@ const ReactionBar = ({recentEmojis = [], postId}: QuickReactionProps) => { const title = intl.formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}); const passProps = {closeButton, onEmojiPress: handleEmojiPress}; - showModal(screen, title, passProps); + showModal(screen, title, passProps, {modal: {swipeToDismiss: false}}); }, [intl, theme]); let containerSize = LARGE_CONTAINER_SIZE;