Revert "Add virtual scrolling to emoji picker"

Use the newer one instead
This reverts commit 61fa33739d.

package.json

@@ -38,7 +38,6 @@
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.6.11",
-    "vue-virtual-scroller": "^1.1.2",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1"
   },

src/boot/after_store.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
 import App from '../App.vue'
-import VueVirtualScroller from 'vue-virtual-scroller'
 import { windowWidth } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@@ -378,18 +377,14 @@ const afterStoreSetup = async ({ store, i18n }) => {
     }
   })
 
-  let vue = new Vue({
+  /* eslint-disable no-new */
+  return new Vue({
     router,
     store,
     i18n,
     el: '#app',
     render: h => h(App)
   })
-
-  Vue.use(VueVirtualScroller)
-
-  /* eslint-disable no-new */
-  return vue
 }
 
 export default afterStoreSetup

src/components/emoji_picker/emoji_picker.js

@@ -38,11 +38,7 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiBufferSlice: LOAD_EMOJI_BY,
       customEmojiTimeout: null,
-      customEmojiLoadAllConfirmed: false,
-      groupRefs: {},
-      emojiRefs: {},
-      filteredEmojiGroups: [],
-      width: 0
+      customEmojiLoadAllConfirmed: false
     }
   },
   components: {
@@ -60,18 +56,16 @@ const EmojiPicker = {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
     },
-    onScroll(startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
-      const target = this.$refs[ 'emoji-groups' ].$el
-      this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
+    onScroll (e) {
+      const target = (e && e.target) || this.$refs['emoji-groups']
+      this.updateScrolledClass(target)
+      this.scrolledGroup(target)
+      this.triggerLoadMore(target)
     },
     onWheel (e) {
       e.preventDefault()
       this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
     },
-    setGroupRef(name) {
-      return el => { this.groupRefs[ name ] = el }
-    },
-
     highlight (key) {
       this.setShowStickers(false)
       this.activeGroup = key
@@ -104,46 +98,17 @@ const EmojiPicker = {
         this.loadEmoji()
       }
     },
-    scrolledGroup(target, start, end) {
+    scrolledGroup (target) {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.emojiItems.slice(start, end + 1).forEach(group => {
-          const headerId = toHeaderId(group.id)
-          const ref = this.groupRefs[ 'group-' + group.id ]
-          if (!ref) { return }
-          const elem = ref.$el.parentElement
-          if (!elem) { return }
-          if (elem && getOffset(elem) <= top) {
-            this.activeGroup = headerId
+        this.emojisView.forEach(group => {
+          const ref = this.$refs['group-' + group.id]
+          if (ref.offsetTop <= top) {
+            this.activeGroup = group.id
           }
         })
       })
     },
-    onShowing() {
-      const oldContentLoaded = this.contentLoaded
-      this.recalculateItemPerRow()
-      this.$nextTick(() => {
-        this.$refs.search.focus()
-      })
-      this.contentLoaded = true
-      this.filteredEmojiGroups = this.getFilteredEmojiGroups()
-      if (!oldContentLoaded) {
-        this.$nextTick(() => {
-          if (this.defaultGroup) {
-            this.highlight(this.defaultGroup)
-          }
-        })
-      }
-    },
-    getFilteredEmojiGroups() {
-      return this.allEmojiGroups
-        .map(group => ({
-          ...group,
-          emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
-        }))
-        .filter(group => group.emojis.length > 0)
-    },
-
     loadEmoji () {
       const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
 
@@ -189,18 +154,6 @@ const EmojiPicker = {
     }
   },
   computed: {
-    minItemSize() {
-      return this.emojiHeight
-    },
-    emojiHeight() {
-      return 32 + 4
-    },
-    emojiWidth() {
-      return 32 + 4
-    },
-    itemPerRow() {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
-    },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
     },
@@ -242,17 +195,6 @@ const EmojiPicker = {
         }
       ].concat(emojiPacks)
     },
-    emojiItems () {
-      return this.filteredEmojiGroups.map(group =>
-        chunk(group.emojis, this.itemPerRow)
-          .map((items, index) => ({
-            ...group,
-            id: index === 0 ? group.id : `row-${index}-${group.id}`,
-            emojis: items,
-            isFirstRow: index === 0
-          })))
-        .reduce((a, c) => a.concat(c), [])
-    },
     sortedEmoji () {
       const customEmojis = this.$store.state.instance.customEmoji || []
       const sortedEmojiGroups = new Map()

src/components/emoji_picker/emoji_picker.vue

@@ -8,7 +8,6 @@
       >
         <span
           v-for="group in emojis"
-          :ref="setGroupRef('group-' + group.id)"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -52,52 +51,39 @@
             @input="$event.target.composing = false"
           >
         </div>
-        <DynamicScroller
+        <div
           ref="emoji-groups"
           class="emoji-groups"
           :class="groupsScrolledClass"
-          :items="emojisView"
-          :min-item-size="minItemSize"
-          :emit-update="true"
           @scroll="onScroll"
         >
-          <template #default="{ item: group, index, active }">
-            <DynamicScrollerItem
-              :ref="setGroupRef('group-' + group.id)"
-              :item="group"
-              :active="active"
-              :data-index="index"
-              :size-dependencies="[group.emojis.length]"
+          <div
+            v-for="group in emojisView"
+            :key="group.id"
+            class="emoji-group"
+          >
+            <h6
+              :ref="'group-' + group.id"
+              class="emoji-group-title"
             >
-              <div
-                class="emoji-group"
+              {{ group.text }}
+            </h6>
+            <span
+              v-for="emoji in group.emojis"
+              :key="group.id + emoji.displayText"
+              :title="emoji.displayText"
+              class="emoji-item"
+              @click.stop.prevent="onEmoji(emoji)"
+            >
+              <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
+              <img
+                v-else
+                :src="emoji.imageUrl"
               >
-                <h6
-                  class="emoji-group-title"
-                >
-                  {{ group.text }}
-                </h6>
-                <span
-                  v-for="emoji in group.emojis"
-                  :key="group.id + emoji.displayText"
-                  :title="emoji.displayText"
-                  class="emoji-item"
-                  @click.stop.prevent="onEmoji(emoji)"
-                >
-                  <span
-                    v-if="!emoji.imageUrl"
-                  >{{ emoji.replacement }}</span>
-                  <img
-                    v-else
-                    :src="emoji.imageUrl"
-                    loading="lazy"
-                  >
-                </span>
-                <span :ref="'group-end-' + group.id" />
-              </div>
-            </DynamicScrollerItem>
-          </template>
-        </DynamicScroller>
+            </span>
+            <span :ref="'group-end-' + group.id" />
+          </div>
+        </div>
         <div class="keep-open">
           <Checkbox v-model="keepOpen">
             {{ $t('emoji.keep_open') }}

yarn.lock

@@ -357,7 +357,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.18.10, @babel/parser@npm:^7.20.5":
+"@babel/parser@npm:^7.18.10, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.5":
   version: 7.20.5
   resolution: "@babel/parser@npm:7.20.5"
   bin:
@@ -366,15 +366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.13, @babel/parser@npm:^7.7.0":
-  version: 7.20.13
-  resolution: "@babel/parser@npm:7.20.13"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 01991ec7420dbdbf323067addd205690e7e599b1ed2c5fd0b6c2a0703b2dde4819828a5dce76e60efc07340470d8471b4122daa711536c44fa2ae0b9bd8a5732
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -1273,16 +1264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.7.6":
-  version: 7.20.13
-  resolution: "@babel/runtime@npm:7.20.13"
-  dependencies:
-    regenerator-runtime: "npm:^0.13.11"
-  checksum: 0e09b4915318248aeeccdf6dc6a8ccdeedbe4b7187fa4159eaa569c4a407c36f3b8689296296b25246671987efe2253dd6e3bab63a40deedcdbd49b8845204e6
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4":
   version: 7.20.6
   resolution: "@babel/runtime@npm:7.20.6"
   dependencies:
@@ -1395,12 +1377,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@fortawesome/fontawesome-common-types@npm:0.3.0"
+  checksum: b59fe576d0b45c41e5266ef6cf2ad6eb46f30eb0cd8de87fb4909a40219650ac94b333c2396ccd1674c8e6d4b53700d9a8bc443dea59f320563e29de6e433109
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-svg-core@npm:^1.2.32":
-  version: 1.2.36
-  resolution: "@fortawesome/fontawesome-svg-core@npm:1.2.36"
+  version: 1.3.0
+  resolution: "@fortawesome/fontawesome-svg-core@npm:1.3.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:^0.2.36"
-  checksum: 2ae3d765cb10321ce3ddc205895c0436d140f9201eddc7ea4e445c14077d8844ffbd7579bb868d45abb13b44f3158a8ebeb14e94b955fb64853ef6db6ecfadb9
+    "@fortawesome/fontawesome-common-types": "npm:^0.3.0"
+  checksum: 5530e1ede3fd4f9249e2995e33a4a90de3bb7842650853b41c9c788b9f4e40872f97d9ea7d1b085e7356c400691fe24a5dd2944e03c1b22c1118699be9837fa4
   languageName: node
   linkType: hard
 
@@ -1423,12 +1412,12 @@ __metadata:
   linkType: hard
 
 "@fortawesome/vue-fontawesome@npm:^2.0.0":
-  version: 2.0.10
-  resolution: "@fortawesome/vue-fontawesome@npm:2.0.10"
+  version: 2.0.9
+  resolution: "@fortawesome/vue-fontawesome@npm:2.0.9"
   peerDependencies:
     "@fortawesome/fontawesome-svg-core": ~1 || ~6
     vue: ~2
-  checksum: e2acd05d769393cf787cee8d7b234372311d519185364add60362df7e4dab831fc2127ccaa1b632c41c65b027f0dbd028ee703588f0ac0b6b0af046a977e3c9f
+  checksum: 2690b2d993fb0925855491d11fda515e58e13aeb76ae04e13c63a96126c53a6452c1995421e07a735ee0fef19f09edeb9f0b2cc8e563a3e3f3437294fcfd5bcc
   languageName: node
   linkType: hard
 
@@ -10815,7 +10804,6 @@ __metadata:
     vue-router: "npm:^3.0.1"
     vue-style-loader: "npm:^4.0.0"
     vue-template-compiler: "npm:^2.6.11"
-    vue-virtual-scroller: "npm:^1.1.2"
     vuelidate: "npm:^0.7.4"
     vuex: "npm:^3.0.1"
     webpack: "npm:^4.44.0"
@@ -11360,13 +11348,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.14":
-  version: 8.4.21
-  resolution: "postcss@npm:8.4.21"
+  version: 8.4.19
+  resolution: "postcss@npm:8.4.19"
   dependencies:
     nanoid: "npm:^3.3.4"
     picocolors: "npm:^1.0.0"
     source-map-js: "npm:^1.0.2"
-  checksum: 4fb944abed714e5aa88c76b6eae19b293e84ced7ea4162fe0da6ab5215ded572330df93ce3bb5073ee18a9ad0122a6a65e3000897dc3a828e96281d8b3e1f91e
+  checksum: 583897de1f1b39bed59fecfd2697e34195d6f2f85710572a8f060a14898102e13b0a74a96fd5490b2f8bdc6ed51ae43169a5a24f37684606f7c8272221b5d111
   languageName: node
   linkType: hard
 
@@ -11580,9 +11568,9 @@ __metadata:
   linkType: hard
 
 "punycode.js@npm:^2.1.0":
-  version: 2.3.0
-  resolution: "punycode.js@npm:2.3.0"
-  checksum: cee463755965bbaccc822208288da86fb1e5728aa17b25b5da98f099178ff1774c242eec65a0e03ecf00690cae3d340274c190fcf8e422c481146e0036813c41
+  version: 2.1.0
+  resolution: "punycode.js@npm:2.1.0"
+  checksum: 52a45b30cc2ed64ef379f7d989889edbb1dda2f3fa6b47d3cda50d46216a462f37dd2640398549ebde03211f1587937670e532f10debaef5b14bfd66faf9a1d0
   languageName: node
   linkType: hard
 
@@ -12470,13 +12458,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scrollparent@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "scrollparent@npm:2.0.1"
-  checksum: b8be0b508e4a1755dd3452fb7925e587c1e34d8e7b9de731c7447400caba80820ffcab3e774dcbee35438486933e2791f3cb7b50fd4f8c02ca9ff280c3f50227
-  languageName: node
-  linkType: hard
-
 "selenium-server@npm:2.53.1":
   version: 2.53.1
   resolution: "selenium-server@npm:2.53.1"
@@ -14378,22 +14359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-observe-visibility@npm:^0.4.4":
-  version: 0.4.6
-  resolution: "vue-observe-visibility@npm:0.4.6"
-  checksum: f50bc3816684b27af511b1d5f68959b6d4c822cd4d569e46918131460a51d34be55bd25269b630171557edd19d613c5fca730ee8ad123af281c43be4cd39f3cf
-  languageName: node
-  linkType: hard
-
-"vue-resize@npm:^0.4.5":
-  version: 0.4.5
-  resolution: "vue-resize@npm:0.4.5"
-  peerDependencies:
-    vue: ^2.3.0
-  checksum: 53bd89f8b2c1f0a7a3a41835bc52c9a2783029738c708502faf262305336a13b971d8fbf06ea94f12fb38a7b08852f90f4a8e07e0c9e15924017df2fde680fc0
-  languageName: node
-  linkType: hard
-
 "vue-router@npm:^3.0.1":
   version: 3.6.5
   resolution: "vue-router@npm:3.6.5"
@@ -14428,19 +14393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-virtual-scroller@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "vue-virtual-scroller@npm:1.1.2"
-  dependencies:
-    scrollparent: "npm:^2.0.1"
-    vue-observe-visibility: "npm:^0.4.4"
-    vue-resize: "npm:^0.4.5"
-  peerDependencies:
-    vue: ^2.6.11
-  checksum: 2b9a5c871e078adbf0f5717fa22085c56d8f52020fd56d4a4071de89e355f2eb8c5b2d2a27d9c70ca143e0bccb37452b85a8488096dc45ca0075aad06051715f
-  languageName: node
-  linkType: hard
-
 "vue@npm:^2.7.14":
   version: 2.7.14
   resolution: "vue@npm:2.7.14"