Calculate display count from width

This commit is contained in:
tusooa 2023-01-02 13:42:09 -05:00
parent 6cc3b239f6
commit 081a416103
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 16 additions and 3 deletions

View File

@ -112,7 +112,8 @@ const EmojiPicker = {
contentLoaded: false, contentLoaded: false,
groupRefs: {}, groupRefs: {},
emojiRefs: {}, emojiRefs: {},
filteredEmojiGroups: [] filteredEmojiGroups: [],
width: 0
} }
}, },
components: { components: {
@ -155,7 +156,6 @@ const EmojiPicker = {
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
}, },
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) { onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
const target = this.$refs['emoji-groups'].$el const target = this.$refs['emoji-groups'].$el
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex) this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
}, },
@ -221,6 +221,7 @@ const EmojiPicker = {
}, },
onShowing () { onShowing () {
const oldContentLoaded = this.contentLoaded const oldContentLoaded = this.contentLoaded
this.recalculateItemPerRow()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.search.focus() this.$refs.search.focus()
}) })
@ -241,6 +242,14 @@ const EmojiPicker = {
emojis: this.filterByKeyword(group.emojis, trim(this.keyword)) emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
})) }))
.filter(group => group.emojis.length > 0) .filter(group => group.emojis.length > 0)
},
recalculateItemPerRow () {
this.$nextTick(() => {
if (!this.$refs['emoji-groups']) {
return
}
this.width = this.$refs['emoji-groups'].$el.offsetWidth
})
} }
}, },
watch: { watch: {
@ -252,6 +261,9 @@ const EmojiPicker = {
this.filteredEmojiGroups = this.getFilteredEmojiGroups() this.filteredEmojiGroups = this.getFilteredEmojiGroups()
} }
}, },
mounted () {
this.recalculateItemPerRow()
},
computed: { computed: {
minItemSize () { minItemSize () {
return this.emojiHeight return this.emojiHeight
@ -263,7 +275,7 @@ const EmojiPicker = {
return 32 + 4 return 32 + 4
}, },
itemPerRow () { itemPerRow () {
return 6 return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
}, },
activeGroupView () { activeGroupView () {
return this.showingStickers ? '' : this.activeGroup return this.showingStickers ? '' : this.activeGroup

View File

@ -82,6 +82,7 @@
:items="emojiItems" :items="emojiItems"
:emit-update="true" :emit-update="true"
@update="onScroll" @update="onScroll"
@visible="recalculateItemPerRow"
> >
<template #default="{ item: group, index, active }"> <template #default="{ item: group, index, active }">
<DynamicScrollerItem <DynamicScrollerItem