Add generic AutoCompleteSuggestions component

src/CONST.js

@@ -715,7 +715,7 @@ const CONST = {
     EMOJI_PICKER_ITEM_HEIGHT: 32,
     EMOJI_PICKER_HEADER_HEIGHT: 32,
     RECIPIENT_LOCAL_TIME_HEIGHT: 25,
-    EMOJI_SUGGESTER: {
+    AUTO_COMPLETE_SUGGESTER: {
         SUGGESTER_PADDING: 6,
         ITEM_HEIGHT: 36,
         SMALL_CONTAINER_HEIGHT_FACTOR: 2.5,

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import {View, Pressable} from 'react-native';
+
+// We take FlatList from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
+import {FlatList} from 'react-native-gesture-handler';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import CONST from '../../CONST';
+import {propTypes} from './autoCompleteSuggestionsPropTypes';
+
+/**
+ * @param {Number} numRows
+ * @param {Boolean} isSuggestionPickerLarge
+ * @returns {Number}
+ */
+const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
+    if (isSuggestionPickerLarge) {
+        return numRows * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
+    }
+    if (numRows > 2) {
+        // On small screens, we display a scrollable window with a height of 2.5 items, indicating that there are more items available beyond what is currently visible
+        return CONST.AUTO_COMPLETE_SUGGESTER.SMALL_CONTAINER_HEIGHT_FACTOR * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
+    }
+    return numRows * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
+};
+
+const BaseAutoCompleteSuggestions = (props) => {
+    /**
+     * Render a suggestion menu item component.
+     * @param {Object} params
+     * @param {Object} params.item
+     * @param {Number} params.index
+     * @returns {JSX.Element}
+     */
+    const renderSuggestionMenuItem = ({item, index}) => (
+        <Pressable
+            style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(
+                props.highlightedSuggestionIndex,
+                CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT,
+                hovered,
+                index,
+            )}
+            onMouseDown={e => e.preventDefault()}
+            onPress={() => props.onSelect(index)}
+            onLongPress={() => {}}
+        >
+            {props.renderSuggestionMenuItem(item, index)}
+        </Pressable>
+    );
+
+    const rowHeight = measureHeightOfSuggestionRows(
+        props.suggestions.length,
+        props.isSuggestionPickerLarge,
+    );
+
+    return (
+        <View
+            ref={props.forwardedRef}
+            style={[
+                styles.autoCompleteSuggestionsContainer,
+                StyleUtils.getAutoCompleteSuggestionContainerStyle(
+                    rowHeight,
+                    props.shouldIncludeReportRecipientLocalTimeHeight,
+                ),
+            ]}
+        >
+            <FlatList
+                keyboardShouldPersistTaps="handled"
+                data={props.suggestions}
+                renderItem={renderSuggestionMenuItem}
+                keyExtractor={props.keyExtractor}
+                removeClippedSubviews={false}
+                style={{height: rowHeight}}
+            />
+        </View>
+    );
+};
+
+BaseAutoCompleteSuggestions.propTypes = propTypes;
+BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
+
+export default React.forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BaseAutoCompleteSuggestions {...props} forwardedRef={ref} />
+));

src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Array of suggestions */
+    // eslint-disable-next-line react/forbid-prop-types
+    suggestions: PropTypes.arrayOf(PropTypes.object).isRequired,
+
+    /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
+    renderSuggestionMenuItem: PropTypes.func.isRequired,
+
+    /** Create unique keys for each suggestion item */
+    keyExtractor: PropTypes.func.isRequired,
+
+    /** The index of the highlighted suggestion */
+    highlightedSuggestionIndex: PropTypes.number.isRequired,
+
+    /** Fired when the user selects a suggestion */
+    onSelect: PropTypes.func.isRequired,
+
+    /** Show that we can use large auto-complete suggestion picker.
+     * Depending on available space and whether the input is expanded, we can have a small or large mention suggester.
+     * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
+    isSuggestionPickerLarge: PropTypes.bool.isRequired,
+
+    /** Show that we should include ReportRecipientLocalTime view height */
+    shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired,
+};
+
+const defaultProps = {};
+
+export {propTypes, defaultProps};

src/components/EmojiSuggestions/index.js → src/components/AutoCompleteSuggestions/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import BaseEmojiSuggestions from './BaseEmojiSuggestions';
+import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
-import {propTypes, defaultProps} from './emojiSuggestionsPropTypes';
+import {propTypes} from './autoCompleteSuggestionsPropTypes';
 
 /**
- * On the mobile-web platform, when long-pressing on emoji suggestions,
- * we need to prevent focus shifting to avoid blurring the main input which makes the emoji picker close and adds the emoji to the composer.
+ * On the mobile-web platform, when long-pressing on auto-complete suggestions,
+ * we need to prevent focus shifting to avoid blurring the main input (which makes the suggestions picker close and fires the onSelect callback).
  * The desired pattern for all platforms is to do nothing on long-press.
- * On the native platform, tapping on emoji suggestions will not blur the main input.
+ * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-const EmojiSuggestions = (props) => {
+const AutoCompleteSuggestions = (props) => {
     const containerRef = React.useRef(null);
     React.useEffect(() => {
         const container = containerRef.current;
@@ -28,12 +28,11 @@ const EmojiSuggestions = (props) => {
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <BaseEmojiSuggestions {...props} ref={containerRef} />
+        <BaseAutoCompleteSuggestions {...props} ref={containerRef} />
     );
 };
 
-EmojiSuggestions.propTypes = propTypes;
-EmojiSuggestions.defaultProps = defaultProps;
-EmojiSuggestions.displayName = 'EmojiSuggestions';
+AutoCompleteSuggestions.propTypes = propTypes;
+AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
 
-export default EmojiSuggestions;
+export default AutoCompleteSuggestions;

src/components/AutoCompleteSuggestions/index.native.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import {propTypes} from './autoCompleteSuggestionsPropTypes';
+
+const AutoCompleteSuggestions = props => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BaseAutoCompleteSuggestions {...props} />
+);
+
+AutoCompleteSuggestions.propTypes = propTypes;
+AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
+
+export default AutoCompleteSuggestions;

src/components/EmojiSuggestions.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
+import * as EmojiUtils from '../libs/EmojiUtils';
+import Text from './Text';
+import getStyledTextArray from '../libs/GetStyledTextArray';
+import AutoCompleteSuggestions from
+'./AutoCompleteSuggestions';
+
+const propTypes = {
+    /** The index of the highlighted emoji */
+    highlightedEmojiIndex: PropTypes.number,
+
+    /** Array of suggested emoji */
+    emojis: PropTypes.arrayOf(PropTypes.shape({
+        /** The emoji code */
+        code: PropTypes.string.isRequired,
+
+        /** The name of the emoji */
+        name: PropTypes.string.isRequired,
+
+        /** Array of different skin tone variants.
+         * If provided, it will be indexed with props.preferredSkinToneIndex */
+        types: PropTypes.arrayOf(PropTypes.string.isRequired),
+    })).isRequired,
+
+    /** Fired when the user selects an emoji */
+    onSelect: PropTypes.func.isRequired,
+
+    /** Emoji prefix that follows the colon */
+    prefix: PropTypes.string.isRequired,
+
+    /** Show that we can use large emoji picker. Depending on available space
+    * and whether the input is expanded, we can have a small or large emoji
+    * suggester. When this value is false, the suggester will have a height of
+    * 2.5 items. When this value is true, the height can be up to 5 items.  */
+    isEmojiPickerLarge: PropTypes.bool.isRequired,
+
+    /** Show that we should include ReportRecipientLocalTime view height */
+    shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired,
+
+    /** Stores user's preferred skin tone */
+    preferredSkinToneIndex: PropTypes.number.isRequired,
+};
+
+const defaultProps = {highlightedEmojiIndex: 0};
+
+/**
+ * Create unique keys for each emoji item
+ * @param {Object} item
+ * @param {Number} index
+ * @returns {String}
+ */
+const keyExtractor = (item, index) => `${item.name}+${index}}`;
+
+const EmojiSuggestions = (props) => {
+    /**
+     * Render an emoji suggestion menu item component.
+     * @param {Object} item
+     * @returns {JSX.Element}
+     */
+    const renderSuggestionMenuItem = (item) => {
+        const styledTextArray = getStyledTextArray(item.name, props.prefix);
+
+        return (
+            <View style={styles.autoCompleteSuggestionContainer}>
+                <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, props.preferredSkinToneIndex)}</Text>
+                <Text style={styles.emojiSuggestionsText}>
+                    :
+                    {_.map(styledTextArray, ({text, isColored}, i) => (
+                        <Text key={`${text}+${i}`} style={StyleUtils.getColoredBackgroundStyle(isColored)}>
+                            {text}
+                        </Text>
+                    ))}
+                    :
+                </Text>
+            </View>
+        );
+    };
+
+    return (
+        <AutoCompleteSuggestions
+            suggestions={props.emojis}
+            renderSuggestionMenuItem={renderSuggestionMenuItem}
+            keyExtractor={keyExtractor}
+            highlightedSuggestionIndex={props.highlightedEmojiIndex}
+            onSelect={props.onSelect}
+            isSuggestionPickerLarge={props.isEmojiPickerLarge}
+            shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight}
+        />
+    );
+};
+
+EmojiSuggestions.propTypes = propTypes;
+EmojiSuggestions.defaultProps = defaultProps;
+EmojiSuggestions.displayName = 'EmojiSuggestions';
+
+export default EmojiSuggestions;