Skip to content

Commit

Permalink
Merge pull request #462 from goooseman/master
Browse files Browse the repository at this point in the history 
onRowMouseEnter and onRowMouseLeave Griddle events
  • Loading branch information
@ryanlanciaux
ryanlanciaux committed Feb 19, 2017
2 parents 657bc92 + 79417d9 commit 1e7a97d
Show file tree
Hide file tree
Showing 10 changed files with 1,592 additions and 2,709 deletions.
4,147 changes: 1,455 additions & 2,692 deletions build/Griddle.js
View file

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions examples/properties/properties.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
32 changes: 28 additions & 4 deletions modules/gridRow.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
10 changes: 9 additions & 1 deletion modules/gridRowContainer.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ var GridRowContainer = React.createClass({
"parentRowCollapsedComponent": "▶",
"parentRowExpandedComponent": "▼",
"onRowClick": null,
"onRowMouseEnter": null,
"onRowMouseLeave": null,
"onRowWillMount": null,
"onRowWillUnmount": null,
"multipleSelectionSettings": null
};
},
Expand Down Expand Up @@ -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;

Expand Down
12 changes: 10 additions & 2 deletions modules/gridTable.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
});
});

Expand Down
10 changes: 9 additions & 1 deletion modules/griddle.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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) {
Expand Down
32 changes: 28 additions & 4 deletions scripts/gridRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
12 changes: 10 additions & 2 deletions scripts/gridRowContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 10 additions & 2 deletions scripts/gridTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down Expand Up @@ -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}
/>
)
});
Expand Down Expand Up @@ -229,7 +237,7 @@ var GridTable = React.createClass({
paddingBottom: "40px"
};
}

defaultColSpan = this.props.columnSettings.getVisibleColumnCount();

var loadingComponent = this.props.externalLoadingComponent ?
Expand Down
10 changes: 9 additions & 1 deletion scripts/griddle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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){
Expand Down

0 comments on commit 1e7a97d

Please sign in to comment.