Support extra props and data-source in to whole object source. #176 #177

Author: tangbc

README.md

@@ -61,6 +61,7 @@ Since the `v2.0` is **not compatible** with `v1.x`, please note before upgrading
 npm install vue-virtual-scroll-list --save
 ```
 
+Root component is:
 ```vue
 <template>
   <div>
@@ -70,26 +71,49 @@ npm install vue-virtual-scroll-list --save
       :data-key="'uid'"
       :data-sources="items"
       :data-component="itemComponent"
+      :extra-props="{ otherPropValue: otherDataAssginToItemComponet }"
     />
   </div>
 </template>
-
 <script>
   import Item from './Item'
   import VirtualList from 'vue-virtual-scroll-list'
 
   export default {
+    name: 'root',
     data () {
       return {
         itemComponent: Item,
-        items: [ {uid: 'unique_1'}, {uid: 'unique_2'}, ... ]
+        items: [{uid: 'unique_1', text: 'abc'}, {uid: 'unique_2', text: 'xyz'}, ...],
+        otherDataAssginToItemComponet: 'The Progressive JavaScript Framework',
       }
     },
     components: { 'virtual-list': VirtualList }
   }
 </script>
 ```
 
+Item component is:
+```vue
+<template>
+  <div>{{ source.text }} - {{ otherPropValue }}</div>
+</template>
+<script>
+  export default {
+    name: 'item-component',
+    props: {
+      source: { // here is: {uid: 'unique_1', text: 'abc'}
+        type: Object,
+        default () {
+          return {}
+        }
+      },
+      otherPropValue: String // here is: 'The Progressive JavaScript Framework'
+    }
+  }
+</script>
+```
+
 More usages or getting start you can refer to these clearly [examples](https://tangbc.github.com/vue-virtual-scroll-list).
 
 
@@ -103,12 +127,13 @@ More usages or getting start you can refer to these clearly [examples](https://t
 | `keeps`          | Number        | How many items you are expecting the list to keep rendering in the real dom.                                                                      |
 | `data-key`       | String        | The unique key get from `data-sources` in each data object, its value **must be unique** in `data-sources`, it is used for identifying item size. |
 | `data-sources`   | Array[Object] | The source array built for list, each array data must be an object and has an unique key for `data-key` property.                                 |
-| `data-component` | Component     | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render props.                          |
+| `data-component` | Component     | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render prop and named: `source`.       |
 
 ### Optional props
 
 | **&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;** | **Type** | **Default** | **Description**                                                             |
-|--------------------|----------|-------------|------------------------------------------------------------------------|
+|--------------------|----------|----------|---------------------------------------------------------------------------|
+| `extra-props`      | Object   | {}       | Extra props assign to item component.                                     |
 | `root-tag`         | String   | div      | Root element tag name.                                                    |
 | `wrap-tag`         | String   | div      | List wrapper element tag name.                                            |
 | `item-tag`         | String   | div      | Item wrapper element tag name.                                            |

dist/index.js

@@ -34,6 +34,55 @@
     return Constructor;
   }
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
   /**
    * virtual list core calculating center.
    */
@@ -382,6 +431,9 @@
       type: Object,
       require: true
     },
+    extraProps: {
+      type: Object
+    },
     rootTag: {
       type: String,
       "default": 'div'
@@ -462,14 +514,17 @@
     },
     uniqueKey: {
       type: String
+    },
+    extraProps: {
+      type: Object
     }
   };
   var SlotProps = {
     event: {
       type: String
     },
     uniqueKey: {
-      String: String
+      type: String
     },
     tag: {
       type: String
@@ -479,10 +534,6 @@
     }
   };
 
-  /**
-   * item and slot component both use similar wrapper
-   * we need to know their size change at any time.
-   */
   var Wrapper = {
     created: function created() {
       this.hasInitial = false;
@@ -530,9 +581,9 @@
       return h(this.tag, {
         role: 'item'
       }, [h(this.component, {
-        props: {
-          data: this.source
-        }
+        props: _objectSpread2({}, this.extraProps, {
+          source: this.source
+        })
       })]);
     }
   }); // wrapping for slot.
@@ -695,6 +746,7 @@
                 horizontal: this.isHorizontal,
                 uniqueKey: dataSource[this.dataKey],
                 source: dataSource,
+                extraProps: this.extraProps,
                 component: this.dataComponent
               }
             }));

example/src/views/dynamic-size/Item.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="item-inner">
     <div class="head">
-      <span># {{ index }}</span>
-      <span>{{ name }}</span>
+      <span># {{ source.index }}</span>
+      <span>{{ source.name }}</span>
     </div>
-    <div class="desc">{{ desc }}</div>
+    <div class="desc">{{ source.desc }}</div>
   </div>
 </template>
 
@@ -14,9 +14,12 @@ export default {
   name: 'dynamic-size-item',
 
   props: {
-    index: Number,
-    name: String,
-    desc: String
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
   }
 }
 </script>

example/src/views/fixed-size/Item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="item-inner">
-    <span># {{ index }}</span>
-    <span>{{ name }}</span>
+    <span># {{ source.index }}</span>
+    <span>{{ source.name }}</span>
   </div>
 </template>
 
@@ -11,8 +11,12 @@ export default {
   name: 'fix-size-item',
 
   props: {
-    index: Number,
-    name: String
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
   }
 }
 </script>

example/src/views/horizontal/Item.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="item-inner" v-bind:style="{width: size + 'px'}">
-    <div class="index"># {{ index }}</div>
-    <div class="size">{{ size }}</div>
+  <div class="item-inner" v-bind:style="{width: source.size + 'px'}">
+    <div class="index"># {{ source.index }}</div>
+    <div class="size">{{ source.size }}</div>
   </div>
 </template>
 
@@ -11,9 +11,12 @@ export default {
   name: 'horizontal-item',
 
   props: {
-    index: Number,
-    name: String,
-    size: Number
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
   }
 }
 </script>

example/src/views/infinite-loading/Item.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="item-inner">
     <div class="head">
-      <span class="index"># {{ index }}</span>
-      <span class="name">{{ name }}</span>
+      <span class="index"># {{ source.index }}</span>
+      <span class="name">{{ source.name }}</span>
     </div>
-    <div class="desc">{{ desc }}</div>
+    <!-- <div class="desc">{{ source.desc }}</div> -->
   </div>
 </template>
 
@@ -14,18 +14,21 @@ export default {
   name: 'infinite-loading-item',
 
   props: {
-    index: Number,
-    name: String,
-    desc: String
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .item-inner {
-  .head {
-    font-weight: 500;
-  }
+  // .head {
+  //   font-weight: 500;
+  // }
   .index {
     margin-right: 1em;
   }

example/src/views/keep-state/Item.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="item-inner">
-    <span class="index"># {{ index }}</span>
-    <input class="checkbox" v-bind:checked="checked" @change="onChange" type="checkbox" />
-    <span class="name" @click="onClickName">{{ name }}</span>
+    <span class="index"># {{ source.index }}</span>
+    <input class="checkbox" v-bind:checked="source.checked" @change="onChange" type="checkbox" />
+    <span class="name" @click="onClickName">{{ source.name }}</span>
   </div>
 </template>
 
@@ -15,10 +15,12 @@ export default {
   mixins: [mixins],
 
   props: {
-    id: String,
-    index: Number,
-    name: String,
-    checked: Boolean
+    source: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
   },
 
   methods: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-scroll-list",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A vue component support big amount data list with high scroll performance.",
   "main": "dist/index.js",
   "files": [

src/index.js

@@ -159,6 +159,7 @@ const VirtualList = Vue.component(NAME, {
               horizontal: this.isHorizontal,
               uniqueKey: dataSource[this.dataKey],
               source: dataSource,
+              extraProps: this.extraProps,
               component: this.dataComponent
             }
           }))

src/item.js

@@ -58,7 +58,10 @@ export const Item = Vue.component('virtual-list-item', {
     return h(this.tag, {
       role: 'item'
     }, [h(this.component, {
-      props: { data: this.source }
+      props: {
+        ...this.extraProps,
+        source: this.source
+      }
     })])
   }
 })