pinafore/routes/_components/pseudoVirtualList/PseudoVirtualListItem.html
Nolan Lawson 42be854521
upgrade to svelte 2.0 (#251)
* upgrade to svelte 2.0

* update svelte-loader to 2.9.0
2018-05-01 17:05:36 -07:00

58 lines
1.6 KiB
HTML

<div class="pseudo-virtual-list-item"
aria-hidden={hide}
pseudo-virtual-list-key={key}
style="height: {shouldHide ? `${height}px` : ''};"
ref:node>
{#if !shouldHide}
<svelte:component this={component}
virtualProps={props}
virtualIndex={index}
virtualLength={length}
/>
{/if}
</div>
<script>
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
import { observe } from 'svelte-extras'
export default {
oncreate () {
this.observe('isIntersecting', isIntersecting => {
if (isIntersecting) {
mark('render')
this.set({hide: false})
stop('render')
} else {
// unrender lazily; it's not a critical UI task
scheduleIdleTask(() => {
mark('unrender')
let { isIntersecting } = this.get() || {} // https://github.com/sveltejs/svelte/issues/1354
if (!isIntersecting) {
this.set({hide: true})
}
stop('unrender')
})
}
})
let { intersectionObserver } = this.get()
intersectionObserver.observe(this.refs.node)
},
data: () => ({
hide: false
}),
computed: {
shouldHide: ({ isIntersecting, isCached, hide }) => {
if (isCached) {
return true // if it's cached, always unrender immediately until proven it's intersecting
}
return !isIntersecting && hide
}
},
methods: {
observe
}
}
</script>