Introduce onRowMouseEnter and onRowMouseLeave

react-component · May 23, 2017 · 0db582a · 0db582a
1 parent 1e24982
commit 0db582a
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -188,6 +188,18 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
     </tr>
+    <tr>
+      <td>onRowMouseEnter</td>
+      <td>Function(record, index)</td>
+      <td></td>
+      <td>handle onRowMouseEnter action, index means the index of current row among fatherElement[childrenColumnName]</td>
+    </tr>
+    <tr>
+      <td>onRowMouseLeave</td>
+      <td>Function(record, index)</td>
+      <td></td>
+      <td>handle onRowMouseLeave action, index means the index of current row among fatherElement[childrenColumnName]</td>
+    </tr>
     <tr>
       <td>showHeader</td>
       <td>Boolean</td>

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -54,6 +54,8 @@ export default class Table extends React.Component {
     onExpandedRowsChange() {},
     onRowClick() {},
     onRowDoubleClick() {},
+    onRowMouseEnter() {},
+    onRowMouseLeave() {},
     prefixCls: 'rc-table',
     bodyStyle: {},
     style: {},
@@ -290,17 +292,21 @@ export default class Table extends React.Component {
 
   getRowsByData(data, visible, indent, columns, fixed) {
     const props = this.props;
-    const childrenColumnName = props.childrenColumnName;
-    const expandedRowRender = props.expandedRowRender;
-    const expandRowByClick = props.expandRowByClick;
+    const {
+      childrenColumnName,
+      expandedRowRender,
+      expandRowByClick,
+      rowClassName,
+      rowRef,
+      expandedRowClassName,
+      onRowClick,
+      onRowDoubleClick,
+      onRowMouseEnter,
+      onRowMouseLeave,
+    } = props;
     const { fixedColumnsBodyRowsHeight } = this.state;
     let rst = [];
-    const rowClassName = props.rowClassName;
-    const rowRef = props.rowRef;
-    const expandedRowClassName = props.expandedRowClassName;
     const needIndentSpaced = props.data.some(record => record[childrenColumnName]);
-    const onRowClick = props.onRowClick;
-    const onRowDoubleClick = props.onRowDoubleClick;
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
@@ -355,6 +361,8 @@ export default class Table extends React.Component {
           expandIconColumnIndex={expandIconColumnIndex}
           onRowClick={onRowClick}
           onRowDoubleClick={onRowDoubleClick}
+          onRowMouseEnter={onRowMouseEnter}
+          onRowMouseLeave={onRowMouseLeave}
           height={height}
           {...onHoverProps}
           key={key}

diff --git a/src/TableRow.jsx b/src/TableRow.jsx
@@ -8,6 +8,8 @@ export default class TableRow extends React.Component {
     onDestroy: PropTypes.func,
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
+    onRowMouseEnter: PropTypes.func,
+    onRowMouseLeave: PropTypes.func,
     record: PropTypes.object,
     prefixCls: PropTypes.string,
     expandIconColumnIndex: PropTypes.number,
@@ -88,14 +90,16 @@ export default class TableRow extends React.Component {
     onRowDoubleClick(record, index, event);
   }
 
-  onMouseEnter = () => {
-    const { onHover, hoverKey } = this.props;
+  onMouseEnter = (event) => {
+    const { record, index, onRowMouseEnter, onHover, hoverKey } = this.props;
     onHover(true, hoverKey);
+    onRowMouseEnter(record, index, event);
   }
 
-  onMouseLeave = () => {
-    const { onHover, hoverKey } = this.props;
+  onMouseLeave = (event) => {
+    const { record, index, onRowMouseLeave, onHover, hoverKey } = this.props;
     onHover(false, hoverKey);
+    onRowMouseLeave(record, index, event);
   }
 
   setHover() {

diff --git a/tests/Table.spec.js b/tests/Table.spec.js
@@ -400,4 +400,22 @@ describe('Table', () => {
       expect(Table.prototype.resetScrollX.calls.count()).toBe(0);
     });
   });
+
+  it('fires onRowMouseEnter', () => {
+    const handleRowMouseEnter = jest.fn();
+    const wrapper = mount(createTable({
+      onRowMouseEnter: handleRowMouseEnter,
+    }));
+    wrapper.find('.rc-table-row').first().simulate('mouseEnter');
+    expect(handleRowMouseEnter).toBeCalledWith(data[0], 0, expect.anything());
+  });
+
+  it('fires onRowMouseLeave', () => {
+    const handleRowMouseLeave = jest.fn();
+    const wrapper = mount(createTable({
+      onRowMouseLeave: handleRowMouseLeave,
+    }));
+    wrapper.find('.rc-table-row').first().simulate('mouseLeave');
+    expect(handleRowMouseLeave).toBeCalledWith(data[0], 0, expect.anything());
+  });
 });
diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap
@@ -48,6 +48,8 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
   onExpandedRowsChange={[Function]}
   onRowClick={[Function]}
   onRowDoubleClick={[Function]}
+  onRowMouseEnter={[Function]}
+  onRowMouseLeave={[Function]}
   prefixCls="rc-table"
   rowClassName={[Function]}
   rowKey="key"
@@ -155,6 +157,8 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {
@@ -387,6 +391,8 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {
@@ -564,6 +570,8 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = `
   onExpandedRowsChange={[Function]}
   onRowClick={[Function]}
   onRowDoubleClick={[Function]}
+  onRowMouseEnter={[Function]}
+  onRowMouseLeave={[Function]}
   prefixCls="rc-table"
   rowClassName={[Function]}
   rowKey="key"
@@ -671,6 +679,8 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {
@@ -823,6 +833,8 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {
@@ -1168,6 +1180,8 @@ exports[`Table.expand expand row by click 1`] = `
   onExpandedRowsChange={[Function]}
   onRowClick={[Function]}
   onRowDoubleClick={[Function]}
+  onRowMouseEnter={[Function]}
+  onRowMouseLeave={[Function]}
   prefixCls="rc-table"
   rowClassName={[Function]}
   rowKey="key"
@@ -1275,6 +1289,8 @@ exports[`Table.expand expand row by click 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {
@@ -1507,6 +1523,8 @@ exports[`Table.expand expand row by click 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-row"
               record={
                 Object {