Extract hover state by creating a global state

src/Table.jsx

@@ -5,6 +5,7 @@ import { measureScrollbar, debounce } from './utils';
 import shallowequal from 'shallowequal';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import ColumnManager from './ColumnManager';
+import createStore from './createStore';
 
 const Table = React.createClass({
   propTypes: {
@@ -80,6 +81,7 @@ const Table = React.createClass({
     } else {
       expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
     }
+    this.store = createStore({ currentHoverKey: null });
     return {
       expandedRowKeys,
       data: props.data,
@@ -269,6 +271,7 @@ const Table = React.createClass({
         prefixCls={`${prefixCls}-expanded-row`}
         indent={1}
         expandable={false}
+        store={this.store}
       />
     );
   },
@@ -299,10 +302,7 @@ const Table = React.createClass({
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
       }
-      let className = rowClassName(record, i, indent);
-      if (this.state.currentHoverKey === key) {
-        className += ` ${props.prefixCls}-row-hover`;
-      }
+      const className = rowClassName(record, i, indent);
 
       const onHoverProps = {};
       if (this.columnManager.isAnyColumnsFixed()) {
@@ -348,6 +348,7 @@ const Table = React.createClass({
           key={key}
           hoverKey={key}
           ref={rowRef(record, i, indent)}
+          store={this.store}
         />
       );
 
@@ -652,7 +653,7 @@ const Table = React.createClass({
   },
 
   handleRowHover(isHover, key) {
-    this.setState({
+    this.store.setState({
       currentHoverKey: isHover ? key : null,
     });
   },

src/TableRow.jsx

@@ -29,6 +29,7 @@ const TableRow = React.createClass({
     indentSize: PropTypes.number,
     expandIconAsCell: PropTypes.bool,
     expandRowByClick: PropTypes.bool,
+    store: PropTypes.object.isRequired,
   },
 
   getDefaultProps() {
@@ -42,8 +43,26 @@ const TableRow = React.createClass({
     };
   },
 
-  shouldComponentUpdate(nextProps) {
-    return !shallowequal(nextProps, this.props);
+  getInitialState() {
+    return {
+      hovered: false,
+    };
+  },
+
+  componentDidMount() {
+    const { store, hoverKey } = this.props;
+    store.subscribe(() => {
+      if (store.getState().currentHoverKey === hoverKey) {
+        this.setState({ hovered: true });
+      } else if (this.state.hovered === true) {
+        this.setState({ hovered: false });
+      }
+    });
+  },
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowequal(nextProps, this.props) ||
+           !shallowequal(nextState, this.state);
   },
 
   componentWillUnmount() {
@@ -85,9 +104,15 @@ const TableRow = React.createClass({
     const {
       prefixCls, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, className, indent, indentSize,
+      expandable, onExpand, needIndentSpaced, indent, indentSize,
     } = this.props;
 
+    let { className } = this.props;
+
+    if (this.state.hovered) {
+      className += ` ${prefixCls}-hover`;
+    }
+
     const cells = [];
 
     const expandIcon = (

src/createStore.js

@@ -0,0 +1,25 @@
+export default function createStore(initialState) {
+  let state = initialState;
+  const listeners = [];
+
+  function setState(partial) {
+    state = { ...state, ...partial };
+    for (let i = 0; i < listeners.length; i++) {
+      listeners[i]();
+    }
+  }
+
+  function getState() {
+    return state;
+  }
+
+  function subscribe(listener) {
+    listeners.push(listener);
+  }
+
+  return {
+    setState,
+    getState,
+    subscribe,
+  };
+}

src/store.js

@@ -0,0 +1 @@
+

tests/createStore.spec.js

@@ -0,0 +1,23 @@
+const expect = require('expect.js');
+const createStore = require('../src/createStore');
+
+describe('createStore', () => {
+  it('create with initial state', () => {
+    const store = createStore({ a: 1 });
+    expect(store.getState()).to.eql({ a: 1 });
+  });
+
+  it('setState', () => {
+    const store = createStore({ a: 1 });
+    store.setState({ a: 2 });
+    expect(store.getState()).to.eql({ a: 2 });
+  });
+
+  it('subscribe', () => {
+    const store = createStore({ a: 1 });
+    store.subscribe(() => {
+      expect(store.getState()).to.eql({ a: 2 });
+    });
+    store.setState({ a: 2 });
+  });
+});

tests/index.js

@@ -1,5 +1,2 @@
-require('./basic.spec.js');
-require('./groupingColumnTitle.spec.js');
-require('./rowClick.spec.js');
-require('./fixedColumns.spec.js');
-require('./ColumnManager.spec.js');
+const req = require.context('.', false, /\.spec\.js$/);
+req.keys().forEach(req);