Merge pull request #364 from react-bootstrap-table/feat/351

Fix #351

docs/row-selection.md

@@ -16,6 +16,8 @@
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -156,6 +158,34 @@ const selectRow = {
 };
 ```
 
+### <a name='selectionRenderer'>selectRow.selectionRenderer - [Bool]</a>
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionRenderer: ({ mode, checked, disabled }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='selectionHeaderRenderer'>selectRow.selectionHeaderRenderer - [Bool]</a>
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.

packages/react-bootstrap-table2-example/examples/row-selection/custom-selection.js

@@ -0,0 +1,107 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-param-reassign: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -95,6 +95,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
@@ -222,6 +223,7 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)

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

@@ -142,7 +142,9 @@ BootstrapTable.propTypes = {
     classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     nonSelectable: PropTypes.array,
     bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    hideSelectColumn: PropTypes.bool
+    hideSelectColumn: PropTypes.bool,
+    selectionRenderer: PropTypes.func,
+    selectionHeaderRenderer: PropTypes.func
   }),
   onRowSelect: PropTypes.func,
   onAllRowsSelect: PropTypes.func,

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

@@ -14,7 +14,8 @@ export default class SelectionCell extends Component {
     onRowSelect: PropTypes.func,
     disabled: PropTypes.bool,
     rowIndex: PropTypes.number,
-    clickToSelect: PropTypes.bool
+    clickToSelect: PropTypes.bool,
+    selectionRenderer: PropTypes.func
   }
 
   constructor() {
@@ -53,16 +54,25 @@ export default class SelectionCell extends Component {
     const {
       mode: inputType,
       selected,
-      disabled
+      disabled,
+      selectionRenderer
     } = this.props;
 
     return (
       <td onClick={ this.handleClick }>
-        <input
-          type={ inputType }
-          checked={ selected }
-          disabled={ disabled }
-        />
+        {
+          selectionRenderer ? selectionRenderer({
+            mode: inputType,
+            checked: selected,
+            disabled
+          }) : (
+            <input
+              type={ inputType }
+              checked={ selected }
+              disabled={ disabled }
+            />
+          )
+        }
       </td>
     );
   }

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -22,7 +22,8 @@ export default class SelectionHeaderCell extends Component {
   static propTypes = {
     mode: PropTypes.string.isRequired,
     checkedStatus: PropTypes.string,
-    onAllRowsSelect: PropTypes.func
+    onAllRowsSelect: PropTypes.func,
+    selectionHeaderRenderer: PropTypes.func
   }
 
   constructor() {
@@ -52,25 +53,37 @@ export default class SelectionHeaderCell extends Component {
 
   render() {
     const {
-      CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_SINGLE
+      CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE
     } = Const;
 
-    const { mode, checkedStatus } = this.props;
+    const { mode, checkedStatus, selectionHeaderRenderer } = this.props;
 
     const checked = checkedStatus === CHECKBOX_STATUS_CHECKED;
 
     const indeterminate = checkedStatus === CHECKBOX_STATUS_INDETERMINATE;
 
-    return mode === ROW_SELECT_SINGLE
-      ? <th data-row-selection />
-      : (
-        <th data-row-selection onClick={ this.handleCheckBoxClick }>
-          <CheckBox
-            { ...this.props }
-            checked={ checked }
-            indeterminate={ indeterminate }
-          />
-        </th>
+    const attrs = {};
+    let content;
+    if (selectionHeaderRenderer) {
+      content = selectionHeaderRenderer({
+        mode,
+        checked,
+        indeterminate
+      });
+      attrs.onClick = this.handleCheckBoxClick;
+    } else if (mode === ROW_SELECT_MULTIPLE) {
+      content = (
+        <CheckBox
+          { ...this.props }
+          checked={ checked }
+          indeterminate={ indeterminate }
+        />
       );
+      attrs.onClick = this.handleCheckBoxClick;
+    }
+
+    return (
+      <th data-row-selection { ...attrs }>{ content }</th>
+    );
   }
 }

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

@@ -193,5 +193,36 @@ describe('<SelectionCell />', () => {
         expect(wrapper.find('input').get(0).props.disabled).toBeTruthy();
       });
     });
+
+    describe('when selectionRenderer prop is defined', () => {
+      const DummySelection = () => <div className="dummy" />;
+      const selectionRenderer = jest.fn().mockReturnValue(<DummySelection />);
+
+      beforeEach(() => {
+        selectionRenderer.mockClear();
+        wrapper = shallow(
+          <SelectionCell
+            rowKey={ 1 }
+            mode={ mode }
+            rowIndex={ rowIndex }
+            selected={ selected }
+            selectionRenderer={ selectionRenderer }
+          />
+        );
+      });
+
+      it('should render component correctly', () => {
+        expect(wrapper.find(DummySelection)).toHaveLength(1);
+      });
+
+      it('should call props.selectionRenderer correctly', () => {
+        expect(selectionRenderer).toHaveBeenCalledTimes(1);
+        expect(selectionRenderer).toHaveBeenCalledWith({
+          mode,
+          checked: selected,
+          disabled: wrapper.prop('disabled')
+        });
+      });
+    });
   });
 });

packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js

@@ -126,6 +126,36 @@ describe('<SelectionHeaderCell />', () => {
         expect(wrapper.find(CheckBox).get(0).props.indeterminate).toBe(indeterminate);
       });
     });
+
+    describe('when props.selectionHeaderRenderer is defined', () => {
+      const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;
+      const DummySelection = () => <div className="dummy" />;
+      const selectionHeaderRenderer = jest.fn().mockReturnValue(<DummySelection />);
+
+      beforeEach(() => {
+        selectionHeaderRenderer.mockClear();
+        wrapper = shallow(
+          <SelectionHeaderCell
+            mode="checkbox"
+            checkedStatus={ checkedStatus }
+            selectionHeaderRenderer={ selectionHeaderRenderer }
+          />
+        );
+      });
+
+      it('should render correctly', () => {
+        expect(wrapper.find(DummySelection)).toHaveLength(1);
+      });
+
+      it('should call props.selectionHeaderRenderer correctly', () => {
+        expect(selectionHeaderRenderer).toHaveBeenCalledTimes(1);
+        expect(selectionHeaderRenderer).toHaveBeenCalledWith({
+          mode: 'checkbox',
+          checked: checkedStatus === Const.CHECKBOX_STATUS_CHECKED,
+          indeterminate: checkedStatus === Const.CHECKBOX_STATUS_INDETERMINATE
+        });
+      });
+    });
   });
 });