Merge branch 'SebastianCoetzee-master'

examples/js/manipulation/del-row-custom-confirm.js

@@ -0,0 +1,49 @@
+'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);
+
+function customConfirm(next){
+  if (confirm("(It's a custom confirm function)Are you sure you want to delete?")){
+      //If the confirmation is true, call the function that
+      //continues the deletion of the record.
+      next();
+  }
+}
+
+var options = {
+  handleConfirmDeleteRow: customConfirm
+}
+
+//If you want to enable deleteRow, you must enable row selection also.
+var selectRowProp = {
+  mode: "checkbox"
+};
+
+export default class DeleteRowCustomComfirmTable extends React.Component{
+  render(){
+    return (
+      <BootstrapTable data={products} deleteRow={true} selectRow={selectRowProp} 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/manipulation/demo.js

@@ -5,6 +5,7 @@ import SearchTable from './search-table';
 import ColumnFilterTable from './filter-table';
 import MultiSearchTable from './multi-search-table';
 import ExportCSVTable from './export-csv-table';
+import DeleteRowCustomComfirmTable from './del-row-custom-confirm';
 
 class Demo extends React.Component {
   render() {
@@ -66,6 +67,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">Custom Confirmation for row deletion Example</div>
+            <div className="panel-body">
+              <h5>Source in /examples/js/manipulation/del-row-custom-confirm.js</h5>
+              <DeleteRowCustomComfirmTable />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/BootstrapTable.js

@@ -394,14 +394,25 @@ class BootstrapTable extends React.Component {
   }
 
   handleDropRow(rowKeys) {
-    let result;
+    let that = this;
     let dropRowKeys = rowKeys?rowKeys:this.store.getSelectedRowKeys();
-    //add confirm befor the delete action
+    //add confirm before the delete action if that option is set.
     if (dropRowKeys && dropRowKeys.length > 0) {
-      if (!confirm('Are you sure want delete?')) {
-        return
+      if (this.props.options.handleConfirmDeleteRow){
+        this.props.options.handleConfirmDeleteRow(
+          function(){
+            that.deleteRow(dropRowKeys);
+          }
+        );
+      } else if (confirm('Are you sure want delete?')) {
+        this.deleteRow(dropRowKeys);
       }
     }
+  }
+
+  deleteRow(dropRowKeys){
+
+    let result;
     this.store.remove(dropRowKeys);  //remove selected Row
     this.store.setSelectedRowKey([]);  //clear selected row key
 
@@ -427,6 +438,7 @@ class BootstrapTable extends React.Component {
     if (this.props.options.afterDeleteRow) {
       this.props.options.afterDeleteRow(dropRowKeys);
     }
+
   }
 
   handleFilterData(filterObj) {
@@ -623,7 +635,8 @@ BootstrapTable.propTypes = {
     onSortChange: React.PropTypes.func,
     onPageChange: React.PropTypes.func,
     onSizePerPageList: React.PropTypes.func,
-    noDataText: React.PropTypes.string
+    noDataText: React.PropTypes.string,
+    handleConfirmDeleteRow: React.PropTypes.func
   }),
   fetchInfo: React.PropTypes.shape({
     dataTotalSize: React.PropTypes.number,
@@ -675,7 +688,8 @@ BootstrapTable.defaultProps = {
     sizePerPage: undefined,
     paginationSize: Const.PAGINATION_SIZE,
     onSizePerPageList: undefined,
-    noDataText: undefined
+    noDataText: undefined,
+    handleConfirmDeleteRow: undefined
   },
   fetchInfo: {
     dataTotalSize: 0,