2019-02-14 06:30:12 +11:00
|
|
|
import Vue from 'vue'
|
|
|
|
import map from 'lodash/map'
|
|
|
|
|
|
|
|
const defaultEntryPropsGetter = entry => ({ entry })
|
|
|
|
const defaultKeyGetter = entry => entry.id
|
|
|
|
|
2019-02-14 15:25:21 +11:00
|
|
|
const withList = ({
|
|
|
|
getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component
|
|
|
|
getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
|
|
|
|
}) => (ItemComponent) => (
|
2019-02-14 14:52:57 +11:00
|
|
|
Vue.component('withList', {
|
2019-02-14 06:30:12 +11:00
|
|
|
render (createElement) {
|
|
|
|
return (
|
|
|
|
<div class="with-list">
|
|
|
|
{map(this.entries, (entry, index) => {
|
|
|
|
const props = {
|
|
|
|
key: getKey(entry, index),
|
2019-02-14 12:59:26 +11:00
|
|
|
props: {
|
|
|
|
...this.$props.entryProps,
|
|
|
|
...getEntryProps(entry, index)
|
|
|
|
},
|
|
|
|
on: this.$props.entryListeners
|
2019-02-14 06:30:12 +11:00
|
|
|
}
|
2019-02-14 14:52:57 +11:00
|
|
|
return <ItemComponent {...props} />
|
2019-02-14 06:30:12 +11:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
},
|
2019-02-14 12:59:26 +11:00
|
|
|
props: ['entries', 'entryProps', 'entryListeners']
|
2019-02-14 06:30:12 +11:00
|
|
|
})
|
2019-02-14 14:52:57 +11:00
|
|
|
)
|
2019-02-14 06:30:12 +11:00
|
|
|
|
|
|
|
export default withList
|