From 83cc101d8d54f2893f03cd52413b6c648c9a3255 Mon Sep 17 00:00:00 2001 From: Bruno Agutoli Date: Mon, 9 Jan 2017 17:24:30 -0200 Subject: [PATCH 1/4] added new events onRowMouseOver, onRowMouseOut and onRowMouseUp --- src/Table.jsx | 13 +++++++++++++ src/TableRow.jsx | 24 ++++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/src/Table.jsx b/src/Table.jsx index ff33276b0..2c82cf150 100644 --- a/src/Table.jsx +++ b/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} diff --git a/src/TableRow.jsx b/src/TableRow.jsx index 781d08b49..99576da85 100644 --- a/src/TableRow.jsx +++ b/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 ( Date: Mon, 9 Jan 2017 17:25:22 -0200 Subject: [PATCH 2/4] added new events onRowMouseOver, onRowMouseOut and onRowMouseUp --- src/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 4185baed7..f7b074aee 100644 --- a/src/utils.js +++ b/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; From 1a475bd5d3508955e4a9777229137ef0a260eeca Mon Sep 17 00:00:00 2001 From: Bruno Agutoli Date: Mon, 9 Jan 2017 17:28:41 -0200 Subject: [PATCH 3/4] updated README.md --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 9067b174e..bfb9fe9af 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,24 @@ React.render(, mountNode); + + + + + + + + + + + + + + + + + + From 0bf0ff4034dc9b0cd19fdf26df7788d120378e02 Mon Sep 17 00:00:00 2001 From: Bruno Agutoli Date: Mon, 9 Jan 2017 17:39:24 -0200 Subject: [PATCH 4/4] added new unittests --- tests/rowOverEvents.spec.js | 105 ++++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 tests/rowOverEvents.spec.js diff --git a/tests/rowOverEvents.spec.js b/tests/rowOverEvents.spec.js new file mode 100644 index 000000000..4788daae1 --- /dev/null +++ b/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) => ( + + Alert: {text}, click will pop to row click + + ), + }, { + 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( +
handle rowClick action, index means the index of current row among fatherElement[childrenColumnName]
onRowMouseOverFunction(record, index)handle rowMouseOver action, index means the index of current row among fatherElement[childrenColumnName]
onRowMouseOutFunction(record, index)handle rowMouseOut action, index means the index of current row among fatherElement[childrenColumnName]
onRowMouseUpFunction(record, index)handle rowMouseUp action, index means the index of current row among fatherElement[childrenColumnName]
onRowDoubleClick Function(record, index)
, + 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'); + }); +});