Merge pull request #462 from goooseman/master

onRowMouseEnter and onRowMouseLeave Griddle events
GriddleGriddle · Feb 19, 2017 · 1e7a97d · 1e7a97d
2 parents 657bc92 + 79417d9
commit 1e7a97d
Show file tree

Hide file tree

Showing 10 changed files with 1,592 additions and 2,709 deletions.
diff --git a/build/Griddle.js b/build/Griddle.js
diff --git a/examples/properties/properties.html b/examples/properties/properties.html
@@ -450,6 +450,30 @@
     "description": "A function that should be called when a row has been clicked. The 'gridRow' and event will be passed in as arguments.",
     "type": "function",
     "default": "null"
+  },
+  {
+    "property": "onRowMouseEnter",
+    "description": "A function that should be called when a mouse entered a row. The 'gridRow' and event will be passed in as arguments.",
+    "type": "function",
+    "default": "null"
+  },
+  {
+    "property": "onRowMouseLeave",
+    "description": "A function that should be called when a mouse left a row. The 'gridRow' and event will be passed in as arguments.",
+    "type": "function",
+    "default": "null"
+  },
+  {
+    "property": "onRowWillMount",
+    "description": "A function that should be called before a row was mounted. The 'gridRow' will be passed in as argument.",
+    "type": "function",
+    "default": "null"
+  },
+  {
+    "property": "onRowWillUnmount",
+    "description": "A function that should be called before a row was unmounted. The 'gridRow' will be passed in as argument.",
+    "type": "function",
+    "default": "null"
   }
 ];
 var DefinitionItem = React.createClass({

diff --git a/modules/gridRow.jsx.js b/modules/gridRow.jsx.js
@@ -34,16 +34,40 @@ var GridRow = React.createClass({
             "parentRowCollapsedComponent": "▶",
             "parentRowExpandedComponent": "▼",
             "onRowClick": null,
-            "multipleSelectionSettings": null
+            "multipleSelectionSettings": null,
+            "onRowMouseEnter": null,
+            "onRowMouseLeave": null,
+            "onRowWillMount": null,
+            "onRowWillUnmount": null
         };
     },
+    componentWillMount: function componentWillMount() {
+        if (this.props.onRowWillMount !== null && isFunction(this.props.onRowWillMount)) {
+            this.props.onRowWillMount(this);
+        }
+    },
+    componentWillUnmount: function componentWillUnmount() {
+        if (this.props.onRowWillUnmount !== null && isFunction(this.props.onRowWillUnmount)) {
+            this.props.onRowWillUnmount(this);
+        }
+    },
     handleClick: function handleClick(e) {
         if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
             this.props.onRowClick(this, e);
         } else if (this.props.hasChildren) {
             this.props.toggleChildren();
         }
     },
+    handleMouseEnter: function handleMouseEnter(e) {
+        if (this.props.onRowMouseEnter !== null && isFunction(this.props.onRowMouseEnter)) {
+            this.props.onRowMouseEnter(this, e);
+        }
+    },
+    handleMouseLeave: function handleMouseLeave(e) {
+        if (this.props.onRowMouseLeave !== null && isFunction(this.props.onRowMouseLeave)) {
+            this.props.onRowMouseLeave(this, e);
+        }
+    },
     handleSelectionChange: function handleSelectionChange(e) {
         //hack to get around warning that's not super useful in this case
         return;
@@ -111,13 +135,13 @@ var GridRow = React.createClass({
             if (_this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
                 if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
                     var customComponent = React.createElement(meta.customComponent, { data: col[1], rowData: dataView, metadata: meta });
-                    returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
+                    returnValue = React.createElement('td', { onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
                 } else {
-                    returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(col[1]));
+                    returnValue = React.createElement('td', { onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(col[1]));
                 }
             }
 
-            return returnValue || React.createElement('td', { onClick: _this.handleClick, key: index, style: columnStyles }, firstColAppend, col[1]);
+            return returnValue || React.createElement('td', { onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, key: index, style: columnStyles }, firstColAppend, col[1]);
         });
 
         // Don't compete with onRowClick, but if no onRowClick function then

diff --git a/modules/gridRowContainer.jsx.js b/modules/gridRowContainer.jsx.js
@@ -24,6 +24,10 @@ var GridRowContainer = React.createClass({
       "parentRowCollapsedComponent": "▶",
       "parentRowExpandedComponent": "▼",
       "onRowClick": null,
+      "onRowMouseEnter": null,
+      "onRowMouseLeave": null,
+      "onRowWillMount": null,
+      "onRowWillUnmount": null,
       "multipleSelectionSettings": null
     };
   },
@@ -78,7 +82,11 @@ var GridRowContainer = React.createClass({
       paddingHeight: that.props.paddingHeight,
       rowHeight: that.props.rowHeight,
       onRowClick: that.props.onRowClick,
-      multipleSelectionSettings: this.props.multipleSelectionSettings }));
+      onRowMouseEnter: that.props.onRowMouseEnter,
+      onRowMouseLeave: that.props.onRowMouseLeave,
+      multipleSelectionSettings: this.props.multipleSelectionSettings,
+      onRowWillMount: that.props.onRowWillMount,
+      onRowWillUnmount: that.props.onRowWillUnmount }));
 
     var children = null;
 

diff --git a/modules/gridTable.jsx.js b/modules/gridTable.jsx.js
@@ -39,7 +39,11 @@ var GridTable = React.createClass({
       "parentRowExpandedComponent": "▼",
       "externalLoadingComponent": null,
       "externalIsLoading": false,
-      "onRowClick": null
+      "onRowClick": null,
+      "onRowMouseEnter": null,
+      "onRowMouseLeave": null,
+      "onRowWillMount": null,
+      "onRowWillUnmount": null
     };
   },
   getInitialState: function getInitialState() {
@@ -159,7 +163,11 @@ var GridTable = React.createClass({
           rowHeight: that.props.rowHeight,
           hasChildren: hasChildren,
           tableClassName: that.props.className,
-          onRowClick: that.props.onRowClick
+          onRowClick: that.props.onRowClick,
+          onRowMouseEnter: that.props.onRowMouseEnter,
+          onRowMouseLeave: that.props.onRowMouseLeave,
+          onRowWillMount: that.props.onRowWillMount,
+          onRowWillUnmount: that.props.onRowWillUnmount
         });
       });
 

diff --git a/modules/griddle.jsx.js b/modules/griddle.jsx.js
@@ -130,6 +130,10 @@ var Griddle = React.createClass({
             "isSubGriddle": false,
             "enableSort": true,
             "onRowClick": null,
+            "onRowMouseEnter": null,
+            "onRowMouseLeave": null,
+            "onRowWillMount": null,
+            "onRowWillUnmount": null,
             /* css class names */
             "sortAscendingClassName": "sort-ascending",
             "sortDescendingClassName": "sort-descending",
@@ -850,7 +854,11 @@ var Griddle = React.createClass({
             externalLoadingComponent: this.props.externalLoadingComponent,
             externalIsLoading: this.props.externalIsLoading,
             hasMorePages: hasMorePages,
-            onRowClick: this.props.onRowClick }));
+            onRowClick: this.props.onRowClick,
+            onRowMouseEnter: this.props.onRowMouseEnter,
+            onRowMouseLeave: this.props.onRowMouseLeave,
+            onRowWillMount: this.props.onRowWillMount,
+            onRowWillUnmount: this.props.onRowWillUnmount }));
     },
     getContentSection: function getContentSection(data, cols, meta, pagingContent, hasMorePages, globalData) {
         if (this.shouldUseCustomGridComponent() && this.props.customGridComponent !== null) {

diff --git a/scripts/gridRow.jsx b/scripts/gridRow.jsx
@@ -30,7 +30,21 @@ var GridRow = React.createClass({
         "parentRowCollapsedComponent": "▶",
         "parentRowExpandedComponent": "▼",
         "onRowClick": null,
-	    "multipleSelectionSettings": null
+	      "multipleSelectionSettings": null,
+        "onRowMouseEnter": null,
+        "onRowMouseLeave": null,
+        "onRowWillMount": null,
+        "onRowWillUnmount": null
+      }
+    },
+    componentWillMount: function () {
+      if (this.props.onRowWillMount !== null && isFunction(this.props.onRowWillMount)) {
+        this.props.onRowWillMount(this);
+      }
+    },
+    componentWillUnmount: function () {
+      if (this.props.onRowWillUnmount !== null && isFunction(this.props.onRowWillUnmount)) {
+        this.props.onRowWillUnmount(this);
       }
     },
     handleClick: function(e){
@@ -40,6 +54,16 @@ var GridRow = React.createClass({
             this.props.toggleChildren();
         }
     },
+    handleMouseEnter: function (e) {
+      if (this.props.onRowMouseEnter !== null && isFunction(this.props.onRowMouseEnter)) {
+        this.props.onRowMouseEnter(this, e);
+      }
+    },
+    handleMouseLeave: function (e) {
+      if (this.props.onRowMouseLeave !== null && isFunction(this.props.onRowMouseLeave)) {
+        this.props.onRowMouseLeave(this, e);
+      }
+    },
     handleSelectionChange: function(e) {
       //hack to get around warning that's not super useful in this case
       return;
@@ -108,13 +132,13 @@ var GridRow = React.createClass({
             if (this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
               if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
                 var customComponent = <meta.customComponent data={col[1]} rowData={dataView} metadata={meta} />;
-                returnValue = <td onClick={this.handleClick} className={meta.cssClassName} key={index} style={columnStyles}>{customComponent}</td>;
+                returnValue = <td onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} className={meta.cssClassName} key={index} style={columnStyles}>{customComponent}</td>;
               } else {
-                returnValue = <td onClick={this.handleClick} className={meta.cssClassName} key={index} style={columnStyles}>{firstColAppend}{this.formatData(col[1])}</td>;
+                returnValue = <td onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} className={meta.cssClassName} key={index} style={columnStyles}>{firstColAppend}{this.formatData(col[1])}</td>;
               }
             }
 
-            return returnValue || (<td onClick={this.handleClick} key={index} style={columnStyles}>{firstColAppend}{col[1]}</td>);
+            return returnValue || (<td onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} key={index} style={columnStyles}>{firstColAppend}{col[1]}</td>);
         });
 
         // Don't compete with onRowClick, but if no onRowClick function then

diff --git a/scripts/gridRowContainer.jsx b/scripts/gridRowContainer.jsx
@@ -20,7 +20,11 @@ var GridRowContainer = React.createClass({
         "parentRowCollapsedComponent": "▶",
         "parentRowExpandedComponent": "▼",
         "onRowClick": null,
-	    "multipleSelectionSettings": null
+        "onRowMouseEnter": null,
+        "onRowMouseLeave": null,
+        "onRowWillMount": null,
+        "onRowWillUnmount": null,
+        "multipleSelectionSettings": null
       };
     },
     getInitialState: function(){
@@ -74,7 +78,11 @@ var GridRowContainer = React.createClass({
           paddingHeight={that.props.paddingHeight}
           rowHeight={that.props.rowHeight}
           onRowClick={that.props.onRowClick}
-          multipleSelectionSettings={this.props.multipleSelectionSettings} />
+          onRowMouseEnter={that.props.onRowMouseEnter}
+          onRowMouseLeave={that.props.onRowMouseLeave}
+          multipleSelectionSettings={this.props.multipleSelectionSettings}
+          onRowWillMount={that.props.onRowWillMount}
+          onRowWillUnmount={that.props.onRowWillUnmount} />
       );
 
       var children = null;

diff --git a/scripts/gridTable.jsx b/scripts/gridTable.jsx
@@ -35,7 +35,11 @@ var GridTable = React.createClass({
       "parentRowExpandedComponent": "▼",
       "externalLoadingComponent": null,
       "externalIsLoading": false,
-      "onRowClick": null
+      "onRowClick": null,
+      "onRowMouseEnter": null,
+      "onRowMouseLeave": null,
+      "onRowWillMount": null,
+      "onRowWillUnmount": null
     }
   },
   getInitialState: function(){
@@ -157,6 +161,10 @@ var GridTable = React.createClass({
                 hasChildren={hasChildren}
                 tableClassName={that.props.className}
                 onRowClick={that.props.onRowClick}
+                onRowMouseEnter={that.props.onRowMouseEnter}
+                onRowMouseLeave={that.props.onRowMouseLeave}
+                onRowWillMount={that.props.onRowWillMount}
+                onRowWillUnmount={that.props.onRowWillUnmount}
             />
           )
       });
@@ -229,7 +237,7 @@ var GridTable = React.createClass({
           paddingBottom: "40px"
         };
       }
-	  
+
 	  defaultColSpan = this.props.columnSettings.getVisibleColumnCount();
 
       var loadingComponent = this.props.externalLoadingComponent ?

diff --git a/scripts/griddle.jsx b/scripts/griddle.jsx
@@ -116,6 +116,10 @@ var Griddle = React.createClass({
             "isSubGriddle": false,
             "enableSort": true,
             "onRowClick": null,
+            "onRowMouseEnter": null,
+            "onRowMouseLeave": null,
+            "onRowWillMount": null,
+            "onRowWillUnmount": null,
             /* css class names */
             "sortAscendingClassName": "sort-ascending",
             "sortDescendingClassName": "sort-descending",
@@ -876,7 +880,11 @@ var Griddle = React.createClass({
                 externalLoadingComponent={this.props.externalLoadingComponent}
                 externalIsLoading={this.props.externalIsLoading}
                 hasMorePages={hasMorePages}
-                onRowClick={this.props.onRowClick}/></div>)
+                onRowClick={this.props.onRowClick}
+                onRowMouseEnter={this.props.onRowMouseEnter}
+                onRowMouseLeave={this.props.onRowMouseLeave}
+                onRowWillMount={this.props.onRowWillMount}
+                onRowWillUnmount={this.props.onRowWillUnmount}/></div>)
     },
     getContentSection: function(data, cols, meta, pagingContent, hasMorePages, globalData){
         if(this.shouldUseCustomGridComponent() && this.props.customGridComponent !== null){