fix empty timelines

This commit is contained in:
Nolan Lawson 2018-02-08 18:54:48 -08:00
parent 27858e32f8
commit 8af2e2061f
6 changed files with 39 additions and 29 deletions

View file

@ -63,7 +63,7 @@ export function initializeTimeline() {
export async function setupTimeline() {
mark('setupTimeline')
if (!store.get('timelineItemIds').length) {
if (!store.get('timelineItemIds')) {
await fetchTimelineItemsAndPossiblyFallBack()
}
stop('setupTimeline')

View file

@ -1,17 +1,19 @@
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
component="{{component}}"
index="{{i}}"
length="{{wrappedItems.length}}"
makeProps="{{makeProps}}"
key="{{wrappedItem.item}}"
intersectionObserver="{{intersectionObserver}}"
isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
/>
{{/each}}
{{#if wrappedItems}}
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
component="{{component}}"
index="{{i}}"
length="{{wrappedItems.length}}"
makeProps="{{makeProps}}"
key="{{wrappedItem.item}}"
intersectionObserver="{{intersectionObserver}}"
isIntersecting="{{isIntersecting(wrappedItem.item, $intersectionStates)}}"
isCached="{{isCached(wrappedItem.item, $intersectionStates)}}"
height="{{getHeight(wrappedItem.item, $intersectionStates)}}"
/>
{{/each}}
{{/if}}
</div>
<style>
.pseudo-virtual-list {
@ -114,9 +116,9 @@
}
},
computed: {
wrappedItems: (items) => items.map(item => ({item: item})),
wrappedItems: (items) => items && items.map(item => ({item: item})),
allItemsHaveHeight: (items, $intersectionStates) => {
if (!items.length) {
if (!items) {
return false
}
for (let item of items) {

View file

@ -111,7 +111,7 @@
},
methods: {
initialize() {
if (this.store.get('initialized') || !this.store.get('timelineItemIds') || !this.store.get('timelineItemIds').length) {
if (this.store.get('initialized') || !this.store.get('timelineItemIds')) {
return
}
console.log('timeline initialize()')

View file

@ -1,13 +1,15 @@
<!-- TODO: setting height is hacky, just make this element the scroller -->
<div class="virtual-list {{shown ? '' : 'hidden'}}" style="height: {{$height}}px;">
{{#each $visibleItems as visibleItem @key}}
<VirtualListLazyItem :component
offset="{{visibleItem.offset}}"
makeProps="{{makeProps}}"
key="{{visibleItem.key}}"
index="{{visibleItem.index}}"
/>
{{/each}}
{{#if $visibleItems}}
{{#each $visibleItems as visibleItem @key}}
<VirtualListLazyItem :component
offset="{{visibleItem.offset}}"
makeProps="{{makeProps}}"
key="{{visibleItem.key}}"
index="{{visibleItem.index}}"
/>
{{/each}}
{{/if}}
{{#if $showFooter}}
<VirtualListFooter component="{{footerComponent}}"/>
{{/if}}

View file

@ -11,7 +11,7 @@ class VirtualListStore extends RealmStore {
const virtualListStore = new VirtualListStore()
virtualListStore.computeForRealm('items', [])
virtualListStore.computeForRealm('items', null)
virtualListStore.computeForRealm('showFooter', false)
virtualListStore.computeForRealm('footerHeight', 0)
virtualListStore.computeForRealm('scrollTop', 0)
@ -23,6 +23,9 @@ virtualListStore.compute('visibleItems',
['items', 'scrollTop', 'itemHeights', 'offsetHeight'],
(items, scrollTop, itemHeights, offsetHeight) => {
mark('compute visibleItems')
if (!items) {
return null
}
let renderBuffer = VIEWPORT_RENDER_FACTOR * offsetHeight
let visibleItems = []
let totalOffset = 0
@ -56,6 +59,9 @@ virtualListStore.compute('visibleItems',
virtualListStore.compute('heightWithoutFooter',
['items', 'itemHeights'],
(items, itemHeights) => {
if (!items) {
return 0
}
let sum = 0
let i = -1
let len = items.length
@ -77,7 +83,7 @@ virtualListStore.compute('length', ['items'], (items) => items ? items.length :
virtualListStore.compute('allVisibleItemsHaveHeight',
['visibleItems', 'itemHeights'],
(visibleItems, itemHeights) => {
if (!visibleItems.length) {
if (!visibleItems) {
return false
}
for (let visibleItem of visibleItems) {

View file

@ -4,8 +4,8 @@ export function timelineComputations(store) {
return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
})
store.compute('timelineItemIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.timelineItemIds || [])
store.compute('timelineItemIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.timelineItemIds)
store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
store.compute('initialized', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])
store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])
}