fixed error when rendering subgrids (due to unique keys)

GriddleGriddle · Jan 14, 2016 · 3de1b01 · 3de1b01
1 parent 3597fd7
commit 3de1b01
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 56 deletions.
diff --git a/build/griddle.js b/build/griddle.js
@@ -993,12 +993,25 @@ return /******/ (function(modules) { // webpackBootstrap
 	          anyHasChildren = hasChildren;
 	        }
 
-	        return React.createElement(GridRowContainer, { useGriddleStyles: that.props.useGriddleStyles, isSubGriddle: that.props.isSubGriddle,
-	          parentRowExpandedClassName: that.props.parentRowExpandedClassName, parentRowCollapsedClassName: that.props.parentRowCollapsedClassName,
-	          parentRowExpandedComponent: that.props.parentRowExpandedComponent, parentRowCollapsedComponent: that.props.parentRowCollapsedComponent,
-	          data: row, key: uniqueId + '-container', uniqueId: uniqueId, columnSettings: that.props.columnSettings, rowSettings: that.props.rowSettings, paddingHeight: that.props.paddingHeight,
+	        return React.createElement(GridRowContainer, {
+	          useGriddleStyles: that.props.useGriddleStyles,
+	          isSubGriddle: that.props.isSubGriddle,
+	          parentRowExpandedClassName: that.props.parentRowExpandedClassName,
+	          parentRowCollapsedClassName: that.props.parentRowCollapsedClassName,
+	          parentRowExpandedComponent: that.props.parentRowExpandedComponent,
+	          parentRowCollapsedComponent: that.props.parentRowCollapsedComponent,
+	          data: row,
+	          key: uniqueId + '-container',
+	          uniqueId: uniqueId,
+	          columnSettings: that.props.columnSettings,
+	          rowSettings: that.props.rowSettings,
+	          paddingHeight: that.props.paddingHeight,
 	          multipleSelectionSettings: that.props.multipleSelectionSettings,
-	          rowHeight: that.props.rowHeight, hasChildren: hasChildren, tableClassName: that.props.className, onRowClick: that.props.onRowClick });
+	          rowHeight: that.props.rowHeight,
+	          hasChildren: hasChildren,
+	          tableClassName: that.props.className,
+	          onRowClick: that.props.onRowClick
+	        });
 	      });
 
 	      // no data section
@@ -1400,7 +1413,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      hasChildren: that.props.hasChildren,
 	      toggleChildren: that.toggleChildren,
 	      showChildren: that.state.showChildren,
-	      key: that.props.uniqueId,
+	      key: that.props.uniqueId + '_base_row',
 	      useGriddleIcons: that.props.useGriddleIcons,
 	      parentRowExpandedClassName: this.props.parentRowExpandedClassName,
 	      parentRowCollapsedClassName: this.props.parentRowCollapsedClassName,
@@ -1409,23 +1422,44 @@ return /******/ (function(modules) { // webpackBootstrap
 	      paddingHeight: that.props.paddingHeight,
 	      rowHeight: that.props.rowHeight,
 	      onRowClick: that.props.onRowClick,
-	      multipleSelectionSettings: this.props.multipleSelectionSettings }));
+	      multipleSelectionSettings: this.props.multipleSelectionSettings
+	    }));
 
 	    var children = null;
 
 	    if (that.state.showChildren) {
 	      children = that.props.hasChildren && this.props.data["children"].map(function (row, index) {
+	        var key = that.props.rowSettings.getRowKey(row, index);
+
 	        if (typeof row["children"] !== "undefined") {
 	          var Griddle = __webpack_require__(1);
-	          return React.createElement('tr', { style: { paddingLeft: 5 } }, React.createElement('td', { colSpan: that.props.columnSettings.getVisibleColumnCount(), className: 'griddle-parent', style: that.props.useGriddleStyles ? { border: "none", "padding": "0 0 0 5px" } : null }, React.createElement(Griddle, { isSubGriddle: true, results: [row], columns: that.props.columnSettings.getColumns(), tableClassName: that.props.tableClassName, parentRowExpandedClassName: that.props.parentRowExpandedClassName,
+	          return React.createElement('tr', { key: key, style: { paddingLeft: 5 } }, React.createElement('td', { colSpan: that.props.columnSettings.getVisibleColumnCount(), className: 'griddle-parent', style: that.props.useGriddleStyles ? { border: "none", "padding": "0 0 0 5px" } : null }, React.createElement(Griddle, {
+	            rowMetadata: { key: 'id' },
+	            isSubGriddle: true,
+	            results: [row],
+	            columns: that.props.columnSettings.getColumns(),
+	            tableClassName: that.props.tableClassName,
+	            parentRowExpandedClassName: that.props.parentRowExpandedClassName,
 	            parentRowCollapsedClassName: that.props.parentRowCollapsedClassName,
-	            showTableHeading: false, showPager: false, columnMetadata: that.props.columnSettings.columnMetadata,
+	            showTableHeading: false,
+	            showPager: false,
+	            columnMetadata: that.props.columnSettings.columnMetadata,
 	            parentRowExpandedComponent: that.props.parentRowExpandedComponent,
 	            parentRowCollapsedComponent: that.props.parentRowCollapsedComponent,
-	            paddingHeight: that.props.paddingHeight, rowHeight: that.props.rowHeight })));
+	            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, index) });
+	        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: key
+	        });
 	      });
 	    }
 
@@ -1458,6 +1492,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    this.rowMetadata = rowMetadata;
 	    this.rowComponent = rowComponent;
 	    this.isCustom = isCustom;
+	    // assign unique Id to each griddle instance
+	    this.gridId = _.uniqueId();
 	  }
 
 	  _createClass(RowProperties, [{
@@ -1468,10 +1504,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (this.hasRowMetadataKey()) {
 	        uniqueId = row[this.rowMetadata.key];
 	      } else {
-	        // commented because of that issue related to rerendering table
-	        // https://github.com/facebook/react/issues/2410
-	        // uniqueId = _.uniqueId("grid_row");
-	        uniqueId = "grid_row_" + key;
+	        uniqueId = 'grid_' + this.gridId + '_row_' + key;
 	      }
 
 	      //todo: add error handling

diff --git a/scripts/gridRowContainer.jsx b/scripts/gridRowContainer.jsx
@@ -53,47 +53,73 @@ var GridRowContainer = React.createClass({
 
       var columns = this.props.columnSettings.getColumns();
 
-      arr.push(<this.props.rowSettings.rowComponent
-        useGriddleStyles={this.props.useGriddleStyles}
-        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}
-        rowSettings={this.props.rowSettings}
-        hasChildren={that.props.hasChildren}
-        toggleChildren={that.toggleChildren}
-        showChildren={that.state.showChildren}
-        key={that.props.uniqueId}
-        useGriddleIcons={that.props.useGriddleIcons}
-        parentRowExpandedClassName={this.props.parentRowExpandedClassName}
-        parentRowCollapsedClassName={this.props.parentRowCollapsedClassName}
-        parentRowExpandedComponent={this.props.parentRowExpandedComponent}
-        parentRowCollapsedComponent={this.props.parentRowCollapsedComponent}
-        paddingHeight={that.props.paddingHeight}
-        rowHeight={that.props.rowHeight}
-        onRowClick={that.props.onRowClick}
-	    multipleSelectionSettings={this.props.multipleSelectionSettings} />
+      arr.push(
+        <this.props.rowSettings.rowComponent
+            useGriddleStyles={this.props.useGriddleStyles}
+            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}
+            rowSettings={this.props.rowSettings}
+            hasChildren={that.props.hasChildren}
+            toggleChildren={that.toggleChildren}
+            showChildren={that.state.showChildren}
+            key={that.props.uniqueId + '_base_row'}
+            useGriddleIcons={that.props.useGriddleIcons}
+            parentRowExpandedClassName={this.props.parentRowExpandedClassName}
+            parentRowCollapsedClassName={this.props.parentRowCollapsedClassName}
+            parentRowExpandedComponent={this.props.parentRowExpandedComponent}
+            parentRowCollapsedComponent={this.props.parentRowCollapsedComponent}
+            paddingHeight={that.props.paddingHeight}
+            rowHeight={that.props.rowHeight}
+            onRowClick={that.props.onRowClick}
+    	      multipleSelectionSettings={this.props.multipleSelectionSettings}
+        />
       );
 
       var children = null;
 
       if(that.state.showChildren){
           children =  that.props.hasChildren && this.props.data["children"].map(function(row, index){
+              var key = that.props.rowSettings.getRowKey(row, index);
+
               if(typeof row["children"] !== "undefined"){
                 var Griddle = require('./griddle.jsx');
-                return (<tr style={{paddingLeft: 5}}>
-                          <td colSpan={that.props.columnSettings.getVisibleColumnCount()} className="griddle-parent" style={that.props.useGriddleStyles ? {border: "none", "padding": "0 0 0 5px"} : null}>
-                            <Griddle isSubGriddle={true} results={[row]} columns={that.props.columnSettings.getColumns()} tableClassName={that.props.tableClassName} parentRowExpandedClassName={that.props.parentRowExpandedClassName}
-                              parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
-                              showTableHeading={false} showPager={false} columnMetadata={that.props.columnSettings.columnMetadata}
-                              parentRowExpandedComponent={that.props.parentRowExpandedComponent}
-                              parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
-                              paddingHeight={that.props.paddingHeight} rowHeight={that.props.rowHeight} />
-                          </td>
-                        </tr>);
+                return (
+                  <tr key={key} style={{paddingLeft: 5}}>
+                    <td colSpan={that.props.columnSettings.getVisibleColumnCount()} className="griddle-parent" style={that.props.useGriddleStyles ? {border: "none", "padding": "0 0 0 5px"} : null}>
+                      <Griddle
+                          rowMetadata={{key: 'id'}}
+                          isSubGriddle={true}
+                          results={[row]}
+                          columns={that.props.columnSettings.getColumns()}
+                          tableClassName={that.props.tableClassName}
+                          parentRowExpandedClassName={that.props.parentRowExpandedClassName}
+                          parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
+                          showTableHeading={false}
+                          showPager={false}
+                          columnMetadata={that.props.columnSettings.columnMetadata}
+                          parentRowExpandedComponent={that.props.parentRowExpandedComponent}
+                          parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
+                          paddingHeight={that.props.paddingHeight}
+                          rowHeight={that.props.rowHeight}
+                      />
+                    </td>
+                  </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, index)} />
+              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={key}
+                />
+              );
           });
       }
 

diff --git a/scripts/gridTable.jsx b/scripts/gridTable.jsx
@@ -138,12 +138,27 @@ var GridTable = React.createClass({
           //at least one item in the group has children.
           if (hasChildren) { anyHasChildren = hasChildren; }
 
-          return (<GridRowContainer useGriddleStyles={that.props.useGriddleStyles} isSubGriddle={that.props.isSubGriddle}
-            parentRowExpandedClassName={that.props.parentRowExpandedClassName} parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
-            parentRowExpandedComponent={that.props.parentRowExpandedComponent} parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
-            data={row} key={uniqueId + '-container'} uniqueId={uniqueId} columnSettings={that.props.columnSettings} rowSettings={that.props.rowSettings} paddingHeight={that.props.paddingHeight}
-		    multipleSelectionSettings={that.props.multipleSelectionSettings}
-            rowHeight={that.props.rowHeight} hasChildren={hasChildren} tableClassName={that.props.className} onRowClick={that.props.onRowClick} />)
+          return (
+            <GridRowContainer
+                useGriddleStyles={that.props.useGriddleStyles}
+                isSubGriddle={that.props.isSubGriddle}
+                parentRowExpandedClassName={that.props.parentRowExpandedClassName}
+                parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
+                parentRowExpandedComponent={that.props.parentRowExpandedComponent}
+                parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
+                data={row}
+                key={uniqueId + '-container'}
+                uniqueId={uniqueId}
+                columnSettings={that.props.columnSettings}
+                rowSettings={that.props.rowSettings}
+                paddingHeight={that.props.paddingHeight}
+		            multipleSelectionSettings={that.props.multipleSelectionSettings}
+                rowHeight={that.props.rowHeight}
+                hasChildren={hasChildren}
+                tableClassName={that.props.className}
+                onRowClick={that.props.onRowClick}
+            />
+          )
       });
 
       // no data section

diff --git a/scripts/rowProperties.js b/scripts/rowProperties.js
@@ -5,6 +5,8 @@ class RowProperties{
     this.rowMetadata = rowMetadata;
     this.rowComponent = rowComponent;
     this.isCustom = isCustom;
+    // assign unique Id to each griddle instance
+    this.gridId = _.uniqueId();
   }
 
   getRowKey(row, key) {
@@ -14,10 +16,7 @@ class RowProperties{
       uniqueId = row[this.rowMetadata.key];
     }
     else{
-      // commented because of that issue related to rerendering table
-      // https://github.com/facebook/react/issues/2410
-      // uniqueId = _.uniqueId("grid_row");
-      uniqueId = "grid_row_" + key;
+      uniqueId = 'grid_' + this.gridId + '_row_' + key;
     }
 
     //todo: add error handling