Added new events (onRowMouseOver, onRowMouseOut and onRowMouseUp)

README.md

@@ -182,6 +182,24 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>handle rowClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
     </tr>
+    <tr>
+      <td>onRowMouseOver</td>
+      <td>Function(record, index)</td>
+      <td></td>
+      <td>handle rowMouseOver action, index means the index of current row among fatherElement[childrenColumnName]</td>
+    </tr>
+    <tr>
+      <td>onRowMouseOut</td>
+      <td>Function(record, index)</td>
+      <td></td>
+      <td>handle rowMouseOut action, index means the index of current row among fatherElement[childrenColumnName]</td>
+    </tr>
+    <tr>
+      <td>onRowMouseUp</td>
+      <td>Function(record, index)</td>
+      <td></td>
+      <td>handle rowMouseUp action, index means the index of current row among fatherElement[childrenColumnName]</td>
+    </tr>
     <tr>
       <td>onRowDoubleClick</td>
       <td>Function(record, index)</td>

src/Table.jsx

@@ -27,6 +27,9 @@ const Table = React.createClass({
     onExpandedRowsChange: PropTypes.func,
     indentSize: PropTypes.number,
     onRowClick: PropTypes.func,
+    onRowMouseOver: PropTypes.func,
+    onRowMouseOut: PropTypes.func,
+    onRowMouseUp: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
     expandIconColumnIndex: PropTypes.number,
     showHeader: PropTypes.bool,
@@ -52,6 +55,9 @@ const Table = React.createClass({
       onExpand() {},
       onExpandedRowsChange() {},
       onRowClick() {},
+      onRowMouseOver() {},
+      onRowMouseOut() {},
+      onRowMouseUp() {},
       onRowDoubleClick() {},
       prefixCls: 'rc-table',
       bodyStyle: {},
@@ -297,7 +303,11 @@ const Table = React.createClass({
     const rowRef = props.rowRef;
     const expandedRowClassName = props.expandedRowClassName;
     const needIndentSpaced = props.data.some(record => record[childrenColumnName]);
+
     const onRowClick = props.onRowClick;
+    const onRowMouseOver = props.onRowMouseOver;
+    const onRowMouseOut = props.onRowMouseOut;
+    const onRowMouseUp = props.onRowMouseUp;
     const onRowDoubleClick = props.onRowDoubleClick;
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
@@ -352,6 +362,9 @@ const Table = React.createClass({
           columns={leafColumns}
           expandIconColumnIndex={expandIconColumnIndex}
           onRowClick={onRowClick}
+          onRowMouseOver={onRowMouseOver}
+          onRowMouseOut={onRowMouseOut}
+          onRowMouseUp={onRowMouseUp}
           onRowDoubleClick={onRowDoubleClick}
           height={height}
           {...onHoverProps}

src/TableRow.jsx

@@ -6,6 +6,9 @@ const TableRow = React.createClass({
   propTypes: {
     onDestroy: PropTypes.func,
     onRowClick: PropTypes.func,
+    onRowMouseOver: PropTypes.func,
+    onRowMouseOut: PropTypes.func,
+    onRowMouseUp: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
     record: PropTypes.object,
     prefixCls: PropTypes.string,
@@ -34,6 +37,9 @@ const TableRow = React.createClass({
   getDefaultProps() {
     return {
       onRowClick() {},
+      onRowMouseOver() {},
+      onRowMouseOut() {},
+      onRowMouseUp() {},
       onRowDoubleClick() {},
       onDestroy() {},
       expandIconColumnIndex: 0,
@@ -83,6 +89,21 @@ const TableRow = React.createClass({
     onRowClick(record, index, event);
   },
 
+  onRowMouseOver(event) {
+    const { record, index, onRowMouseOver } = this.props;
+    onRowMouseOver(record, index, event);
+  },
+
+  onRowMouseOut(event) {
+    const { record, index, onRowMouseOut } = this.props;
+    onRowMouseOut(record, index, event);
+  },
+
+  onRowMouseUp(event) {
+    const { record, index, onRowMouseUp } = this.props;
+    onRowMouseUp(record, index, event);
+  },
+
   onRowDoubleClick(event) {
     const { record, index, onRowDoubleClick } = this.props;
     onRowDoubleClick(record, index, event);
@@ -158,6 +179,9 @@ const TableRow = React.createClass({
     return (
       <tr
         onClick={this.onRowClick}
+        onMouseOver={this.onRowMouseOver}
+        onMouseOut={this.onRowMouseOut}
+        onMouseUp={this.onRowMouseUp}
         onDoubleClick={this.onRowDoubleClick}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}

src/utils.js

@@ -53,7 +53,7 @@ export function debounce(func, wait, immediate) {
       func.apply(context, args);
     }
   }
-  debounceFunc.cancel = function () {
+  debounceFunc.cancel = function cancel() {
     if (timeout) {
       clearTimeout(timeout);
       timeout = null;

tests/rowOverEvents.spec.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+const expect = require('expect.js');
+const Table = require('../');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const $ = require('jquery');
+const { Simulate } = require('react-addons-test-utils');
+
+describe('mouse event in table row', () => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  let node;
+
+  const columns = [{
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    width: 400,
+  }, {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 100,
+    render: (text) => (
+      <a href="#">
+        Alert: {text}, click will pop to row click
+      </a>
+    ),
+  }, {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+    width: 200,
+  }];
+  const data = [{
+    key: 1,
+    name: 'a',
+    age: 32,
+    address: 'I am a',
+  }];
+
+  const spy = {
+    callCount: 0,
+    callArgs: null,
+  };
+
+  const onRowMouseOver = (...args) => {
+    spy.callArgs = args;
+    spy.callCount += 1;
+  };
+
+  const onRowMouseOut = (...args) => {
+    spy.callArgs = args;
+    spy.callCount += 1;
+  };
+
+  const onRowMouseUp = (...args) => {
+    spy.callArgs = args;
+    spy.callCount += 1;
+  };
+
+  beforeEach(() => {
+    ReactDOM.render(
+      <Table
+        columns={columns}
+        data={data}
+        onRowMouseUp={onRowMouseUp}
+        onRowMouseOver={onRowMouseOver}
+        onRowMouseOut={onRowMouseOut}
+      />,
+      div
+    );
+    node = $(div);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(div);
+    spy.callArgs = null;
+    spy.callCount = 0;
+  });
+
+  it('mouseOver', () => {
+    Simulate.mouseOver(node.find('tbody tr:first')[0]);
+    expect(spy.callCount).to.be(1);
+    expect(spy.callArgs[0]).to.be(data[0]);
+    expect(spy.callArgs[1]).to.be(0);
+    expect(spy.callArgs[2].type).to.be('mouseover');
+  });
+
+  it('mouseUp', () => {
+    Simulate.mouseUp(node.find('tbody tr:first')[0]);
+    expect(spy.callCount).to.be(1);
+    expect(spy.callArgs[0]).to.be(data[0]);
+    expect(spy.callArgs[1]).to.be(0);
+    expect(spy.callArgs[2].type).to.be('mouseup');
+  });
+
+  it('mouseOut', () => {
+    Simulate.mouseOut(node.find('tbody tr:first')[0]);
+    expect(spy.callCount).to.be(1);
+    expect(spy.callArgs[0]).to.be(data[0]);
+    expect(spy.callArgs[1]).to.be(0);
+    expect(spy.callArgs[2].type).to.be('mouseout');
+  });
+});