chore(store): clean up usage of svelte store (#713)
This commit is contained in:
parent
ef656301f6
commit
36d90d34e5
|
@ -63,26 +63,20 @@
|
||||||
this.store.setForRealm({ items: newItems })
|
this.store.setForRealm({ items: newItems })
|
||||||
stop('set items')
|
stop('set items')
|
||||||
})
|
})
|
||||||
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
||||||
if (allVisibleItemsHaveHeight) {
|
if (allVisibleItemsHaveHeight) {
|
||||||
this.fire('initializedVisibleItems')
|
this.fire('initializedVisibleItems')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let observedOnce = false
|
|
||||||
|
|
||||||
this.observe('distanceFromBottom', (distanceFromBottom) => {
|
this.observe('distanceFromBottom', (distanceFromBottom) => {
|
||||||
if (!observedOnce) {
|
|
||||||
observedOnce = true // TODO: the first time is always 0... need better way to handle this
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (distanceFromBottom >= 0 &&
|
if (distanceFromBottom >= 0 &&
|
||||||
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
|
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
|
||||||
this.fireScrollToBottom()
|
this.fireScrollToBottom()
|
||||||
}
|
}
|
||||||
})
|
}, { init: false })
|
||||||
|
|
||||||
this.observe('scrollTop', (scrollTop) => {
|
this.store.observe('scrollTop', (scrollTop) => {
|
||||||
this.fire('scrollTopChanged', scrollTop)
|
this.fire('scrollTopChanged', scrollTop)
|
||||||
if (scrollTop === 0) {
|
if (scrollTop === 0) {
|
||||||
this.fireScrollToTop()
|
this.fireScrollToTop()
|
||||||
|
@ -103,10 +97,7 @@
|
||||||
computed: {
|
computed: {
|
||||||
distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => {
|
distanceFromBottom: ({ $scrollHeight, $scrollTop, $offsetHeight }) => {
|
||||||
return $scrollHeight - $scrollTop - $offsetHeight
|
return $scrollHeight - $scrollTop - $offsetHeight
|
||||||
},
|
}
|
||||||
scrollTop: ({ $scrollTop }) => $scrollTop,
|
|
||||||
// TODO: bug in svelte store, shouldn't need to do this
|
|
||||||
allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
observe,
|
observe,
|
||||||
|
@ -123,4 +114,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
let { scrollTop } = this.store.get()
|
let { scrollTop } = this.store.get()
|
||||||
let scrollContainer = getScrollContainer()
|
let scrollContainer = getScrollContainer()
|
||||||
if (scrollTop > 0) {
|
if (scrollTop > 0) {
|
||||||
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
||||||
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
|
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
|
||||||
let { initializedScrollTop } = this.get()
|
let { initializedScrollTop } = this.get()
|
||||||
if (!initializedScrollTop && allVisibleItemsHaveHeight) {
|
if (!initializedScrollTop && allVisibleItemsHaveHeight) {
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.fire('noNeedToScroll')
|
this.fire('noNeedToScroll')
|
||||||
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
||||||
if (allVisibleItemsHaveHeight) {
|
if (allVisibleItemsHaveHeight) {
|
||||||
console.log('initialized VirtualList')
|
console.log('initialized VirtualList')
|
||||||
this.fire('initialized')
|
this.fire('initialized')
|
||||||
|
@ -110,10 +110,6 @@
|
||||||
offsetHeight: getOffsetHeight()
|
offsetHeight: getOffsetHeight()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
|
|
||||||
allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { mark, stop } from '../../_utils/marks'
|
import { mark, stop } from '../../_utils/marks'
|
||||||
import { RealmStore } from '../../_utils/RealmStore'
|
import { RealmStore } from '../../_utils/RealmStore'
|
||||||
import { reselect } from '../../_utils/reselect'
|
import { reselect } from '../../_utils/reselect'
|
||||||
|
import { observe } from 'svelte-extras'
|
||||||
|
|
||||||
const RENDER_BUFFER_FACTOR = 2.5
|
const RENDER_BUFFER_FACTOR = 2.5
|
||||||
|
|
||||||
|
@ -10,6 +11,8 @@ class VirtualListStore extends RealmStore {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
VirtualListStore.prototype.observe = observe
|
||||||
|
|
||||||
const virtualListStore = new VirtualListStore()
|
const virtualListStore = new VirtualListStore()
|
||||||
|
|
||||||
virtualListStore.computeForRealm('items', null)
|
virtualListStore.computeForRealm('items', null)
|
||||||
|
|
Loading…
Reference in a new issue