From d60002cdd2de2ae8ffed10b5dbc4cbfd135f466e Mon Sep 17 00:00:00 2001 From: Pujan Date: Thu, 22 Dec 2022 06:58:46 +0530 Subject: [PATCH 1/4] emoji picker menu height changes to display it properly and taking advantage of flatlist getItemLayout for fixed height optimization --- src/CONST.js | 6 +++--- src/components/EmojiPicker/EmojiPickerMenu/index.js | 3 +++ src/styles/styles.js | 6 ++++-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 58df088ffc19..ef02585f6aed 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -496,11 +496,11 @@ const CONST = { ADD_PAYMENT_MENU_POSITION_X: 356, EMOJI_PICKER_SIZE: { WIDTH: 320, - HEIGHT: 400, + HEIGHT: 390, }, - NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 298, + NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 288, EMOJI_PICKER_ITEM_HEIGHT: 32, - EMOJI_PICKER_HEADER_HEIGHT: 38, + EMOJI_PICKER_HEADER_HEIGHT: 32, COMPOSER_MAX_HEIGHT: 125, CHAT_FOOTER_MIN_HEIGHT: 65, CHAT_SKELETON_VIEW: { diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index ab68b51802c1..7c7d5fd16ad6 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -513,6 +513,9 @@ class EmojiPickerMenu extends Component { } stickyHeaderIndices={this.state.headerIndices} onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y} + getItemLayout={(data, index) => ( + {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index} + )} /> )} Date: Thu, 22 Dec 2022 09:58:44 +0530 Subject: [PATCH 2/4] getItemLayout function added --- .../EmojiPicker/EmojiPickerMenu/index.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 7c7d5fd16ad6..c5f7d991a23f 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -87,6 +87,7 @@ class EmojiPickerMenu extends Component { this.onSelectionChange = this.onSelectionChange.bind(this); this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this); this.setFirstNonHeaderIndex = this.setFirstNonHeaderIndex.bind(this); + this.getItemLayout = this.getItemLayout.bind(this); this.currentScrollOffset = 0; this.firstNonHeaderIndex = 0; @@ -414,6 +415,15 @@ class EmojiPickerMenu extends Component { User.updatePreferredSkinTone(skinTone); } + /** + * @param {*} data + * @param {Number} index + * @returns {Object} + */ + getItemLayout(data, index) { + return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}; + } + /** * Given an emoji item object, render a component based on its type. * Items with the code "SPACER" return nothing and are used to fill rows up to 8 @@ -513,9 +523,7 @@ class EmojiPickerMenu extends Component { } stickyHeaderIndices={this.state.headerIndices} onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y} - getItemLayout={(data, index) => ( - {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index} - )} + getItemLayout={this.getItemLayout} /> )} Date: Thu, 22 Dec 2022 10:06:19 +0530 Subject: [PATCH 3/4] lint fix --- .../EmojiPicker/EmojiPickerMenu/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index c5f7d991a23f..e4f9fbbf6821 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -191,6 +191,15 @@ class EmojiPickerMenu extends Component { document.addEventListener('mousemove', this.mouseMoveHandler); } + /** + * @param {*} data + * @param {Number} index + * @returns {Object} + */ + getItemLayout(data, index) { + return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}; + } + /** * Cleanup all mouse/keydown event listeners that we've set up */ @@ -415,15 +424,6 @@ class EmojiPickerMenu extends Component { User.updatePreferredSkinTone(skinTone); } - /** - * @param {*} data - * @param {Number} index - * @returns {Object} - */ - getItemLayout(data, index) { - return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}; - } - /** * Given an emoji item object, render a component based on its type. * Items with the code "SPACER" return nothing and are used to fill rows up to 8 From ffd02011cc04f5640145d66f52c17d2e56c25c10 Mon Sep 17 00:00:00 2001 From: Pujan Date: Fri, 23 Dec 2022 07:47:09 +0530 Subject: [PATCH 4/4] comment added --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index e4f9fbbf6821..87e3356b7c72 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -192,8 +192,13 @@ class EmojiPickerMenu extends Component { } /** - * @param {*} data - * @param {Number} index + * This function will be used with FlatList getItemLayout property for optimization purpose that allows skipping + * the measurement of dynamic content if we know the size (height or width) of items ahead of time. + * Generate and return an object with properties length(height of each individual row), + * offset(distance of the current row from the top of the FlatList), index(current row index) + * + * @param {*} data FlatList item + * @param {Number} index row index * @returns {Object} */ getItemLayout(data, index) {