diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 21aa288b..5ec37a2b 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
{map(this.entries, (entry, index) => {
const props = {
key: getKey(entry, index),
- ...this.$props.entryProps,
- ...getEntryProps(entry, index)
+ props: {
+ ...this.$props.entryProps,
+ ...getEntryProps(entry, index)
+ },
+ on: this.$props.entryListeners
}
- return
+ return
})}
)
},
- props: ['entries', 'entryProps']
+ props: ['entries', 'entryProps', 'entryListeners']
})
}
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 14d4303d..8877f8d3 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -1,20 +1,28 @@
import Vue from 'vue'
import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
import './with_load_more.scss'
-const withLoadMore = (Component, fetchEntries, getEntries) => {
+const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
const originalProps = Component.props || []
const props = filter(originalProps, v => v !== 'entries')
return Vue.component('withLoadMore', {
render (createElement) {
+ const props = {
+ props: {
+ ...this.$props,
+ [entriesPropName]: this.entries
+ },
+ on: this.$listeners
+ }
return (
-
+
)
@@ -29,30 +37,32 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
},
computed: {
entries () {
- return getEntries(this.$props, this.$store) || []
+ return select(this.$props, this.$store) || []
}
},
created () {
window.addEventListener('scroll', this.scrollLoad)
if (this.entries.length === 0) {
- this.fetch()
+ this.fetchEntries()
}
},
destroyed () {
window.removeEventListener('scroll', this.scrollLoad)
},
methods: {
- fetch () {
+ fetchEntries () {
if (!this.loading) {
this.loading = true
- fetchEntries(this.$props, this.$store).then((newEntries) => {
- this.error = false
- this.loading = false
- this.bottomedOut = !newEntries || newEntries.length === 0
- }).catch(() => {
- this.error = true
- this.loading = false
- })
+ this.error = false
+ fetch(this.$props, this.$store)
+ .then((newEntries) => {
+ this.loading = false
+ this.bottomedOut = isEmpty(newEntries)
+ })
+ .catch(() => {
+ this.loading = false
+ this.error = true
+ })
}
},
scrollLoad (e) {
@@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
this.$el.offsetHeight > 0 &&
(window.innerHeight + window.pageYOffset) >= (height - 750)
) {
- this.fetch()
+ this.fetchEntries()
}
}
}