Update hocs to pass parent-scope bindings to the wrapped component

This commit is contained in:
taehoon 2019-02-13 20:59:26 -05:00
parent 52913d8f87
commit 8270274865
2 changed files with 33 additions and 20 deletions

View file

@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
{map(this.entries, (entry, index) => { {map(this.entries, (entry, index) => {
const props = { const props = {
key: getKey(entry, index), key: getKey(entry, index),
props: {
...this.$props.entryProps, ...this.$props.entryProps,
...getEntryProps(entry, index) ...getEntryProps(entry, index)
},
on: this.$props.entryListeners
} }
return <Component {...{ attrs: props }} /> return <Component {...props} />
})} })}
</div> </div>
) )
}, },
props: ['entries', 'entryProps'] props: ['entries', 'entryProps', 'entryListeners']
}) })
} }

View file

@ -1,20 +1,28 @@
import Vue from 'vue' import Vue from 'vue'
import filter from 'lodash/filter' import filter from 'lodash/filter'
import isEmpty from 'lodash/isEmpty'
import './with_load_more.scss' import './with_load_more.scss'
const withLoadMore = (Component, fetchEntries, getEntries) => { const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
const originalProps = Component.props || [] const originalProps = Component.props || []
const props = filter(originalProps, v => v !== 'entries') const props = filter(originalProps, v => v !== 'entries')
return Vue.component('withLoadMore', { return Vue.component('withLoadMore', {
render (createElement) { render (createElement) {
const props = {
props: {
...this.$props,
[entriesPropName]: this.entries
},
on: this.$listeners
}
return ( return (
<div class="with-load-more"> <div class="with-load-more">
<Component entries={this.entries} /> <Component {...props} />
<div class="with-load-more-footer"> <div class="with-load-more-footer">
{this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>} {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>} {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetch}>{this.$t('general.more')}</a>} {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
</div> </div>
</div> </div>
) )
@ -29,29 +37,31 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
}, },
computed: { computed: {
entries () { entries () {
return getEntries(this.$props, this.$store) || [] return select(this.$props, this.$store) || []
} }
}, },
created () { created () {
window.addEventListener('scroll', this.scrollLoad) window.addEventListener('scroll', this.scrollLoad)
if (this.entries.length === 0) { if (this.entries.length === 0) {
this.fetch() this.fetchEntries()
} }
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.scrollLoad) window.removeEventListener('scroll', this.scrollLoad)
}, },
methods: { methods: {
fetch () { fetchEntries () {
if (!this.loading) { if (!this.loading) {
this.loading = true this.loading = true
fetchEntries(this.$props, this.$store).then((newEntries) => {
this.error = false this.error = false
fetch(this.$props, this.$store)
.then((newEntries) => {
this.loading = false
this.bottomedOut = isEmpty(newEntries)
})
.catch(() => {
this.loading = false this.loading = false
this.bottomedOut = !newEntries || newEntries.length === 0
}).catch(() => {
this.error = true this.error = true
this.loading = false
}) })
} }
}, },
@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
this.$el.offsetHeight > 0 && this.$el.offsetHeight > 0 &&
(window.innerHeight + window.pageYOffset) >= (height - 750) (window.innerHeight + window.pageYOffset) >= (height - 750)
) { ) {
this.fetch() this.fetchEntries()
} }
} }
} }