Allow HOCs to accept additional props
This commit is contained in:
parent
dc01f90dde
commit
3a689ef8ee
@ -6,10 +6,11 @@ import './with_load_more.scss'
|
|||||||
const withLoadMore = ({
|
const withLoadMore = ({
|
||||||
fetch, // function to fetch entries and return a promise
|
fetch, // function to fetch entries and return a promise
|
||||||
select, // function to select data from store
|
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) => {
|
}) => (WrappedComponent) => {
|
||||||
const originalProps = WrappedComponent.props || []
|
const originalProps = WrappedComponent.props || []
|
||||||
const props = filter(originalProps, v => v !== 'entries')
|
const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames)
|
||||||
|
|
||||||
return Vue.component('withLoadMore', {
|
return Vue.component('withLoadMore', {
|
||||||
render (createElement) {
|
render (createElement) {
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import reject from 'lodash/reject'
|
import filter from 'lodash/filter'
|
||||||
import isEmpty from 'lodash/isEmpty'
|
import isEmpty from 'lodash/isEmpty'
|
||||||
import omit from 'lodash/omit'
|
|
||||||
import './with_subscription.scss'
|
import './with_subscription.scss'
|
||||||
|
|
||||||
const withSubscription = ({
|
const withSubscription = ({
|
||||||
fetch, // function to fetch entries and return a promise
|
fetch, // function to fetch entries and return a promise
|
||||||
select, // function to select data from store
|
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) => {
|
}) => (WrappedComponent) => {
|
||||||
const originalProps = WrappedComponent.props || []
|
const originalProps = WrappedComponent.props || []
|
||||||
const props = reject(originalProps, v => v === 'content')
|
const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames)
|
||||||
|
|
||||||
return Vue.component('withSubscription', {
|
return Vue.component('withSubscription', {
|
||||||
props: [
|
props: [
|
||||||
@ -21,7 +21,7 @@ const withSubscription = ({
|
|||||||
if (!this.error && !this.loading) {
|
if (!this.error && !this.loading) {
|
||||||
const props = {
|
const props = {
|
||||||
props: {
|
props: {
|
||||||
...omit(this.$props, 'refresh'),
|
...this.$props,
|
||||||
[childPropName]: this.fetchedData
|
[childPropName]: this.fetchedData
|
||||||
},
|
},
|
||||||
on: this.$listeners,
|
on: this.$listeners,
|
||||||
|
Loading…
Reference in New Issue
Block a user