Sort short/exact emoji matches before longer incomplete matches (#10212)

* apply sort for exact match

* add tests for emoji provider

* apply filter in the emoji picker

* add tests

* revert cypress version

* put correct copyright

* fix eslint

* fix eslint

* add type

* fix cypress test

* fix tsc types issues

* add forgotten space...

---------

Co-authored-by: grimhilt <grimhilt@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
This commit is contained in:
grimhilt 2023-02-27 18:09:15 +01:00 committed by GitHub
parent b9f61da7e6
commit 0546a11fd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 17 deletions

View file

@ -194,10 +194,30 @@ class EmojiPicker extends React.Component<IProps, IState> {
emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
}
emojis = emojis.filter((emoji) => this.emojiMatchesFilter(emoji, lcFilter));
emojis = emojis.sort((a, b) => {
const indexA = a.shortcodes[0].indexOf(lcFilter);
const indexB = b.shortcodes[0].indexOf(lcFilter);
// Prioritize emojis containing the filter in its shortcode
if (indexA == -1 || indexB == -1) {
return indexB - indexA;
}
// If both emojis start with the filter
// put the shorter emoji first
if (indexA == 0 && indexB == 0) {
return a.shortcodes[0].length - b.shortcodes[0].length;
}
// Prioritize emojis starting with the filter
return indexA - indexB;
});
this.memoizedDataByCategory[cat.id] = emojis;
cat.enabled = emojis.length > 0;
// The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
cat.ref.current.disabled = !cat.enabled;
if (cat.ref.current) {
cat.ref.current.disabled = !cat.enabled;
}
}
this.setState({ filter });
// Header underlines need to be updated, but updating requires knowing