Merge pull request #3872 from rushatgabhane/noemoji-message

Display a message when no emojis are found in search
Expensify · Jul 2, 2021 · b9b7ec4 · b9b7ec4
2 parents bfc14ce + 84eb6fd
commit b9b7ec4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -55,6 +55,7 @@ export default {
         dateFormat: 'YYYY-MM-DD',
         send: 'Send',
         notifications: 'Notifications',
+        noResultsFound: 'No results found',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -51,6 +51,7 @@ export default {
         dateFormat: 'AAAA-MM-DD',
         send: 'Enviar',
         notifications: 'Notificaciones',
+        noResultsFound: 'No se han encontrado resultados',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',

diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -326,17 +326,34 @@ class EmojiPickerMenu extends Component {
                         />
                     </View>
                 )}
-                <FlatList
-                    ref={el => this.emojiList = el}
-                    data={this.state.filteredEmojis}
-                    renderItem={this.renderItem}
-                    keyExtractor={item => `emoji_picker_${item.code}`}
-                    numColumns={this.numColumns}
-                    style={styles.emojiPickerList}
-                    extraData={[this.state.filteredEmojis, this.state.highlightedIndex]}
-                    stickyHeaderIndices={this.state.headerIndices}
-                    onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
-                />
+                {this.state.filteredEmojis.length === 0
+                    ? (
+                        <Text
+                            style={[
+                                styles.textP,
+                                styles.disabledText,
+                                styles.emojiPickerList,
+                                styles.dFlex,
+                                styles.alignItemsCenter,
+                                styles.justifyContentCenter,
+                            ]}
+                        >
+                            {this.props.translate('common.noResultsFound')}
+                        </Text>
+                    )
+                    : (
+                        <FlatList
+                            ref={el => this.emojiList = el}
+                            data={this.state.filteredEmojis}
+                            renderItem={this.renderItem}
+                            keyExtractor={item => `emoji_picker_${item.code}`}
+                            numColumns={this.numColumns}
+                            style={styles.emojiPickerList}
+                            extraData={[this.state.filteredEmojis, this.state.highlightedIndex]}
+                            stickyHeaderIndices={this.state.headerIndices}
+                            onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
+                        />
+                    )}
             </View>
         );
     }