Allow HOCs to accept additional props

This commit is contained in:
taehoon 2019-02-25 02:10:59 -05:00
parent dc01f90dde
commit 3a689ef8ee
2 changed files with 8 additions and 7 deletions

View file

@ -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) {

View file

@ -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,