Merge pull request #21 from FallingCeilingS/v0.1.7/update-get-node-key-document

Update document for getNodeKey

Author: jchen042

README.md

@@ -96,7 +96,7 @@ Here are props that are identical in both `VirtualisedList` and `VirtualisedTree
 |scrollBehaviour|`String`||`auto`|Inherited from [`ScrollToOptions.behavior`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior) that specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. Value is an enum, which can be one of the following: <ul><li>`smooth`: The scrolling animates smoothly.</li><li>`auto`: The scrolling happens in a single jump. </li></ul>|
 |tolerance|`Number`||`2`|Padding of nodes outside of the viewport to allow for smooth scrolling.|
 |getNodeHeight|`GetNodeHeight`||`(node) => 40`|A function that takes the current node as a parameter, and returns the height (px) of the node. <div>e.g. `(node) => 30 + (node.index % 10)`</div>|
-|getNodeKey|`GetNodeKey`|||A function that takes the current node and the index of the node in the virtual scroller as parameters, and returns the key of the node. Key is a unique identifier for the virtualised scroller. <div>e.g. `(node, index) => node.key`</div>|
+|getNodeKey|`GetNodeKey`|||A function that takes the current node and the index of the node in the virtual scroller as parameters, and returns the value of `key` prop of the node renderer. Key is a unique identifier for the virtualised scroller. <div>e.g. `(node, index) => node.key`</div><div>Note that the return value is not necessarily the same as `node.key`, and it is used to identify each Vue list element.</div>|
 |cellRenderer|`CellRenderer`|||A function that takes the current node and its current index in the virtualised scroller as parameters, and returns an array of Children VNodes, built using [`h()`](https://v3.vuejs.org/guide/render-function.html#h-arguments), or using strings to get "text VNodes" or an object with slots. If this prop is specified, the `cell` slot in the template will be override. <div>e.g. `(node, index) => [h("div", {style: {height: "100%"}}, node.name)]`</div>|
 
 ### `VirtualisedList` props
@@ -133,7 +133,7 @@ Slots are provided for rendering content dynamically. Here are slots that are id
 
 |Slot|Props|Description|
 |---|---|---|
-|cell|<ul><li>`node`: The current node for rendering with type `NodeModel`.<ul><li>`index`: The current index of the node in `children` of its parent node.</li><li>`parents`: An array of indices of all parent nodes ordered from the root node.</li><li>`key`: A unique identifier of the node.</li><li>`name`: The name of the node.</li><li>`state`: An object stores states of each node.<ul><li>`expanded`: shows children of the node if `true`, or hides them if `false`.</li><li>`isLeaf`: A boolean that indicates if the current node is the leaf node.</li></ul></li><li>`children`: An array of child nodes belonging to the node.</li></ul></li><li>`index`: The current node's index in the rendered content.</li></ul>|The slot for rendering a single node in the content. If `cellRenderer` props is specified, this slot won't have effect.|
+|cell|<ul><li>`node`: The current node for rendering with type `NodeModel`.<ul><li>`index`: The current index of the node in `children` of its parent node.</li><li>`parents`: An array of indices of all parent nodes ordered from the root node.</li><li>`key`: A unique identifier of the node, consists of the node's path. e.g. The node with the path `[0, 1]` has the key of `0,1`.</li><li>`name`: The name of the node.</li><li>`state`: An object stores states of each node.<ul><li>`expanded`: shows children of the node if `true`, or hides them if `false`.</li><li>`isLeaf`: A boolean that indicates if the current node is the leaf node.</li></ul></li><li>`children`: An array of child nodes belonging to the node.</li></ul></li><li>`index`: The current node's index in the rendered content.</li></ul>|The slot for rendering a single node in the content. If `cellRenderer` props is specified, this slot won't have effect.|
 
 ### `VirtualisedTree` slots
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtualised",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "description": "Vue components developed by Vue.js 3.0 for efficiently rendering large scrollable lists and hierarchical data. vue-virtualised is able to render and update 1 million nodes within a few seconds in front-end.",
   "author": {

src/utils/nodesHelper.ts

@@ -26,7 +26,6 @@ const constructBfsTraverseStack = (
   for (let index = nodes.length - 1; index >= 0; index--) {
     const node = <NodeModel>nodes[index];
 
-    // TODO: accept client specified key in the future
     node.key = parents.concat(index).toString();
     node.parents = parents;
     node.index = index;