changed keys for rows to fix facebook/react#2410

GriddleGriddle · Jan 13, 2016 · cb54f35 · cb54f35
1 parent bbc9229
commit cb54f35
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/build/griddle.js b/build/griddle.js
@@ -785,7 +785,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return myReturn;
 	    },
 	    shouldShowNoDataSection: function shouldShowNoDataSection(results) {
-	        return this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0) || this.props.useExternal === true && this.props.externalIsLoading === false && results.length === 0;
+	        // known issue https://github.com/GriddleGriddle/Griddle/issues/274
+	        // return (this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0 )) ||
+	        //     (this.props.useExternal === true && this.props.externalIsLoading === false && results.length === 0)
+	        return false;
 	    },
 	    render: function render() {
 	        var that = this,
@@ -990,7 +993,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      var nodes = nodeData.map(function (row, index) {
 	        var hasChildren = typeof row["children"] !== "undefined" && row["children"].length > 0;
-	        var uniqueId = that.props.rowSettings.getRowKey(row);
+	        var uniqueId = that.props.rowSettings.getRowKey(row, index);
 
 	        //at least one item in the group has children.
 	        if (hasChildren) {
@@ -1424,7 +1427,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            paddingHeight: that.props.paddingHeight, rowHeight: that.props.rowHeight })));
 	        }
 
-	        return React.createElement(that.props.rowSettings.rowComponent, { useGriddleStyles: that.props.useGriddleStyles, isSubGriddle: that.props.isSubGriddle, data: row, columnSettings: that.props.columnSettings, isChildRow: true, columnMetadata: that.props.columnSettings.columnMetadata, key: that.props.rowSettings.getRowKey(row) });
+	        return React.createElement(that.props.rowSettings.rowComponent, { useGriddleStyles: that.props.useGriddleStyles, isSubGriddle: that.props.isSubGriddle, data: row, columnSettings: that.props.columnSettings, isChildRow: true, columnMetadata: that.props.columnSettings.columnMetadata, key: that.props.rowSettings.getRowKey(row, index) });
 	      });
 	    }
 
@@ -1461,13 +1464,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	  _createClass(RowProperties, [{
 	    key: 'getRowKey',
-	    value: function getRowKey(row) {
+	    value: function getRowKey(row, key) {
 	      var uniqueId;
 
 	      if (this.hasRowMetadataKey()) {
 	        uniqueId = row[this.rowMetadata.key];
 	      } else {
-	        uniqueId = _.uniqueId("grid_row");
+	        // commented because of that issue related to rerendering table
+	        // https://github.com/facebook/react/issues/2410
+	        // uniqueId = _.uniqueId("grid_row");
+	        uniqueId = "grid_row_" + key;
 	      }
 
 	      //todo: add error handling

diff --git a/scripts/gridRowContainer.jsx b/scripts/gridRowContainer.jsx
@@ -53,9 +53,9 @@ var GridRowContainer = React.createClass({
 
       var columns = this.props.columnSettings.getColumns();
 
-      arr.push(<this.props.rowSettings.rowComponent 
+      arr.push(<this.props.rowSettings.rowComponent
         useGriddleStyles={this.props.useGriddleStyles}
-        isSubGriddle={this.props.isSubGriddle} 
+        isSubGriddle={this.props.isSubGriddle}
         data={this.props.rowSettings.isCustom ? _.pick(this.props.data, columns) : this.props.data}
         rowData={this.props.rowSettings.isCustom ? this.props.data : null }
         columnSettings={this.props.columnSettings}
@@ -93,7 +93,7 @@ var GridRowContainer = React.createClass({
                         </tr>);
               }
 
-              return <that.props.rowSettings.rowComponent useGriddleStyles={that.props.useGriddleStyles} isSubGriddle={that.props.isSubGriddle} data={row} columnSettings={that.props.columnSettings} isChildRow={true} columnMetadata={that.props.columnSettings.columnMetadata} key={that.props.rowSettings.getRowKey(row)} />
+              return <that.props.rowSettings.rowComponent useGriddleStyles={that.props.useGriddleStyles} isSubGriddle={that.props.isSubGriddle} data={row} columnSettings={that.props.columnSettings} isChildRow={true} columnMetadata={that.props.columnSettings.columnMetadata} key={that.props.rowSettings.getRowKey(row, index)} />
           });
       }
 

diff --git a/scripts/gridTable.jsx b/scripts/gridTable.jsx
@@ -133,7 +133,7 @@ var GridTable = React.createClass({
 
       var nodes = nodeData.map(function(row, index){
           var hasChildren = (typeof row["children"] !== "undefined") && row["children"].length > 0;
-          var uniqueId = that.props.rowSettings.getRowKey(row);
+          var uniqueId = that.props.rowSettings.getRowKey(row, index);
 
           //at least one item in the group has children.
           if (hasChildren) { anyHasChildren = hasChildren; }

diff --git a/scripts/rowProperties.js b/scripts/rowProperties.js
@@ -7,14 +7,17 @@ class RowProperties{
     this.isCustom = isCustom;
   }
 
-  getRowKey(row) {
+  getRowKey(row, key) {
     var uniqueId;
 
     if(this.hasRowMetadataKey()){
       uniqueId = row[this.rowMetadata.key];
     }
     else{
-      uniqueId = _.uniqueId("grid_row");
+      // commented because of that issue related to rerendering table
+      // https://github.com/facebook/react/issues/2410
+      // uniqueId = _.uniqueId("grid_row");
+      uniqueId = "grid_row_" + key;
     }
 
     //todo: add error handling