Page MenuHomePhorge

No OneTemporary

Size
4 KB
Referenced Files
None
Subscribers
None
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 21aa288b18..5ec37a2b1f 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -1,27 +1,30 @@
import Vue from 'vue'
import map from 'lodash/map'
const defaultEntryPropsGetter = entry => ({ entry })
const defaultKeyGetter = entry => entry.id
const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
return Vue.component('withList', {
render (createElement) {
return (
<div class="with-list">
{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 <Component {...{ attrs: props }} />
+ return <Component {...props} />
})}
</div>
)
},
- props: ['entries', 'entryProps']
+ props: ['entries', 'entryProps', 'entryListeners']
})
}
export default withList
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 14d4303dc9..8877f8d349 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -1,73 +1,83 @@
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 (
<div class="with-load-more">
- <Component entries={this.entries} />
+ <Component {...props} />
<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 && !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>
)
},
props,
data () {
return {
loading: false,
bottomedOut: false,
error: false
}
},
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) {
const bodyBRect = document.body.getBoundingClientRect()
const height = Math.max(bodyBRect.height, -(bodyBRect.y))
if (this.loading === false &&
this.bottomedOut === false &&
this.$el.offsetHeight > 0 &&
(window.innerHeight + window.pageYOffset) >= (height - 750)
) {
- this.fetch()
+ this.fetchEntries()
}
}
}
})
}
export default withLoadMore

File Metadata

Mime Type
text/x-diff
Expires
Sat, Sep 19, 1:40 AM (19 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1768615
Default Alt Text
(4 KB)

Event Timeline