fix #213

packages/react-bootstrap-table2/src/row-event-delegater.js

@@ -0,0 +1,84 @@
+import _ from './utils';
+
+const events = [
+ 'onClick',
+ 'onMouseEnter',
+ 'onMouseLeave'
+];
+
+export default ExtendBase =>
+ class RowEventDelegater extends ExtendBase {
+ constructor(props) {
+ super(props);
+ this.clickNum = 0;
+ this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
+ this.createClickEventHandler = this.createClickEventHandler.bind(this);
+ }
+
+ createDefaultEventHandler(cb) {
+ return (e) => {
+ const { row, rowIndex } = this.props;
+ cb(e, row, rowIndex);
+ };
+ }
+
+ createClickEventHandler(cb) {
+ return (e) => {
+ const {
+ row,
+ selected,
+ keyField,
+ selectable,
+ rowIndex,
+ selectRow: {
+ onRowSelect,
+ clickToEdit
+ },
+ cellEdit: {
+ mode,
+ DBCLICK_TO_CELL_EDIT,
+ DELAY_FOR_DBCLICK
+ }
+ } = this.props;
+
+ const clickFn = () => {
+ if (cb) {
+ cb(e, row, rowIndex);
+ }
+ if (selectable) {
+ const key = _.get(row, keyField);
+ onRowSelect(key, !selected, rowIndex);
+ }
+ };
+
+ if (mode === DBCLICK_TO_CELL_EDIT && clickToEdit) {
+ this.clickNum += 1;
+ _.debounce(() => {
+ if (this.clickNum === 1) {
+ clickFn();
+ }
+ this.clickNum = 0;
+ }, DELAY_FOR_DBCLICK)();
+ } else {
+ clickFn();
+ }
+ };
+ }
+
+ delegate(attrs = {}) {
+ const newAttrs = {};
+ if (this.props.selectRow && this.props.selectRow.clickToSelect) {
+ newAttrs.onClick = this.createClickEventHandler(attrs.onClick);
+ }
+ Object.keys(attrs).forEach((attr) => {
+ if (!newAttrs[attr]) {
+ if (events.includes(attr)) {
+ newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
+ } else {
+ newAttrs[attr] = attrs[attr];
+ }
+ }
+ });
+ return newAttrs;
+ }
+ };

packages/react-bootstrap-table2/src/row.js

@@ -6,68 +6,10 @@ import PropTypes from 'prop-types';
 import _ from './utils';
 import Cell from './cell';
 import SelectionCell from './row-selection/selection-cell';
+import eventDelegater from './row-event-delegater';
 import Const from './const';
 
-class Row extends Component {
- constructor(props) {
- super(props);
- this.clickNum = 0;
- this.handleRowClick = this.handleRowClick.bind(this);
- this.handleSimpleRowClick = this.handleSimpleRowClick.bind(this);
- }
-
- handleRowClick(e) {
- const {
- row,
- selected,
- keyField,
- selectable,
- rowIndex,
- selectRow: {
- onRowSelect,
- clickToEdit
- },
- cellEdit: {
- mode,
- DBCLICK_TO_CELL_EDIT,
- DELAY_FOR_DBCLICK
- },
- attrs
- } = this.props;
-
- const clickFn = () => {
- if (attrs.onClick) {
- attrs.onClick(e, row, rowIndex);
- }
- if (selectable) {
- const key = _.get(row, keyField);
- onRowSelect(key, !selected, rowIndex);
- }
- };
-
- if (mode === DBCLICK_TO_CELL_EDIT && clickToEdit) {
- this.clickNum += 1;
- _.debounce(() => {
- if (this.clickNum === 1) {
- clickFn();
- }
- this.clickNum = 0;
- }, DELAY_FOR_DBCLICK)();
- } else {
- clickFn();
- }
- }
-
- handleSimpleRowClick(e) {
- const {
- row,
- rowIndex,
- attrs
- } = this.props;
-
- attrs.onClick(e, row, rowIndex);
- }
-
+class Row extends eventDelegater(Component) {
  render() {
  const {
  row,
@@ -96,14 +38,8 @@ class Row extends Component {
  } = cellEdit;
 
  const key = _.get(row, keyField);
- const { clickToSelect, hideSelectColumn } = selectRow;
-
- const trAttrs = { ...attrs };
- if (clickToSelect) {
- trAttrs.onClick = this.handleRowClick;
- } else if (attrs.onClick) {
- trAttrs.onClick = this.handleSimpleRowClick;
- }
+ const { hideSelectColumn } = selectRow;
+ const trAttrs = this.delegate(attrs);
 
  return (
  <tr style={ style } className={ className } { ...trAttrs }>

packages/react-bootstrap-table2/test/row.test.js

@@ -799,8 +799,10 @@ describe('Row', () => {
  selected
  selectable
  />);
- wrapper.instance().handleRowClick();
- wrapper.instance().handleRowClick();
+ // console.log(wrapper.instance());
+ const rowClick = wrapper.instance().createClickEventHandler();
+ rowClick();
+ rowClick();
  });
 
  it('should increase clickNum as 2', () => {