From 4ccd7ac6f9bc2f6faaf02affd1ed2ec7954320a1 Mon Sep 17 00:00:00 2001
From: docoder <docoder@163.com>
Date: Fri, 30 Dec 2016 14:41:46 +0800
Subject: [PATCH 1/2] Add multiple context menus feature when multiple table in
 one page

---
 src/Canvas.js                  |  5 ++++-
 src/Grid.js                    |  5 ++++-
 src/ReactDataGrid.js           |  6 ++++--
 src/RowsContainer.js           | 11 +++++++++--
 src/Viewport.js                |  5 ++++-
 src/addons/menu/ContextMenu.js |  6 ++++--
 6 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/Canvas.js b/src/Canvas.js
index 3d3e8656fe..a2df63b7f8 100644
--- a/src/Canvas.js
+++ b/src/Canvas.js
@@ -59,7 +59,8 @@ const Canvas = React.createClass({
       })
     ]),
     rowGroupRenderer: React.PropTypes.func,
-    isScrolling: React.PropTypes.bool
+    isScrolling: React.PropTypes.bool,
+    identifier: PropTypes.string // docoder--add
   },
 
   getDefaultProps() {
@@ -349,7 +350,9 @@ const Canvas = React.createClass({
         style={style}
         onScroll={this.onScroll}
         className={joinClasses('react-grid-Canvas', this.props.className, { opaque: this.props.cellMetaData.selected && this.props.cellMetaData.selected.active }) }>
+        {/* docoder--add: identifier */}
         <RowsContainer
+          identifier={this.props.identifier}
           width={this.props.width}
           rows={rows}
           contextMenu={this.props.contextMenu}
diff --git a/src/Grid.js b/src/Grid.js
index 43a3ddce1b..ca2af728b8 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -53,7 +53,8 @@ const Grid = React.createClass({
     draggableHeaderCell: PropTypes.func,
     getValidFilterValues: PropTypes.func,
     rowGroupRenderer: PropTypes.func,
-    overScan: PropTypes.object
+    overScan: PropTypes.object,
+    id: PropTypes.string // docoder--add
   },
 
   mixins: [
@@ -99,8 +100,10 @@ const Grid = React.createClass({
           />
           {this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) ?
             <div ref="viewPortContainer" tabIndex="0" onKeyDown={this.props.onViewportKeydown} onKeyUp={this.props.onViewportKeyup} onDoubleClick={this.props.onViewportDoubleClick}   onDragStart={this.props.onViewportDragStart} onDragEnd={this.props.onViewportDragEnd}>
+                {/* docoder--add: identifier */}
                 <Viewport
                   ref="viewport"
+                  identifier={this.props.id}
                   rowKey={this.props.rowKey}
                   width={this.props.columnMetrics.width}
                   rowHeight={this.props.rowHeight}
diff --git a/src/ReactDataGrid.js b/src/ReactDataGrid.js
index 6d3ed12152..c7b0b5b738 100644
--- a/src/ReactDataGrid.js
+++ b/src/ReactDataGrid.js
@@ -106,7 +106,8 @@ const ReactDataGrid = React.createClass({
     rowActionsCell: React.PropTypes.func,
     onCheckCellIsEditable: React.PropTypes.func,
     /* called before cell is set active, returns a boolean to determine whether cell is editable */
-    overScan: React.PropTypes.object
+    overScan: React.PropTypes.object,
+    id: React.PropTypes.string  // docoder--add
   },
 
   getDefaultProps(): {enableCellSelect: boolean} {
@@ -124,7 +125,8 @@ const ReactDataGrid = React.createClass({
         colsEnd: 5,
         rowsStart: 5,
         rowsEnd: 5
-      }
+      },
+      id: 'ReactDataGrid'  // docoder--add
     };
   },
 
diff --git a/src/RowsContainer.js b/src/RowsContainer.js
index 024271665c..37ce6f4106 100644
--- a/src/RowsContainer.js
+++ b/src/RowsContainer.js
@@ -28,7 +28,10 @@ class RowsContainer extends React.Component {
       if (!this.plugins) {
         throw new Error('You need to include ReactDataGrid UiPlugins in order to initialise context menu');
       }
-      return this.plugins.Menu.ContextMenuLayer('reactDataGridContextMenu')(SimpleRowsContainer);
+      // docoder---
+      // return this.plugins.Menu.ContextMenuLayer('reactDataGridContextMenu')(SimpleRowsContainer);
+      return this.plugins.Menu.ContextMenuLayer(this.props.identifier)(SimpleRowsContainer);
+      // docoder--end
     }
   }
 
@@ -38,7 +41,10 @@ class RowsContainer extends React.Component {
 
   renderRowsWithContextMenu() {
     let ContextMenuRowsContainer = this.state.ContextMenuContainer;
-    let newProps = {rowIdx: this.props.rowIdx, idx: this.props.idx};
+    // docoder---
+    // let newProps = {rowIdx: this.props.rowIdx, idx: this.props.idx};
+    let newProps = {rowIdx: this.props.rowIdx, idx: this.props.idx, identifier: this.props.identifier};
+    // docoder--end
     let contextMenu = React.cloneElement(this.props.contextMenu, newProps);
     // Initialise the context menu if it is available
     return (<div><ContextMenuRowsContainer {...this.props} />{contextMenu}</div>);
@@ -53,6 +59,7 @@ RowsContainer.propTypes = {
   contextMenu: PropTypes.element,
   rowIdx: PropTypes.number,
   idx: PropTypes.number,
+  identifier: PropTypes.string,  // docoder--add
   window: PropTypes.object
 };
 
diff --git a/src/Viewport.js b/src/Viewport.js
index 6b215a2b57..e5d56372b3 100644
--- a/src/Viewport.js
+++ b/src/Viewport.js
@@ -39,7 +39,8 @@ const Viewport = React.createClass({
     rowScrollTimeout: PropTypes.number,
     contextMenu: PropTypes.element,
     getSubRowDetails: PropTypes.func,
-    rowGroupRenderer: PropTypes.func
+    rowGroupRenderer: PropTypes.func,
+    identifier: PropTypes.string  // docoder--add
   },
 
   onScroll(scroll: {scrollTop: number; scrollLeft: number}) {
@@ -77,8 +78,10 @@ const Viewport = React.createClass({
       <div
         className="react-grid-Viewport"
         style={style}>
+        {/* docoder--add: identifier */}
         <Canvas
           ref="canvas"
+          identifier={this.props.identifier}
           rowKey={this.props.rowKey}
           totalWidth={this.props.totalWidth}
           width={this.props.columnMetrics.width}
diff --git a/src/addons/menu/ContextMenu.js b/src/addons/menu/ContextMenu.js
index 26ce61f0a7..5ec1063138 100644
--- a/src/addons/menu/ContextMenu.js
+++ b/src/addons/menu/ContextMenu.js
@@ -3,8 +3,9 @@ import {ContextMenu} from 'react-contextmenu';
 
 class ReactDataGridContextMenu extends React.Component {
   render() {
+    // docoder--change: identifier ("reactDataGridContextMenu" -> {this.props.identifier})
     return (
-      <ContextMenu identifier="reactDataGridContextMenu">
+      <ContextMenu identifier={this.props.identifier}>
         {this.props.children}
       </ContextMenu>
     );
@@ -12,7 +13,8 @@ class ReactDataGridContextMenu extends React.Component {
 }
 
 ReactDataGridContextMenu.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  identifier: PropTypes.string // docoder--add
 };
 
 export default ReactDataGridContextMenu;

From e7cb7fa02fba4cf073a31b44915290cefd5a4d2b Mon Sep 17 00:00:00 2001
From: docoder <docoder@163.com>
Date: Fri, 30 Dec 2016 14:48:28 +0800
Subject: [PATCH 2/2] Fix Context Menu Example for multiple context menus
 feature

---
 examples/scripts/example18-context-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/scripts/example18-context-menu.js b/examples/scripts/example18-context-menu.js
index 2c9bd8d177..a1c7381cb5 100644
--- a/examples/scripts/example18-context-menu.js
+++ b/examples/scripts/example18-context-menu.js
@@ -90,7 +90,7 @@ var MyContextMenu = React.createClass({
   },
   render: function() {
     return (
-      <ContextMenu>
+      <ContextMenu identifier={this.props.identifier}>
         <MenuItem data={{rowIdx: this.props.rowIdx, idx: this.props.idx}} onClick={this.onRowDelete}>Delete Row</MenuItem>
         <SubMenu title="Insert Row">
           <MenuItem data={{rowIdx: this.props.rowIdx, idx: this.props.idx}} onClick={this.onRowInsertAbove}>Above</MenuItem>