OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix EmojiPicker filtering to lower case emojibase data strings

pull/21833/head
Michael Telatynski 2021-08-31 17:36:10 +01:00
parent e0363ddee5
commit e089c34db7
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/views/emojipicker/EmojiPicker.tsx
View File

@ -173,16 +173,16 @@ class EmojiPicker extends React.Component<IProps, IState> {
}; };
private onChangeFilter = (filter: string) => { private onChangeFilter = (filter: string) => {
filter = filter.toLowerCase(); // filter is case insensitive stored lower-case const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
for (const cat of this.categories) { for (const cat of this.categories) {
let emojis; let emojis;
// If the new filter string includes the old filter string, we don't have to re-filter the whole dataset. // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
if (filter.includes(this.state.filter)) { if (lcFilter.includes(this.state.filter)) {
emojis = this.memoizedDataByCategory[cat.id]; emojis = this.memoizedDataByCategory[cat.id];
} else { } else {
emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id]; emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
} }
emojis = emojis.filter(emoji => this.emojiMatchesFilter(emoji, filter)); emojis = emojis.filter(emoji => this.emojiMatchesFilter(emoji, lcFilter));
this.memoizedDataByCategory[cat.id] = emojis; this.memoizedDataByCategory[cat.id] = emojis;
cat.enabled = emojis.length > 0; cat.enabled = emojis.length > 0;
// The setState below doesn't re-render the header and we already have the refs for updateVisibility, so... // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
@ -194,9 +194,12 @@ class EmojiPicker extends React.Component<IProps, IState> {
setTimeout(this.updateVisibility, 0); setTimeout(this.updateVisibility, 0);
}; };
private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => {
[emoji.annotation, ...emoji.shortcodes, emoji.emoticon, ...emoji.unicode.split(ZERO_WIDTH_JOINER)] return emoji.annotation.toLowerCase().includes(filter) ||
.some(x => x?.includes(filter)); emoji.emoticon?.toLowerCase().includes(filter) ||
emoji.shortcodes.some(x => x.toLowerCase().includes(filter)) ||
emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter);
};
private onEnterFilter = () => { private onEnterFilter = () => {
const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item"); const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");