imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply code review suggestions

Browse source 
including filling in gaps in emoji shortcode coverage.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-07-19 15:09:15 -04:00
parent c1ed023e17
commit f8a922eaa1
5 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/emojipicker/EmojiPicker.tsx
View file

@ -32,6 +32,8 @@ export const CATEGORY_HEADER_HEIGHT = 22;
export const EMOJI_HEIGHT = 37;
export const EMOJIS_PER_ROW = 8;
const ZERO_WIDTH_JOINER = "\u200D";
interface IProps {
selectedEmojis?: Set<string>;
showQuickReactions?: boolean;
@ -180,7 +182,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
} else {
emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
}
emojis = emojis.filter(emoji => emoji.filterString.includes(filter));
emojis = emojis.filter(emoji => this.emojiMatchesFilter(emoji, filter));
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...
@ -192,6 +194,10 @@ class EmojiPicker extends React.Component<IProps, IState> {
setTimeout(this.updateVisibility, 0);
};
private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean =>
[emoji.annotation, ...emoji.shortcodes, emoji.emoticon, ...emoji.unicode.split(ZERO_WIDTH_JOINER)]
.some(x => x?.includes(filter));
private onEnterFilter = () => {
const btn = this.bodyRef.current.querySelector<HTMLButtonElement>(".mx_EmojiPicker_item");
if (btn) {

6
src/components/views/emojipicker/Preview.tsx
View file

@ -38,9 +38,9 @@ class Preview extends React.PureComponent<IProps> {
<div className="mx_EmojiPicker_name mx_EmojiPicker_preview_name">
{annotation}
</div>
{ shortcode ?
<div className="mx_EmojiPicker_shortcode">{shortcode}</div> :
null }
<div className="mx_EmojiPicker_shortcode">
{shortcode}
</div>
</div>
</div>
);

5
src/components/views/emojipicker/QuickReactions.tsx
View file

@ -62,7 +62,6 @@ class QuickReactions extends React.Component<IProps, IState> {
};
render() {
const shortcode = this.state.hover?.shortcodes?.[0];
return (
<section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
<h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
@ -70,9 +69,7 @@ class QuickReactions extends React.Component<IProps, IState> {
? _t("Quick Reactions")
: <React.Fragment>
<span className="mx_EmojiPicker_name">{this.state.hover.annotation}</span>
{ shortcode ?
<span className="mx_EmojiPicker_shortcode">{shortcode}</span> :
null }
<span className="mx_EmojiPicker_shortcode">{this.state.hover.shortcodes[0]}</span>
</React.Fragment>
}
</h2>