diff --git a/package.json b/package.json index 80363d38f..2f973ceee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-table", - "version": "5.4.0", + "version": "5.4.2", "description": "table ui component for react", "keywords": [ "react", diff --git a/src/Table.jsx b/src/Table.jsx index e6f49667f..9fc8df670 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -508,9 +508,7 @@ export default class Table extends React.Component { className={`${prefixCls}-header`} ref={fixed ? null : 'headTable'} style={headStyle} - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} - onScroll={this.handleBodyScroll} + onScroll={this.handleBodyScrollLeft} > {renderTable(true, false)} @@ -523,8 +521,6 @@ export default class Table extends React.Component { className={`${prefixCls}-body`} style={bodyStyle} ref="bodyTable" - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} onScroll={this.handleBodyScroll} > {renderTable(!useFixedHeader)} @@ -550,8 +546,6 @@ export default class Table extends React.Component { className={`${prefixCls}-body-inner`} style={innerBodyStyle} ref={refName} - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} onScroll={this.handleBodyScroll} > {renderTable(!useFixedHeader)} @@ -686,46 +680,50 @@ export default class Table extends React.Component { return typeof this.findExpandedRow(record, index) !== 'undefined'; } - detectScrollTarget = (e) => { - if (this.scrollTarget !== e.currentTarget) { - this.scrollTarget = e.currentTarget; - } - } - hasScrollX() { const { scroll = {} } = this.props; return 'x' in scroll; } - handleBodyScroll = (e) => { - // Prevent scrollTop setter trigger onScroll event - // http://stackoverflow.com/q/1386696 - if (e.target !== this.scrollTarget) { - return; - } + handleBodyScrollLeft = (e) => { + const target = e.target; const { scroll = {} } = this.props; - const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; - if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) { - if (e.target === bodyTable && headTable) { - headTable.scrollLeft = e.target.scrollLeft; - } else if (e.target === headTable && bodyTable) { - bodyTable.scrollLeft = e.target.scrollLeft; + const { headTable, bodyTable } = this.refs; + if (target.scrollLeft !== this.lastScrollLeft && scroll.x) { + if (target === bodyTable && headTable) { + headTable.scrollLeft = target.scrollLeft; + } else if (target === headTable && bodyTable) { + bodyTable.scrollLeft = target.scrollLeft; } - this.setScrollPositionClassName(e.target); + this.setScrollPositionClassName(target); } - if (scroll.y) { - if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) { - fixedColumnsBodyLeft.scrollTop = e.target.scrollTop; + // Remember last scrollLeft for scroll direction detecting. + this.lastScrollLeft = target.scrollLeft; + } + + handleBodyScrollTop = (e) => { + const target = e.target; + const { scroll = {} } = this.props; + const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; + if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) { + const scrollTop = target.scrollTop; + if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) { + fixedColumnsBodyLeft.scrollTop = scrollTop; } - if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) { - fixedColumnsBodyRight.scrollTop = e.target.scrollTop; + if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) { + fixedColumnsBodyRight.scrollTop = scrollTop; } - if (bodyTable && e.target !== bodyTable) { - bodyTable.scrollTop = e.target.scrollTop; + if (bodyTable && target !== bodyTable) { + bodyTable.scrollTop = scrollTop; } } - // Remember last scrollLeft for scroll direction detecting. - this.lastScrollLeft = e.target.scrollLeft; + // Remember last scrollTop for scroll direction detecting. + this.lastScrollTop = target.scrollTop; + } + + handleBodyScroll = (e) => { + this.handleBodyScrollLeft(e); + this.handleBodyScrollTop(e); } handleRowHover = (isHover, key) => { diff --git a/src/TableRow.jsx b/src/TableRow.jsx index 6e43cbc88..0ae22eecd 100644 --- a/src/TableRow.jsx +++ b/src/TableRow.jsx @@ -41,6 +41,8 @@ export default class TableRow extends React.Component { static defaultProps = { onRowClick() {}, onRowDoubleClick() {}, + onRowMouseEnter() {}, + onRowMouseLeave() {}, onDestroy() {}, expandIconColumnIndex: 0, expandRowByClick: false, diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap index 353f3b64d..b86e6a677 100644 --- a/tests/__snapshots__/Table.expandRow.spec.js.snap +++ b/tests/__snapshots__/Table.expandRow.spec.js.snap @@ -67,9 +67,7 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = ` className="rc-table-content">