Merge pull request #119 from AllenFang/118

RE: [WIP] onRowClick feature

Author: AllenFang

demo/js/demo.bundle.js

@@ -6,6 +6,7 @@ import DefaultSelectTable from './default-select-table';
 import SelectBgColorTable from './select-bgcolor-table';
 import SelectHookTable from './select-hook-table';
 import HideSelectionColumnTable from './hide-selection-col-table';
+import RowClickTable from './row-click-table';
 
 class Demo extends React.Component {
   render() {
@@ -74,6 +75,15 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className="col-md-offset-1 col-md-8">
+          <div className="panel panel-default">
+            <div className="panel-heading">Row Click Example</div>
+            <div className="panel-body">
+              <h5>Source in /examples/js/selection/row-click-table.js</h5>
+              <RowClickTable />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

examples/js/selection/demo.js

@@ -0,0 +1,38 @@
+'use strict';
+import React from 'react';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+
+
+var products = [];
+
+function addProducts(quantity) {
+  var startId = products.length;
+  for (var i = 0; i < quantity; i++) {
+    var id = startId + i;
+    products.push({
+      id: id,
+      name: "Item name " + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+var options = {
+  onRowClick: function(row){
+    alert('You click row id: '+row.id);
+  }
+};
+
+export default class SingleSelectTable extends React.Component{
+  render(){
+    return (
+      <BootstrapTable data={products} options={options}>
+          <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+};

examples/js/selection/row-click-table.js

@@ -184,7 +184,9 @@ class BootstrapTable extends React.Component {
             selectRow={this.props.selectRow}
             cellEdit={this.props.cellEdit}
             selectedRowKeys={this.state.selectedRowKeys}
-            onSelectRow={this.handleSelectRow.bind(this)}/>
+            onRowClick={this.handleRowClick.bind(this)}
+            onSelectRow={this.handleSelectRow.bind(this)}
+          />
           {tableFilter}
           {pagination}
         </div>
@@ -223,6 +225,12 @@ class BootstrapTable extends React.Component {
     });
   }
 
+  handleRowClick(row) {
+    if (this.props.options.onRowClick) {
+      this.props.options.onRowClick(row);
+    }
+  }
+
   handleSelectAllRow(e) {
     var isSelected = e.currentTarget.checked;
     let selectedRowKeys = [];
@@ -525,6 +533,7 @@ BootstrapTable.propTypes = {
     afterTableComplete: React.PropTypes.func,
     afterDeleteRow: React.PropTypes.func,
     afterInsertRow: React.PropTypes.func,
+    onRowClick: React.PropTypes.func,
     page: React.PropTypes.number,
     sizePerPageList: React.PropTypes.array,
     sizePerPage: React.PropTypes.number,
@@ -571,6 +580,7 @@ BootstrapTable.defaultProps = {
     afterTableComplete: undefined,
     afterDeleteRow: undefined,
     afterInsertRow: undefined,
+    onRowClick: undefined,
     page: 1,
     sizePerPageList: Const.SIZE_PER_PAGE_LIST,
     sizePerPage: Const.SIZE_PER_PAGE_LIST[0],

src/BootstrapTable.js

@@ -104,6 +104,7 @@ class TableBody extends React.Component{
         <TableRow isSelected={selected} key={r} className={trClassName}
           selectRow={isSelectRowDefined?this.props.selectRow:undefined}
           enableCellEdit={this.props.cellEdit.mode !== Const.CELL_EDIT_NONE}
+          onRowClick={this.handleRowClick.bind(this)}
           onSelectRow={this.handleSelectRow.bind(this)}>
           {selectRowColumn}
           {tableColumns}
@@ -158,6 +159,17 @@ class TableBody extends React.Component{
     )
   }
 
+  handleRowClick(rowIndex){
+    var key, selectedRow;
+    this.props.data.forEach(function(row, i){
+      if(i == rowIndex-1){
+        key = row[this.props.keyField];
+        selectedRow = row;
+      }
+    }, this);
+    this.props.onRowClick(selectedRow);
+  }
+
   handleSelectRow(rowIndex, isSelected){
     var key, selectedRow;
     this.props.data.forEach(function(row, i){
@@ -234,6 +246,7 @@ TableBody.propTypes = {
   condensed: React.PropTypes.bool,
   keyField: React.PropTypes.string,
   selectedRowKeys: React.PropTypes.array,
+  onRowClick: React.PropTypes.func,
   onSelectRow: React.PropTypes.func
 };
 export default TableBody;

src/TableBody.js

@@ -5,7 +5,9 @@ class TableRow extends React.Component{
 
   rowClick(e){
     if(e.target.tagName !== "INPUT")
-      this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected);
+      if (this.props.selectRow &&
+        this.props.selectRow.clickToSelect) this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected);
+      if (this.props.onRowClick) this.props.onRowClick(e.currentTarget.rowIndex);
   }
 
   render(){
@@ -18,7 +20,7 @@ class TableRow extends React.Component{
     };
 
     if(this.props.selectRow && !this.props.enableCellEdit &&
-      (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell)){
+      (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell) || this.props.onRowClick){
       return(
         <tr {...trCss} onClick={this.rowClick.bind(this)}>{this.props.children}</tr>
       )
@@ -32,6 +34,10 @@ class TableRow extends React.Component{
 TableRow.propTypes = {
   isSelected: React.PropTypes.bool,
   enableCellEdit: React.PropTypes.bool,
+  onRowClick: React.PropTypes.func,
   onSelectRow: React.PropTypes.func
 };
+TableRow.defaultProps = {
+  onRowClick: undefined
+}
 export default TableRow;