hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use virtual scrolling for emoji picker

Browse source
This commit is contained in:
tusooa 2022-12-24 13:48:36 -05:00
commit afd7f5fabe
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
6 changed files with 83 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/emoji_picker/emoji_picker.vue
View file

@ -13,7 +13,7 @@
class="emoji-tabs"
>
<span
v-for="group in filteredEmojiGroups"
v-for="(group, index) in filteredEmojiGroups"
:ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
class="emoji-tabs-item"
@ -21,7 +21,7 @@
active: activeGroupView === group.id
}"
:title="group.text"
@click.prevent="highlight(group.id)"
@click.prevent="highlight(index)"
>
<span
v-if="group.image"
@ -74,45 +74,52 @@
@input="$event.target.composing = false"
>
</div>
<div
<DynamicScroller
ref="emoji-groups"
class="emoji-groups"
:class="groupsScrolledClass"
@scroll="onScroll"
:min-item-size="minItemSize"
:items="filteredEmojiGroups"
@update="onScroll"
>
<div
v-for="group in filteredEmojiGroups"
:key="group.id"
class="emoji-group"
>
<h6
:ref="setGroupRef('group-' + group.id)"
class="emoji-group-title"
<template #default="{ item: group, index, active }">
<DynamicScrollerItem
:item="group"
:active="active"
:data-index="index"
:size-dependencies="[group.emojis.length]"
>
{{ group.text }}
</h6>
<span
v-for="emoji in group.emojis"
:key="group.id + emoji.displayText"
:title="maybeLocalizedEmojiName(emoji)"
class="emoji-item"
@click.stop.prevent="onEmoji(emoji)"
>
<span
v-if="!emoji.imageUrl"
class="emoji-picker-emoji -unicode"
>{{ emoji.replacement }}</span>
<still-image
v-else
class="emoji-picker-emoji -custom"
loading="lazy"
:src="emoji.imageUrl"
:data-emoji-name="group.id + emoji.displayText"
/>
</span>
<span :ref="setGroupRef('group-end-' + group.id)" />
</div>
</div>
<div
class="emoji-group"
>
<h6
class="emoji-group-title"
>
{{ group.text }}
</h6>
<span
v-for="emoji in group.emojis"
:key="group.id + emoji.displayText"
:title="maybeLocalizedEmojiName(emoji)"
class="emoji-item"
@click.stop.prevent="onEmoji(emoji)"
>
<span
v-if="!emoji.imageUrl"
class="emoji-picker-emoji -unicode"
>{{ emoji.replacement }}</span>
<still-image
v-else
class="emoji-picker-emoji -custom"
loading="lazy"
:src="emoji.imageUrl"
:data-emoji-name="group.id + emoji.displayText"
/>
</span>
</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>
<div class="keep-open">
<Checkbox v-model="keepOpen">
{{ $t('emoji.keep_open') }}