Emoji ordering in emoji board (#2057)
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled

* feat: sort emojis inside emoji picker

* feat: sort autocomplete emojis

Fixes #1632

* fix: sort function after concat

* fix: sort result instead of searchList
This commit is contained in:
Marek Vospel 2024-12-22 11:41:02 +01:00 committed by GitHub
parent 35f0e400ad
commit b8d9c4bdd6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 8 deletions

View file

@ -57,14 +57,16 @@ export function EmoticonAutocomplete({
const searchList = useMemo(() => {
const list: Array<EmoticonSearchItem> = [];
return list.concat(
imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
emojis
);
return list
.concat(
imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
emojis
)
}, [imagePacks]);
const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
const autoCompleteEmoticon = result ? result.items : recentEmoji;
const autoCompleteEmoticon = (result ? result.items : recentEmoji)
.sort((a, b) => a.shortcode.localeCompare(b.shortcode));
useEffect(() => {
if (query.text) search(query.text);

View file

@ -468,7 +468,7 @@ export function SearchEmojiGroup({
return (
<EmojiGroup key={id} id={id} label={label}>
{tab === EmojiBoardTab.Emoji
? searchResult.map((emoji) =>
? searchResult.sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((emoji) =>
'unicode' in emoji ? (
<EmojiItem
key={emoji.unicode}
@ -523,7 +523,7 @@ export const CustomEmojiGroups = memo(
<>
{groups.map((pack) => (
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
{pack.getEmojis().map((image) => (
{pack.getEmojis().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
<EmojiItem
key={image.shortcode}
label={image.body || image.shortcode}
@ -566,7 +566,7 @@ export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: Matr
)}
{groups.map((pack) => (
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
{pack.getStickers().map((image) => (
{pack.getStickers().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
<StickerItem
key={image.shortcode}
label={image.body || image.shortcode}