Merge pull request #1 from react-component/master

merga

Author: John

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",

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)}
         </div>
@@ -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) => {

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,

tests/__snapshots__/Table.expandRow.spec.js.snap

@@ -67,9 +67,7 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
       className="rc-table-content">
       <div
         className="rc-table-body"
-        onMouseOver={[Function]}
         onScroll={[Function]}
-        onTouchStart={[Function]}
         style={Object {}}>
         <table
           className=""
@@ -300,6 +298,8 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-expanded-row"
               rowKey="0-extra-row"
               store={
@@ -591,9 +591,7 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = `
       className="rc-table-content">
       <div
         className="rc-table-body"
-        onMouseOver={[Function]}
         onScroll={[Function]}
-        onTouchStart={[Function]}
         style={Object {}}>
         <table
           className=""
@@ -978,6 +976,8 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-expanded-row"
               rowKey="1-extra-row"
               store={
@@ -1203,9 +1203,7 @@ exports[`Table.expand expand row by click 1`] = `
       className="rc-table-content">
       <div
         className="rc-table-body"
-        onMouseOver={[Function]}
         onScroll={[Function]}
-        onTouchStart={[Function]}
         style={Object {}}>
         <table
           className=""
@@ -1436,6 +1434,8 @@ exports[`Table.expand expand row by click 1`] = `
               onHover={[Function]}
               onRowClick={[Function]}
               onRowDoubleClick={[Function]}
+              onRowMouseEnter={[Function]}
+              onRowMouseLeave={[Function]}
               prefixCls="rc-table-expanded-row"
               rowKey="0-extra-row"
               store={