From 82799bcbcaeac0af5d0a93da78f7ea8bc9e9a806 Mon Sep 17 00:00:00 2001 From: Konrad Bochnia Date: Wed, 26 Apr 2023 13:48:52 +0200 Subject: [PATCH 1/5] Add generic AutoCompleteSuggestions component --- src/CONST.js | 2 +- src/components/EmojiSuggestions.js | 100 +++++----------- .../home/report/AutoCompleteSuggestions.js | 108 ++++++++++++++++++ src/pages/home/report/ReportActionCompose.js | 4 +- src/styles/StyleUtils.js | 14 +-- src/styles/styles.js | 5 +- 6 files changed, 149 insertions(+), 84 deletions(-) create mode 100644 src/pages/home/report/AutoCompleteSuggestions.js diff --git a/src/CONST.js b/src/CONST.js index f006b8f2f49fc..42fe3f5804277 100755 --- a/src/CONST.js +++ b/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, diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index 24f0203b75774..1a2a724917fcf 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -1,16 +1,14 @@ import React from 'react'; -import {View, Pressable} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; -// We take FlatList from this package to properly handle the scrolling of EmojiSuggestions 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 * as EmojiUtils from '../libs/EmojiUtils'; import Text from './Text'; -import CONST from '../CONST'; import getStyledTextArray from '../libs/GetStyledTextArray'; +import AutoCompleteSuggestions from "../pages/home/report/AutoCompleteSuggestions" const propTypes = { /** The index of the highlighted emoji */ @@ -47,22 +45,6 @@ const defaultProps = { highlightedEmojiIndex: 0, }; -/** - * @param {Number} numRows - * @param {Boolean} isEmojiPickerLarge - * @returns {Number} - */ -const measureHeightOfEmojiRows = (numRows, isEmojiPickerLarge) => { - if (isEmojiPickerLarge) { - return numRows * CONST.EMOJI_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.EMOJI_SUGGESTER.SMALL_CONTAINER_HEIGHT_FACTOR * CONST.EMOJI_SUGGESTER.ITEM_HEIGHT; - } - return numRows * CONST.EMOJI_SUGGESTER.ITEM_HEIGHT; -}; - /** * Create unique keys for each emoji item * @param {Object} item @@ -73,66 +55,40 @@ const keyExtractor = (item, index) => `${item.name}+${index}}`; const EmojiSuggestions = (props) => { /** - * Render a suggestion menu item component. - * @param {Object} params.item - * @param {Number} params.index + * Render an emoji suggestion menu item component. + * @param {Object} item * @returns {JSX.Element} */ - const renderSuggestionMenuItem = ({item, index}) => { + const renderSuggestionMenuItem = (item) => { const styledTextArray = getStyledTextArray(item.name, props.prefix); return ( - StyleUtils.getEmojiSuggestionItemStyle( - props.highlightedEmojiIndex, - CONST.EMOJI_SUGGESTER.ITEM_HEIGHT, - hovered, - index, - )} - onMouseDown={e => e.preventDefault()} - onPress={() => props.onSelect(index)} - > - - {EmojiUtils.getEmojiCodeWithSkinColor(item, props.preferredSkinToneIndex)} - - : - {_.map(styledTextArray, ({text, isColored}, i) => ( - - {text} - - ))} - : - - - + + {EmojiUtils.getEmojiCodeWithSkinColor(item, props.preferredSkinToneIndex)} + + : + {_.map(styledTextArray, ({text, isColored}, i) => ( + + {text} + + ))} + : + + ); }; - - const rowHeight = measureHeightOfEmojiRows( - props.emojis.length, - props.isEmojiPickerLarge, - ); - + return ( - - - - ); + + ) }; EmojiSuggestions.propTypes = propTypes; diff --git a/src/pages/home/report/AutoCompleteSuggestions.js b/src/pages/home/report/AutoCompleteSuggestions.js new file mode 100644 index 0000000000000..c748e671ce8d1 --- /dev/null +++ b/src/pages/home/report/AutoCompleteSuggestions.js @@ -0,0 +1,108 @@ +import React from 'react'; +import {View, Pressable} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; + +// 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'; + +const propTypes = { + /** Array of suggestions */ + suggestions: PropTypes.array.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, + + /** 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, +}; + +/** + * @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 AutoCompleteSuggestions = (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}) => { + return ( + StyleUtils.getAutoCompleteSuggestionItemStyle( + props.highlightedSuggestionIndex, + CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, + hovered, + index + ) + } + onMouseDown={e => e.preventDefault()} + onPress={() => props.onSelect?.(index)} + > + {props.renderSuggestionMenuItem(item, index)} + + ); + }; + + const rowHeight = measureHeightOfSuggestionRows( + props.suggestions.length, + props.isSuggestionPickerLarge, + ); + + return ( + + + + ); +}; + +AutoCompleteSuggestions.propTypes = propTypes; +AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions'; + +export default AutoCompleteSuggestions; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 0e984f5a0aa84..88e5a11e5cb43 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -152,8 +152,8 @@ const defaultProps = { const getMaxArrowIndex = (numRows, isEmojiPickerLarge) => { // EmojiRowCount is number of emoji suggestions. For small screen we can fit 3 items and for large we show up to 5 items const emojiRowCount = isEmojiPickerLarge - ? Math.max(numRows, CONST.EMOJI_SUGGESTER.MAX_AMOUNT_OF_ITEMS) - : Math.max(numRows, CONST.EMOJI_SUGGESTER.MIN_AMOUNT_OF_ITEMS); + ? Math.max(numRows, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS) + : Math.max(numRows, CONST.AUTO_COMPLETE_SUGGESTER.MIN_AMOUNT_OF_ITEMS); // -1 because we start at 0 return emojiRowCount - 1; diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 46d1c19c3e043..fbfe5b3c7fa55 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -863,7 +863,7 @@ function getReportWelcomeContainerStyle(isSmallScreenWidth) { } /** - * Gets styles for Emoji Suggestion row + * Gets styles for AutoCompleteSuggestion row * * @param {Number} highlightedEmojiIndex * @param {Number} rowHeight @@ -871,7 +871,7 @@ function getReportWelcomeContainerStyle(isSmallScreenWidth) { * @param {Number} currentEmojiIndex * @returns {Object} */ -function getEmojiSuggestionItemStyle( +function getAutoCompleteSuggestionItemStyle( highlightedEmojiIndex, rowHeight, hovered, @@ -897,18 +897,18 @@ function getEmojiSuggestionItemStyle( } /** - * Gets the correct position for emoji suggestion container + * Gets the correct position for auto complete suggestion container * * @param {Number} itemsHeight * @param {Boolean} shouldIncludeReportRecipientLocalTimeHeight * @returns {Object} */ -function getEmojiSuggestionContainerStyle( +function getAutoCompleteSuggestionContainerStyle( itemsHeight, shouldIncludeReportRecipientLocalTimeHeight, ) { const optionalPadding = shouldIncludeReportRecipientLocalTimeHeight ? CONST.RECIPIENT_LOCAL_TIME_HEIGHT : 0; - const padding = CONST.EMOJI_SUGGESTER.SUGGESTER_PADDING - optionalPadding; + const padding = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING - optionalPadding; // The suggester is positioned absolutely within the component that includes the input and RecipientLocalTime view (for non-expanded mode only). To position it correctly, // we need to shift it by the suggester's height plus its padding and, if applicable, the height of the RecipientLocalTime view. @@ -1048,8 +1048,8 @@ export { getReportWelcomeBackgroundImageStyle, getReportWelcomeTopMarginStyle, getReportWelcomeContainerStyle, - getEmojiSuggestionItemStyle, - getEmojiSuggestionContainerStyle, + getAutoCompleteSuggestionItemStyle, + getAutoCompleteSuggestionContainerStyle, getColoredBackgroundStyle, getDefaultWorkspaceAvatarColor, getAvatarBorderRadius, diff --git a/src/styles/styles.js b/src/styles/styles.js index c2e6b6995f18e..7d39fc7d457e3 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -165,7 +165,7 @@ const styles = { flexBasis: '48%', }, - emojiSuggestionsContainer: { + autoCompleteSuggestionsContainer: { backgroundColor: themeColors.appBG, borderRadius: 8, borderWidth: 1, @@ -176,7 +176,8 @@ const styles = { left: 0, right: 0, }, - emojiSuggestionContainer: { + + reportSuggestionContainer: { flexDirection: 'row', alignItems: 'center', }, From f798983a23dfb6b3b3b27cf0ba954920a7684167 Mon Sep 17 00:00:00 2001 From: Konrad Bochnia Date: Wed, 26 Apr 2023 16:33:26 +0200 Subject: [PATCH 2/5] Fix lint errors --- src/components/EmojiSuggestions.js | 6 +-- .../home/report/AutoCompleteSuggestions.js | 41 +++++++++---------- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index 1a2a724917fcf..0354e1352229c 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -8,7 +8,7 @@ import * as StyleUtils from '../styles/StyleUtils'; import * as EmojiUtils from '../libs/EmojiUtils'; import Text from './Text'; import getStyledTextArray from '../libs/GetStyledTextArray'; -import AutoCompleteSuggestions from "../pages/home/report/AutoCompleteSuggestions" +import AutoCompleteSuggestions from '../pages/home/report/AutoCompleteSuggestions'; const propTypes = { /** The index of the highlighted emoji */ @@ -77,7 +77,7 @@ const EmojiSuggestions = (props) => { ); }; - + return ( { isSuggestionPickerLarge={props.isEmojiPickerLarge} shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight} /> - ) + ); }; EmojiSuggestions.propTypes = propTypes; diff --git a/src/pages/home/report/AutoCompleteSuggestions.js b/src/pages/home/report/AutoCompleteSuggestions.js index c748e671ce8d1..921270858d3f2 100644 --- a/src/pages/home/report/AutoCompleteSuggestions.js +++ b/src/pages/home/report/AutoCompleteSuggestions.js @@ -1,7 +1,6 @@ import React from 'react'; import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; -import _ from 'underscore'; // 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'; @@ -11,11 +10,12 @@ import CONST from '../../../CONST'; const propTypes = { /** Array of suggestions */ - suggestions: PropTypes.array.isRequired, - + // 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, @@ -23,7 +23,7 @@ const propTypes = { highlightedSuggestionIndex: PropTypes.number.isRequired, /** Fired when the user selects a suggestion */ - onSelect: PropTypes.func, + 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. @@ -58,23 +58,20 @@ const AutoCompleteSuggestions = (props) => { * @param {Number} params.index * @returns {JSX.Element} */ - const renderSuggestionMenuItem = ({item, index}) => { - return ( - StyleUtils.getAutoCompleteSuggestionItemStyle( - props.highlightedSuggestionIndex, - CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, - hovered, - index - ) - } - onMouseDown={e => e.preventDefault()} - onPress={() => props.onSelect?.(index)} - > - {props.renderSuggestionMenuItem(item, index)} - - ); - }; + const renderSuggestionMenuItem = ({item, index}) => ( + StyleUtils.getAutoCompleteSuggestionItemStyle( + props.highlightedSuggestionIndex, + CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, + hovered, + index, + )} + onMouseDown={e => e.preventDefault()} + onPress={() => props.onSelect(index)} + > + {props.renderSuggestionMenuItem(item, index)} + + ); const rowHeight = measureHeightOfSuggestionRows( props.suggestions.length, From 5232332bacba5cf05ea95294a23ecd21e0254441 Mon Sep 17 00:00:00 2001 From: Konrad Bochnia Date: Thu, 27 Apr 2023 15:03:25 +0200 Subject: [PATCH 3/5] Implement feedback --- src/components/EmojiSuggestions.js | 2 +- src/pages/home/report/AutoCompleteSuggestions.js | 2 +- src/styles/styles.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index 0354e1352229c..31c74101224b3 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -63,7 +63,7 @@ const EmojiSuggestions = (props) => { const styledTextArray = getStyledTextArray(item.name, props.prefix); return ( - + {EmojiUtils.getEmojiCodeWithSkinColor(item, props.preferredSkinToneIndex)} : diff --git a/src/pages/home/report/AutoCompleteSuggestions.js b/src/pages/home/report/AutoCompleteSuggestions.js index 921270858d3f2..a34824c09f763 100644 --- a/src/pages/home/report/AutoCompleteSuggestions.js +++ b/src/pages/home/report/AutoCompleteSuggestions.js @@ -44,7 +44,7 @@ const measureHeightOfSuggestionRows = (numRows, 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 + // 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; diff --git a/src/styles/styles.js b/src/styles/styles.js index 7d39fc7d457e3..1b7f534692c6e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -177,7 +177,7 @@ const styles = { right: 0, }, - reportSuggestionContainer: { + autoCompleteSuggestionContainer: { flexDirection: 'row', alignItems: 'center', }, From e9c242061ae78a32562f8f7fb5d7130921e61f72 Mon Sep 17 00:00:00 2001 From: Konrad Bochnia Date: Fri, 28 Apr 2023 15:00:54 +0200 Subject: [PATCH 4/5] Fix lint errors --- .../autoCompleteSuggestionsPropTypes.js | 4 +++- src/components/AutoCompleteSuggestions/index.js | 3 ++- src/components/AutoCompleteSuggestions/index.native.js | 8 ++++---- src/components/EmojiSuggestions.js | 10 ++++++---- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js b/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js index c24f81d4936c3..eed9368e534d8 100644 --- a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js +++ b/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js @@ -26,4 +26,6 @@ const propTypes = { shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired, }; -export {propTypes}; +const defaultProps = {}; + +export {propTypes, defaultProps}; diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js index a787d4bce50ec..ce07b81fbd446 100644 --- a/src/components/AutoCompleteSuggestions/index.js +++ b/src/components/AutoCompleteSuggestions/index.js @@ -21,7 +21,7 @@ const AutoCompleteSuggestions = (props) => { if (DeviceCapabilities.hasHoverSupport()) { return; } - // e.preventDefault(); + e.preventDefault(); }; return () => container.onpointerdown = null; }, []); @@ -33,6 +33,7 @@ const AutoCompleteSuggestions = (props) => { }; AutoCompleteSuggestions.propTypes = propTypes; + // AutoCompleteSuggestions.defaultProps = defaultProps; AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions'; diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js index 0d12e694720c1..72fafc69b8da1 100644 --- a/src/components/AutoCompleteSuggestions/index.native.js +++ b/src/components/AutoCompleteSuggestions/index.native.js @@ -2,14 +2,14 @@ import React from 'react'; import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions'; import {propTypes} from './autoCompleteSuggestionsPropTypes'; -const AutoCompleteSuggestions = props => { - return ( +const AutoCompleteSuggestions = props => ( // eslint-disable-next-line react/jsx-props-no-spreading -)}; +); AutoCompleteSuggestions.propTypes = propTypes; + // AutoCompleteSuggestions.defaultProps = defaultProps; AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions'; -export default AutoCompleteSuggestions; \ No newline at end of file +export default AutoCompleteSuggestions; diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index e263fe28fa51d..527bc73d2ce4f 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -21,7 +21,8 @@ const propTypes = { code: PropTypes.string, /** The name of the emoji */ - name: PropTypes.string, })).isRequired, + name: PropTypes.string, + })).isRequired, /** Fired when the user selects an emoji */ onSelect: PropTypes.func.isRequired, @@ -39,9 +40,10 @@ const propTypes = { shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired, /** Stores user's preferred skin tone */ - preferredSkinToneIndex: PropTypes.number.isRequired, }; + preferredSkinToneIndex: PropTypes.number.isRequired, +}; -const defaultProps = { highlightedEmojiIndex: 0, }; +const defaultProps = {highlightedEmojiIndex: 0}; /** * Create unique keys for each emoji item @@ -93,4 +95,4 @@ EmojiSuggestions.propTypes = propTypes; EmojiSuggestions.defaultProps = defaultProps; EmojiSuggestions.displayName = 'EmojiSuggestions'; -export default EmojiSuggestions; \ No newline at end of file +export default EmojiSuggestions; From 56bc6c48b3a74e0653bf31d9614325aac7408ca8 Mon Sep 17 00:00:00 2001 From: Konrad Bochnia Date: Thu, 4 May 2023 12:39:10 +0200 Subject: [PATCH 5/5] Implement feedback --- src/components/AutoCompleteSuggestions/index.js | 4 +--- .../AutoCompleteSuggestions/index.native.js | 2 -- src/components/EmojiSuggestions.js | 11 +++++++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.js index ce07b81fbd446..a17c869f1a87a 100644 --- a/src/components/AutoCompleteSuggestions/index.js +++ b/src/components/AutoCompleteSuggestions/index.js @@ -5,7 +5,7 @@ import {propTypes} from './autoCompleteSuggestionsPropTypes'; /** * 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 firing the onSelect callback. + * 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 auto-complete suggestions will not blur the main input. */ @@ -33,8 +33,6 @@ const AutoCompleteSuggestions = (props) => { }; AutoCompleteSuggestions.propTypes = propTypes; - -// AutoCompleteSuggestions.defaultProps = defaultProps; AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions'; export default AutoCompleteSuggestions; diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.js index 72fafc69b8da1..9332478a3cd98 100644 --- a/src/components/AutoCompleteSuggestions/index.native.js +++ b/src/components/AutoCompleteSuggestions/index.native.js @@ -8,8 +8,6 @@ const AutoCompleteSuggestions = props => ( ); AutoCompleteSuggestions.propTypes = propTypes; - -// AutoCompleteSuggestions.defaultProps = defaultProps; AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions'; export default AutoCompleteSuggestions; diff --git a/src/components/EmojiSuggestions.js b/src/components/EmojiSuggestions.js index 527bc73d2ce4f..9f5269efe846c 100644 --- a/src/components/EmojiSuggestions.js +++ b/src/components/EmojiSuggestions.js @@ -2,7 +2,6 @@ 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'; @@ -18,16 +17,20 @@ const propTypes = { /** Array of suggested emoji */ emojis: PropTypes.arrayOf(PropTypes.shape({ /** The emoji code */ - code: PropTypes.string, + code: PropTypes.string.isRequired, /** The name of the emoji */ - name: PropTypes.string, + 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 */ + /** Emoji prefix that follows the colon */ prefix: PropTypes.string.isRequired, /** Show that we can use large emoji picker. Depending on available space