<keep-alive> support

Author: IvanSafonov

src/listscroller.vue

@@ -156,6 +156,7 @@ export default {
      * Updates average items' height and corrects spacerMargin
      */
     onItemsResize(entities) {
+      if (this.isDeactivated) return
       let { average } = this
       average *= this.heights.size
       let changed = false
@@ -212,8 +213,7 @@ export default {
       const count = Math.round(
         this.renderViewports * Math.ceil(window.innerHeight / this.average),
       )
-      const prevStart = this.start
-      const prevEnd = this.end
+      const { start: prevStart, end: prevEnd } = this
       this.start = Math.max(index, 0)
       this.end = Math.min(this.start + count, this.itemsData.length)
       if (prevStart === this.start && prevEnd === this.end) return
@@ -302,5 +302,13 @@ export default {
   beforeDestroy() {
     this.observer.disconnect()
   },
+
+  activated() {
+    this.isDeactivated = false
+  },
+
+  deactivated() {
+    this.isDeactivated = true
+  },
 }
 </script>

src/mixins.js

@@ -15,16 +15,24 @@ const throttled = function (handler, timeout) {
 
 export const event = (event, { target, throttle } = {}) => {
   const funcName = `_${event}Handler`
+  const deactivatedName = `_${event}Deactivated`
   if (!target) target = window
   return {
     mounted() {
-      const handler = throttled(this[event + 'Handler'], throttle)
-      this[funcName] = handler
-      target.addEventListener(event, handler)
+      this[funcName] = throttled(this[event + 'Handler'], throttle)
+      target.addEventListener(event, this[funcName])
     },
     destroyed() {
-      const handler = this[funcName]
-      target.removeEventListener(event, handler)
+      target.removeEventListener(event, this[funcName])
+    },
+    activated() {
+      if (!this[deactivatedName]) return
+      target.addEventListener(event, this[funcName])
+      this[deactivatedName] = false
+    },
+    deactivated() {
+      target.removeEventListener(event, this[funcName])
+      this[deactivatedName] = true
     },
   }
 }

tests/__snapshots__/listscroller.test.js.snap

@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListScroller component inside keep-alive ignores resize observer while deactivated 1`] = `
+<div
+  style="height: 0px; position: relative; overflow: hidden;"
+>
+  <div
+    style="transform: translateY(0px);"
+  >
+    <div
+      data-item-index="0"
+    >
+      0 0
+    </div>
+    <div
+      data-item-index="1"
+    >
+      1 1
+    </div>
+    <div
+      data-item-index="2"
+    >
+      2 2
+    </div>
+    <div
+      data-item-index="3"
+    >
+      3 3
+    </div>
+    <div
+      data-item-index="4"
+    >
+      4 4
+    </div>
+    <div
+      data-item-index="5"
+    >
+      5 5
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ListScroller component with 1000 items corrects spacer margin on scrolling up 1`] = `
 <div
   style="height: 20000px; position: relative; overflow: hidden;"
@@ -254,7 +295,7 @@ exports[`ListScroller component with 1000 items renders first items according to
 </div>
 `;
 
-exports[`ListScroller component with 1000 items updates if itemesData changed 1`] = `
+exports[`ListScroller component with 1000 items updates if itemsData changed 1`] = `
 <div
   style="height: 2000px; position: relative; overflow: hidden;"
 >

tests/listscroller.test.js

@@ -4,6 +4,7 @@ import Item from './item'
 import ResizeObserver from './resizeobserver'
 jest.mock('./resizeobserver')
 import { cloneDeep } from 'lodash'
+import Vue from 'vue'
 
 const updateSizes = (expectedItems, clear = true) => {
   expect(ResizeObserver).toBeCalledTimes(1)
@@ -362,7 +363,7 @@ describe('ListScroller component', () => {
       expect(wrapper.emitted('bottom').length).toBe(1)
     })
 
-    it('updates if itemesData changed', async () => {
+    it('updates if itemsData changed', async () => {
       wrapper.setProps({ itemsData: itemsData.slice(0, 100) })
       jest.runAllTimers()
       updateSizes(12)
@@ -425,6 +426,62 @@ describe('ListScroller component', () => {
     })
   })
 
+  describe('inside keep-alive', () => {
+    let wrapper
+    beforeEach(() => {
+      height = 30
+      const keepAlive = Vue.component('test', {
+        components: { ScrollerMock },
+        template: `
+        <keep-alive>
+          <ScrollerMock v-if="show" :itemHeight="40" :itemsData="data" :itemComponent="item" />
+        </keep-alive>
+        `,
+        data() {
+          return { item: Item, data: itemsData }
+        },
+        props: { show: { type: Boolean, default: true } },
+      })
+      wrapper = mount(keepAlive)
+    })
+
+    it('removes event listeners while deactivated', async () => {
+      expect(window.addEventListener).toBeCalledTimes(2)
+      const scroll = window.addEventListener.mock.calls[0][1]
+      const resize = window.addEventListener.mock.calls[1][1]
+      expect(window.addEventListener).toBeCalledWith('scroll', scroll)
+      expect(window.addEventListener).toBeCalledWith('resize', resize)
+
+      // deactivating
+      wrapper.setProps({ show: false })
+      await wrapper.vm.$nextTick()
+      expect(window.removeEventListener).toBeCalledTimes(2)
+      expect(window.removeEventListener).toBeCalledWith('scroll', scroll)
+      expect(window.removeEventListener).toBeCalledWith('resize', resize)
+
+      // activating
+      window.addEventListener.mockClear()
+      wrapper.setProps({ show: true })
+      await wrapper.vm.$nextTick()
+      expect(window.addEventListener).toBeCalledTimes(2)
+      expect(window.addEventListener).toBeCalledWith('scroll', scroll)
+      expect(window.addEventListener).toBeCalledWith('resize', resize)
+    })
+
+    it('ignores resize observer while deactivated', async () => {
+      wrapper.setProps({ show: false })
+      await wrapper.vm.$nextTick()
+
+      height = 10
+      updateSizes(6)
+      await wrapper.vm.$nextTick()
+
+      wrapper.setProps({ show: true })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.element).toMatchSnapshot()
+    })
+  })
+
   it('gets item height from dom', () => {
     const wrapper = mount(ListScroller, {
       propsData: {