diff options
| -rw-r--r-- | src/hocs/with_load_more/with_load_more.js | 8 | ||||
| -rw-r--r-- | src/hocs/with_subscription/with_subscription.js | 46 |
2 files changed, 36 insertions, 18 deletions
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 459e026c..e9265d2a 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -18,11 +18,15 @@ const withLoadMore = ({ ...this.$props, [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 ( <div class="with-load-more"> - <WrappedComponent {...props} /> + <WrappedComponent {...props}> + {children} + </WrappedComponent> <div class="with-load-more-footer"> {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"/>} diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 960c6d71..42ede7be 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -13,25 +13,39 @@ const withSubscription = ({ const props = reject(originalProps, v => v === 'content') return Vue.component('withSubscription', { + props: [ + ...props, + 'refresh' // boolean saying to force-fetch data whenever created + ], render (createElement) { - const props = { - props: { - ...omit(this.$props, 'refresh'), - [childPropName]: this.fetchedData - }, - on: this.$listeners - } - return ( - <div class="with-subscription"> - {!this.error && !this.loading && <WrappedComponent {...props} />} - <div class="with-subscription-footer"> - {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>} - {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>} + if (!this.error && !this.loading) { + const props = { + props: { + ...omit(this.$props, 'refresh'), + [childPropName]: this.fetchedData + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot])) + return ( + <div class="with-subscription"> + <WrappedComponent {...props}> + {children} + </WrappedComponent> </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 () { return { loading: false, |