From 3a689ef8eead0503b90d3c9dec3b15fa0ace8eb6 Mon Sep 17 00:00:00 2001 From: taehoon Date: Mon, 25 Feb 2019 02:10:59 -0500 Subject: Allow HOCs to accept additional props --- src/hocs/with_subscription/with_subscription.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/hocs/with_subscription/with_subscription.js') diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 1ac67cba..b6bc8358 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -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, -- cgit v1.2.3-70-g09d2 From cb383df517dc5cd5b4d90136b533977a33611b71 Mon Sep 17 00:00:00 2001 From: taehoon Date: Mon, 25 Feb 2019 04:18:41 -0500 Subject: Fix bug to get wrapped component prop name list --- src/hocs/with_load_more/with_load_more.js | 3 ++- src/hocs/with_subscription/with_subscription.js | 3 ++- src/services/component_utils/component_utils.js | 10 ++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 src/services/component_utils/component_utils.js (limited to 'src/hocs/with_subscription/with_subscription.js') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index a521014c..7d53e7ac 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -1,6 +1,7 @@ import Vue from 'vue' import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' +import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' const withLoadMore = ({ @@ -9,7 +10,7 @@ const withLoadMore = ({ 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 originalProps = Object.keys(getComponentProps(WrappedComponent)) const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames) return Vue.component('withLoadMore', { diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index b6bc8358..4d3ae811 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -1,6 +1,7 @@ import Vue from 'vue' import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' +import { getComponentProps } from '../../services/component_utils/component_utils' import './with_subscription.scss' const withSubscription = ({ @@ -9,7 +10,7 @@ const withSubscription = ({ 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 originalProps = Object.keys(getComponentProps(WrappedComponent)) const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames) return Vue.component('withSubscription', { diff --git a/src/services/component_utils/component_utils.js b/src/services/component_utils/component_utils.js new file mode 100644 index 00000000..77ea14a1 --- /dev/null +++ b/src/services/component_utils/component_utils.js @@ -0,0 +1,10 @@ +import isFunction from 'lodash/isFunction' + +const getComponentOptions = (Component) => (isFunction(Component)) ? Component.options : Component + +const getComponentProps = (Component) => getComponentOptions(Component).props + +export { + getComponentOptions, + getComponentProps +} -- cgit v1.2.3-70-g09d2 From 651c97153ba90daaacc5facc56e20aec5cdb112e Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 26 Feb 2019 15:26:59 -0500 Subject: Use native filter function --- src/hocs/with_load_more/with_load_more.js | 3 +-- src/hocs/with_subscription/with_subscription.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) (limited to 'src/hocs/with_subscription/with_subscription.js') diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index b8246ec9..74979b87 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -1,5 +1,4 @@ import Vue from 'vue' -import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_load_more.scss' @@ -12,7 +11,7 @@ const withLoadMore = ({ additionalPropNames = [] // additional prop name list of the wrapper component }) => (WrappedComponent) => { const originalProps = Object.keys(getComponentProps(WrappedComponent)) - const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames) + const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) return Vue.component('withLoadMore', { render (createElement) { diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 4d3ae811..679409cf 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -1,5 +1,4 @@ import Vue from 'vue' -import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import { getComponentProps } from '../../services/component_utils/component_utils' import './with_subscription.scss' @@ -11,7 +10,7 @@ const withSubscription = ({ additionalPropNames = [] // additional prop name list of the wrapper component }) => (WrappedComponent) => { const originalProps = Object.keys(getComponentProps(WrappedComponent)) - const props = filter(originalProps, v => v !== childPropName).concat(additionalPropNames) + const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) return Vue.component('withSubscription', { props: [ -- cgit v1.2.3-70-g09d2