tools/winscope/libs/virtualList/VirtualList.js - platform/development - Git at Google

 import Vue from 'vue'
 import Virtual from './virtual'
 import { Item, Slot } from './Item'
 import { VirtualProps } from './props'

 const EVENT_TYPE = {
   ITEM: 'item_resize',
   SLOT: 'slot_resize'
 }
 const SLOT_TYPE = {
   HEADER: 'header', // string value also use for aria role attribute
   FOOTER: 'footer'
 }

 const VirtualList = Vue.component('virtual-list', {
   props: VirtualProps,

   data() {
     return {
       range: null
     }
   },

   watch: {
     'dataSources.length'() {
       this.virtual.updateParam('uniqueIds', this.getUniqueIdFromDataSources())
       this.virtual.handleDataSourcesChange()
     },

     start(newValue) {
       this.scrollToIndex(newValue)
     },

     offset(newValue) {
       this.scrollToOffset(newValue)
     }
   },

   created() {
     this.isHorizontal = this.direction === 'horizontal'
     this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop'

     this.installVirtual()

     // listen item size change
     this.$on(EVENT_TYPE.ITEM, this.onItemResized)

     // listen slot size change
     if (this.$slots.header || this.$slots.footer) {
       this.$on(EVENT_TYPE.SLOT, this.onSlotResized)
     }
   },

   // set back offset when awake from keep-alive
   activated() {
     this.scrollToOffset(this.virtual.offset)
   },

   mounted() {
     // set position
     if (this.start) {
       this.scrollToIndex(this.start)
     } else if (this.offset) {
       this.scrollToOffset(this.offset)
     }

     // in page mode we bind scroll event to document
     if (this.pageMode) {
       this.updatePageModeFront()

       document.addEventListener('scroll', this.onScroll, {
         passive: false
       })
     }
   },

   beforeDestroy() {
     this.virtual.destroy()
     if (this.pageMode) {
       document.removeEventListener('scroll', this.onScroll)
     }
   },

   methods: {
     // get item size by id
     getSize(id) {
       return this.virtual.sizes.get(id)
     },

     // get the total number of stored (rendered) items
     getSizes() {
       return this.virtual.sizes.size
     },

     // return current scroll offset
     getOffset() {
       if (this.pageMode) {
         return document.documentElement[this.directionKey] || document.body[this.directionKey]
       } else {
         const { root } = this.$refs
         return root ? Math.ceil(root[this.directionKey]) : 0
       }
     },

     // return client viewport size
     getClientSize() {
       const key = this.isHorizontal ? 'clientWidth' : 'clientHeight'
       if (this.pageMode) {
         return document.documentElement[key] || document.body[key]
       } else {
         const { root } = this.$refs
         return root ? Math.ceil(root[key]) : 0
       }
     },

     // return all scroll size
     getScrollSize() {
       const key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight'
       if (this.pageMode) {
         return document.documentElement[key] || document.body[key]
       } else {
         const { root } = this.$refs
         return root ? Math.ceil(root[key]) : 0
       }
     },

     // set current scroll position to a expectant offset
     scrollToOffset(offset) {
       if (this.pageMode) {
         document.body[this.directionKey] = offset
         document.documentElement[this.directionKey] = offset
       } else {
         const { root } = this.$refs
         if (root) {
           root[this.directionKey] = offset
         }
       }
     },

     // set current scroll position to a expectant index
     scrollToIndex(index) {
       // scroll to bottom
       if (index >= this.dataSources.length - 1) {
         this.scrollToBottom()
       } else {
         const offset = this.virtual.getOffset(index)
         this.scrollToOffset(offset)
       }
     },

     // set current scroll position to bottom
     scrollToBottom() {
       const { shepherd } = this.$refs
       if (shepherd) {
         const offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop']
         this.scrollToOffset(offset)

         // check if it's really scrolled to the bottom
         // maybe list doesn't render and calculate to last range
         // so we need retry in next event loop until it really at bottom
         setTimeout(() => {
           if (this.getOffset() + this.getClientSize() < this.getScrollSize()) {
             this.scrollToBottom()
           }
         }, 3)
       }
     },

     // when using page mode we need update slot header size manually
     // taking root offset relative to the browser as slot header size
     updatePageModeFront() {
       const { root } = this.$refs
       if (root) {
         const rect = root.getBoundingClientRect()
         const { defaultView } = root.ownerDocument
         const offsetFront = this.isHorizontal ? (rect.left + defaultView.pageXOffset) : (rect.top + defaultView.pageYOffset)
         this.virtual.updateParam('slotHeaderSize', offsetFront)
       }
     },

     // reset all state back to initial
     reset() {
       this.virtual.destroy()
       this.scrollToOffset(0)
       this.installVirtual()
     },

     // ----------- public method end -----------

     installVirtual() {
       this.virtual = new Virtual({
         slotHeaderSize: 0,
         slotFooterSize: 0,
         keeps: this.keeps,
         estimateSize: this.estimateSize,
         buffer: Math.round(this.keeps / 3), // recommend for a third of keeps
         uniqueIds: this.getUniqueIdFromDataSources()
       }, this.onRangeChanged)

       // sync initial range
       this.range = this.virtual.getRange()
     },

     getUniqueIdFromDataSources() {
       const { dataKey } = this
       return this.dataSources.map((dataSource) => typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey])
     },

     // event called when each item mounted or size changed
     onItemResized(id, size) {
       this.virtual.saveSize(id, size)
       this.$emit('resized', id, size)
     },

     // event called when slot mounted or size changed
     onSlotResized(type, size, hasInit) {
       if (type === SLOT_TYPE.HEADER) {
         this.virtual.updateParam('slotHeaderSize', size)
       } else if (type === SLOT_TYPE.FOOTER) {
         this.virtual.updateParam('slotFooterSize', size)
       }

       if (hasInit) {
         this.virtual.handleSlotSizeChange()
       }
     },

     // here is the re-rendering entry
     onRangeChanged(range) {
       this.range = range
     },

     onScroll(evt) {
       const offset = this.getOffset()
       const clientSize = this.getClientSize()
       const scrollSize = this.getScrollSize()

       // iOS scroll-spring-back behavior will make direction mistake
       if (offset < 0 || (offset + clientSize > scrollSize + 1) || !scrollSize) {
         return
       }

       this.virtual.handleScroll(offset)
       this.emitEvent(offset, clientSize, scrollSize, evt)
     },

     // emit event in special position
     emitEvent(offset, clientSize, scrollSize, evt) {
       this.$emit('scroll', evt, this.virtual.getRange())

       if (this.virtual.isFront() && !!this.dataSources.length && (offset - this.topThreshold <= 0)) {
         this.$emit('totop')
       } else if (this.virtual.isBehind() && (offset + clientSize + this.bottomThreshold >= scrollSize)) {
         this.$emit('tobottom')
       }
     },

     // get the real render slots based on range data
     // in-place patch strategy will try to reuse components as possible
     // so those components that are reused will not trigger lifecycle mounted
     getRenderSlots(h) {
       const slots = []
       const { start, end } = this.range
       const { dataSources, dataKey, itemClass, itemTag, itemStyle, isHorizontal, extraProps, dataComponent, itemScopedSlots } = this
       for (let index = start; index <= end; index++) {
         const dataSource = dataSources[index]
         if (dataSource) {
           const uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey]
           if (typeof uniqueKey === 'string' || typeof uniqueKey === 'number') {
             slots.push(h(Item, {
               props: {
                 index,
                 tag: itemTag,
                 event: EVENT_TYPE.ITEM,
                 horizontal: isHorizontal,
                 uniqueKey: uniqueKey,
                 source: dataSource,
                 extraProps: extraProps,
                 component: dataComponent,
                 scopedSlots: itemScopedSlots
               },
               style: itemStyle,
               class: `${itemClass}${this.itemClassAdd ? ' ' + this.itemClassAdd(index) : ''}`
             }))
           } else {
             console.warn(`Cannot get the data-key '${dataKey}' from data-sources.`)
           }
         } else {
           console.warn(`Cannot get the index '${index}' from data-sources.`)
         }
       }
       return slots
     }
   },

   // render function, a closer-to-the-compiler alternative to templates
   // https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
   render(h) {
     const { header, footer } = this.$slots
     const { padFront, padBehind } = this.range
     const { isHorizontal, pageMode, rootTag, wrapTag, wrapClass, wrapStyle, headerTag, headerClass, headerStyle, footerTag, footerClass, footerStyle } = this
     const paddingStyle = { padding: isHorizontal ? `0px ${padBehind}px 0px ${padFront}px` : `${padFront}px 0px ${padBehind}px` }
     const wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle

     return h(rootTag, {
       ref: 'root',
       on: {
         '&scroll': !pageMode && this.onScroll
       }
     }, [
       // header slot
       header ? h(Slot, {
         class: headerClass,
         style: headerStyle,
         props: {
           tag: headerTag,
           event: EVENT_TYPE.SLOT,
           uniqueKey: SLOT_TYPE.HEADER
         }
       }, header) : null,

       // main list
       h(wrapTag, {
         class: wrapClass,
         attrs: {
           role: 'group'
         },
         style: wrapperStyle
       }, this.getRenderSlots(h)),

       // footer slot
       footer ? h(Slot, {
         class: footerClass,
         style: footerStyle,
         props: {
           tag: footerTag,
           event: EVENT_TYPE.SLOT,
           uniqueKey: SLOT_TYPE.FOOTER
         }
       }, footer) : null,

       // an empty element use to scroll to bottom
       h('div', {
         ref: 'shepherd',
         style: {
           width: isHorizontal ? '0px' : '100%',
           height: isHorizontal ? '100%' : '0px'
         }
       })
     ])
   }
 })

 export default VirtualList
	import Vue from 'vue'
	import Virtual from './virtual'
	import { Item, Slot } from './Item'
	import { VirtualProps } from './props'

	const EVENT_TYPE = {
	ITEM: 'item_resize',
	SLOT: 'slot_resize'
	}
	const SLOT_TYPE = {
	HEADER: 'header', // string value also use for aria role attribute
	FOOTER: 'footer'
	}

	const VirtualList = Vue.component('virtual-list', {
	props: VirtualProps,

	data() {
	return {
	range: null
	}
	},

	watch: {
	'dataSources.length'() {
	this.virtual.updateParam('uniqueIds', this.getUniqueIdFromDataSources())
	this.virtual.handleDataSourcesChange()
	},

	start(newValue) {
	this.scrollToIndex(newValue)
	},

	offset(newValue) {
	this.scrollToOffset(newValue)
	}
	},

	created() {
	this.isHorizontal = this.direction === 'horizontal'
	this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop'

	this.installVirtual()

	// listen item size change
	this.$on(EVENT_TYPE.ITEM, this.onItemResized)

	// listen slot size change
	if (this.$slots.header \|\| this.$slots.footer) {
	this.$on(EVENT_TYPE.SLOT, this.onSlotResized)
	}
	},

	// set back offset when awake from keep-alive
	activated() {
	this.scrollToOffset(this.virtual.offset)
	},

	mounted() {
	// set position
	if (this.start) {
	this.scrollToIndex(this.start)
	} else if (this.offset) {
	this.scrollToOffset(this.offset)
	}

	// in page mode we bind scroll event to document
	if (this.pageMode) {
	this.updatePageModeFront()

	document.addEventListener('scroll', this.onScroll, {
	passive: false
	})
	}
	},

	beforeDestroy() {
	this.virtual.destroy()
	if (this.pageMode) {
	document.removeEventListener('scroll', this.onScroll)
	}
	},

	methods: {
	// get item size by id
	getSize(id) {
	return this.virtual.sizes.get(id)
	},

	// get the total number of stored (rendered) items
	getSizes() {
	return this.virtual.sizes.size
	},

	// return current scroll offset
	getOffset() {
	if (this.pageMode) {
	return document.documentElement[this.directionKey] \|\| document.body[this.directionKey]
	} else {
	const { root } = this.$refs
	return root ? Math.ceil(root[this.directionKey]) : 0
	}
	},

	// return client viewport size
	getClientSize() {
	const key = this.isHorizontal ? 'clientWidth' : 'clientHeight'
	if (this.pageMode) {
	return document.documentElement[key] \|\| document.body[key]
	} else {
	const { root } = this.$refs
	return root ? Math.ceil(root[key]) : 0
	}
	},

	// return all scroll size
	getScrollSize() {
	const key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight'
	if (this.pageMode) {
	return document.documentElement[key] \|\| document.body[key]
	} else {
	const { root } = this.$refs
	return root ? Math.ceil(root[key]) : 0
	}
	},

	// set current scroll position to a expectant offset
	scrollToOffset(offset) {
	if (this.pageMode) {
	document.body[this.directionKey] = offset
	document.documentElement[this.directionKey] = offset
	} else {
	const { root } = this.$refs
	if (root) {
	root[this.directionKey] = offset
	}
	}
	},

	// set current scroll position to a expectant index
	scrollToIndex(index) {
	// scroll to bottom
	if (index >= this.dataSources.length - 1) {
	this.scrollToBottom()
	} else {
	const offset = this.virtual.getOffset(index)
	this.scrollToOffset(offset)
	}
	},

	// set current scroll position to bottom
	scrollToBottom() {
	const { shepherd } = this.$refs
	if (shepherd) {
	const offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop']
	this.scrollToOffset(offset)

	// check if it's really scrolled to the bottom
	// maybe list doesn't render and calculate to last range
	// so we need retry in next event loop until it really at bottom
	setTimeout(() => {
	if (this.getOffset() + this.getClientSize() < this.getScrollSize()) {
	this.scrollToBottom()
	}
	}, 3)
	}
	},

	// when using page mode we need update slot header size manually
	// taking root offset relative to the browser as slot header size
	updatePageModeFront() {
	const { root } = this.$refs
	if (root) {
	const rect = root.getBoundingClientRect()
	const { defaultView } = root.ownerDocument
	const offsetFront = this.isHorizontal ? (rect.left + defaultView.pageXOffset) : (rect.top + defaultView.pageYOffset)
	this.virtual.updateParam('slotHeaderSize', offsetFront)
	}
	},

	// reset all state back to initial
	reset() {
	this.virtual.destroy()
	this.scrollToOffset(0)
	this.installVirtual()
	},

	// ----------- public method end -----------

	installVirtual() {
	this.virtual = new Virtual({
	slotHeaderSize: 0,
	slotFooterSize: 0,
	keeps: this.keeps,
	estimateSize: this.estimateSize,
	buffer: Math.round(this.keeps / 3), // recommend for a third of keeps
	uniqueIds: this.getUniqueIdFromDataSources()
	}, this.onRangeChanged)

	// sync initial range
	this.range = this.virtual.getRange()
	},

	getUniqueIdFromDataSources() {
	const { dataKey } = this
	return this.dataSources.map((dataSource) => typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey])
	},

	// event called when each item mounted or size changed
	onItemResized(id, size) {
	this.virtual.saveSize(id, size)
	this.$emit('resized', id, size)
	},

	// event called when slot mounted or size changed
	onSlotResized(type, size, hasInit) {
	if (type === SLOT_TYPE.HEADER) {
	this.virtual.updateParam('slotHeaderSize', size)
	} else if (type === SLOT_TYPE.FOOTER) {
	this.virtual.updateParam('slotFooterSize', size)
	}

	if (hasInit) {
	this.virtual.handleSlotSizeChange()
	}
	},

	// here is the re-rendering entry
	onRangeChanged(range) {
	this.range = range
	},

	onScroll(evt) {
	const offset = this.getOffset()
	const clientSize = this.getClientSize()
	const scrollSize = this.getScrollSize()

	// iOS scroll-spring-back behavior will make direction mistake
	if (offset < 0 \|\| (offset + clientSize > scrollSize + 1) \|\| !scrollSize) {
	return
	}

	this.virtual.handleScroll(offset)
	this.emitEvent(offset, clientSize, scrollSize, evt)
	},

	// emit event in special position
	emitEvent(offset, clientSize, scrollSize, evt) {
	this.$emit('scroll', evt, this.virtual.getRange())

	if (this.virtual.isFront() && !!this.dataSources.length && (offset - this.topThreshold <= 0)) {
	this.$emit('totop')
	} else if (this.virtual.isBehind() && (offset + clientSize + this.bottomThreshold >= scrollSize)) {
	this.$emit('tobottom')
	}
	},

	// get the real render slots based on range data
	// in-place patch strategy will try to reuse components as possible
	// so those components that are reused will not trigger lifecycle mounted
	getRenderSlots(h) {
	const slots = []
	const { start, end } = this.range
	const { dataSources, dataKey, itemClass, itemTag, itemStyle, isHorizontal, extraProps, dataComponent, itemScopedSlots } = this
	for (let index = start; index <= end; index++) {
	const dataSource = dataSources[index]
	if (dataSource) {
	const uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey]
	if (typeof uniqueKey === 'string' \|\| typeof uniqueKey === 'number') {
	slots.push(h(Item, {
	props: {
	index,
	tag: itemTag,
	event: EVENT_TYPE.ITEM,
	horizontal: isHorizontal,
	uniqueKey: uniqueKey,
	source: dataSource,
	extraProps: extraProps,
	component: dataComponent,
	scopedSlots: itemScopedSlots
	},
	style: itemStyle,
	class: `${itemClass}${this.itemClassAdd ? ' ' + this.itemClassAdd(index) : ''}`
	}))
	} else {
	console.warn(`Cannot get the data-key '${dataKey}' from data-sources.`)
	}
	} else {
	console.warn(`Cannot get the index '${index}' from data-sources.`)
	}
	}
	return slots
	}
	},

	// render function, a closer-to-the-compiler alternative to templates
	// https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
	render(h) {
	const { header, footer } = this.$slots
	const { padFront, padBehind } = this.range
	const { isHorizontal, pageMode, rootTag, wrapTag, wrapClass, wrapStyle, headerTag, headerClass, headerStyle, footerTag, footerClass, footerStyle } = this
	const paddingStyle = { padding: isHorizontal ? `0px ${padBehind}px 0px ${padFront}px` : `${padFront}px 0px ${padBehind}px` }
	const wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle

	return h(rootTag, {
	ref: 'root',
	on: {
	'&scroll': !pageMode && this.onScroll
	}
	}, [
	// header slot
	header ? h(Slot, {
	class: headerClass,
	style: headerStyle,
	props: {
	tag: headerTag,
	event: EVENT_TYPE.SLOT,
	uniqueKey: SLOT_TYPE.HEADER
	}
	}, header) : null,

	// main list
	h(wrapTag, {
	class: wrapClass,
	attrs: {
	role: 'group'
	},
	style: wrapperStyle
	}, this.getRenderSlots(h)),

	// footer slot
	footer ? h(Slot, {
	class: footerClass,
	style: footerStyle,
	props: {
	tag: footerTag,
	event: EVENT_TYPE.SLOT,
	uniqueKey: SLOT_TYPE.FOOTER
	}
	}, footer) : null,

	// an empty element use to scroll to bottom
	h('div', {
	ref: 'shepherd',
	style: {
	width: isHorizontal ? '0px' : '100%',
	height: isHorizontal ? '100%' : '0px'
	}
	})
	])
	}
	})

	export default VirtualList