Skip to content

Prevent emoji Picker list jumping while scrolling through arrow keys #13787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gonals merged 4 commits into from
Dec 28, 2022
Merged

Prevent emoji Picker list jumping while scrolling through arrow keys #13787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d60002c
emoji picker menu height changes to display it properly and taking ad…
Pujan92 Dec 22, 2022
3e7db85
getItemLayout function added
Pujan92 Dec 22, 2022
733adc3
lint fix
Pujan92 Dec 22, 2022
ffd0201
comment added
Pujan92 Dec 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/CONST.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
16 changes: 16 additions & 0 deletions src/components/EmojiPicker/EmojiPickerMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -190,6 +191,20 @@ class EmojiPickerMenu extends Component {
document.addEventListener('mousemove', this.mouseMoveHandler);
}

/**
* 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) {
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
*/
Expand Down Expand Up @@ -513,6 +528,7 @@ class EmojiPickerMenu extends Component {
}
stickyHeaderIndices={this.state.headerIndices}
onScroll={e => this.currentScrollOffset = e.nativeEvent.contentOffset.y}
getItemLayout={this.getItemLayout}
/>
)}
<EmojiSkinToneList
Expand Down
6 changes: 4 additions & 2 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1444,7 +1444,7 @@ const styles = {
},

emojiPickerList: {
height: 300,
height: 288,
width: '100%',
...spacing.ph4,
},
Expand All @@ -1455,7 +1455,9 @@ const styles = {
emojiHeaderStyle: {
backgroundColor: themeColors.componentBG,
width: '100%',
...spacing.pv3,
height: 32,
display: 'flex',
alignItems: 'center',
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: themeColors.heading,
Expand Down