Allow HOCs to accept additional props
This commit is contained in:
parent
dc01f90dde
commit
3a689ef8ee
2 changed files with 8 additions and 7 deletions
|
@ -6,10 +6,11 @@ import './with_load_more.scss'
|
|||
const withLoadMore = ({
|
||||
fetch, // function to fetch entries and return a promise
|
||||
select, // function to select data from store
|
||||
childPropName = 'entries' // name of the prop to be passed into the wrapped component
|
||||
childPropName = 'entries', // name of the prop to be passed into the wrapped component
|
||||
additionalPropNames = [] // additional prop name list of the wrapper component
|
||||
}) => (WrappedComponent) => {
|
||||
const originalProps = WrappedComponent.props || []
|
||||
const props = filter(originalProps, v => v !== 'entries')
|
||||
const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames)
|
||||
|
||||
return Vue.component('withLoadMore', {
|
||||
render (createElement) {
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import Vue from 'vue'
|
||||
import reject from 'lodash/reject'
|
||||
import filter from 'lodash/filter'
|
||||
import isEmpty from 'lodash/isEmpty'
|
||||
import omit from 'lodash/omit'
|
||||
import './with_subscription.scss'
|
||||
|
||||
const withSubscription = ({
|
||||
fetch, // function to fetch entries and return a promise
|
||||
select, // function to select data from store
|
||||
childPropName = 'content' // name of the prop to be passed into the wrapped component
|
||||
childPropName = 'content', // name of the prop to be passed into the wrapped component
|
||||
additionalPropNames = [] // additional prop name list of the wrapper component
|
||||
}) => (WrappedComponent) => {
|
||||
const originalProps = WrappedComponent.props || []
|
||||
const props = reject(originalProps, v => v === 'content')
|
||||
const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames)
|
||||
|
||||
return Vue.component('withSubscription', {
|
||||
props: [
|
||||
|
@ -21,7 +21,7 @@ const withSubscription = ({
|
|||
if (!this.error && !this.loading) {
|
||||
const props = {
|
||||
props: {
|
||||
...omit(this.$props, 'refresh'),
|
||||
...this.$props,
|
||||
[childPropName]: this.fetchedData
|
||||
},
|
||||
on: this.$listeners,
|
||||
|
|
Loading…
Reference in a new issue