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() } } }