toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-23739 Empty search state for emoji picker (#4641) (#4680)

Browse source 
* Returning a "no results for" default message

* Added styles & i18n text

* Updating icon to Octicons

* Replacing conditional render with ListEmptyComponent

* Running mmjstool sort

* Changing fontWeight, center layout, icon style

(cherry picked from commit c57c2f4245)

Co-authored-by: Andre Vasconcelos <andre.onogoro@gmail.com>
This commit is contained in:
Mattermost Build 2020-08-15 10:23:08 -04:00 committed by GitHub
parent dbf96ac8eb
commit ea0b24149c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
app/components/emoji_picker/emoji_picker_base.js
View file

@ -14,6 +14,8 @@ import {
View,
} from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Octicons from 'react-native-vector-icons/Octicons';
import sectionListGetItemLayout from 'react-native-section-list-get-item-layout';
import Emoji from 'app/components/emoji';
@ -258,6 +260,8 @@ export default class EmojiPicker extends PureComponent {
nativeID={SCROLLVIEW_NATIVE_ID}
pageSize={10}
renderItem={this.flatListRenderItem}
ListEmptyComponent={this.renderEmptyList}
contentContainerStyle={styles.flex}
style={styles.flatList}
/>
);
@ -449,6 +453,42 @@ export default class EmojiPicker extends PureComponent {
</View>
);
};
renderEmptyList = () => {
const {theme} = this.props;
const {formatMessage} = this.context.intl;
const {searchTerm} = this.state;
const styles = getStyleSheetFromTheme(theme);
const title = formatMessage({
id: 'mobile.emoji_picker.search.not_found_title',
defaultMessage: 'No results found for "{searchTerm}"',
}, {
searchTerm,
});
const description = formatMessage({
id: 'mobile.emoji_picker.search.not_found_description',
defaultMessage: 'Check the spelling or try another search.',
});
return (
<View style={[styles.flex, styles.flexCenter]}>
<View style={styles.flexCenter}>
<View style={styles.notFoundIcon}>
<Octicons
name='search'
size={60}
color={theme.buttonBg}
/>
</View>
<Text style={[styles.notFoundText, styles.notFoundText20]}>
{title}
</Text>
<Text style={[styles.notFoundText, styles.notFoundText15]}>
{description}
</Text>
</View>
</View>
);
}
}
export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
@ -515,6 +555,31 @@ export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
borderRightColor: changeOpacity(theme.centerChannelColor, 0.2),
overflow: 'hidden',
},
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,
},
searchBar: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
paddingVertical: 5,

2
assets/base/i18n/en.json
View file

@ -243,6 +243,8 @@
"mobile.emoji_picker.people": "PEOPLE",
"mobile.emoji_picker.places": "PLACES",
"mobile.emoji_picker.recent": "RECENTLY USED",
"mobile.emoji_picker.search.not_found_description": "Check the spelling or try another search.",
"mobile.emoji_picker.search.not_found_title": "No results found for \"{searchTerm}\"",
"mobile.emoji_picker.symbols": "SYMBOLS",
"mobile.error_handler.button": "Relaunch",
"mobile.error_handler.description": "\nTap relaunch to open the app again. After restart, you can report the problem from the settings menu.\n",