desea/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Pass down slots into wrapped components

Browse source
This commit is contained in:
taehoon 2019-02-14 03:12:52 -05:00
parent 6d4d705c51
commit 8680046c4e
2 changed files with 36 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/hocs/with_load_more/with_load_more.js
View file

@ -18,11 +18,15 @@ const withLoadMore = ({
...this.$props, ...this.$props,
[childPropName]: this.entries [childPropName]: this.entries
}, },
on: this.$listeners on: this.$listeners,
scopedSlots: this.$scopedSlots
} }
const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
return ( return (
<div class="with-load-more"> <div class="with-load-more">
<WrappedComponent {...props} /> <WrappedComponent {...props}>
{children}
</WrappedComponent>
<div class="with-load-more-footer"> <div class="with-load-more-footer">
{this.error && <a onClick={this.fetchEntries} 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"/>}

28
src/hocs/with_subscription/with_subscription.js
View file

@ -13,25 +13,39 @@ const withSubscription = ({
const props = reject(originalProps, v => v === 'content') const props = reject(originalProps, v => v === 'content')
return Vue.component('withSubscription', { return Vue.component('withSubscription', {
props: [
...props,
'refresh' // boolean saying to force-fetch data whenever created
],
render (createElement) { render (createElement) {
if (!this.error && !this.loading) {
const props = { const props = {
props: { props: {
...omit(this.$props, 'refresh'), ...omit(this.$props, 'refresh'),
[childPropName]: this.fetchedData [childPropName]: this.fetchedData
}, },
on: this.$listeners on: this.$listeners,
scopedSlots: this.$scopedSlots
} }
const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
return ( return (
<div class="with-subscription"> <div class="with-subscription">
{!this.error && !this.loading && <WrappedComponent {...props} />} <WrappedComponent {...props}>
<div class="with-subscription-footer"> {children}
{this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>} </WrappedComponent>
{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
</div>
</div> </div>
) )
} else {
return (
<div class="with-subscription-loading">
{this.error
? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
: <i class="icon-spin3 animate-spin"/>
}
</div>
)
}
}, },
props: [...props, 'refresh'],
data () { data () {
return { return {
loading: false, loading: false,