Merge branch 'master' into v4.0.0-dev

Author: AllenFang

examples/js/expandRow/custom-expand-class.js

@@ -0,0 +1,94 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    if (i < 3) {
+      products.push({
+        id: id,
+        name: 'Item name ' + id,
+        price: 2100 + i,
+        expand: [ {
+          fieldA: 'test1',
+          fieldB: (i + 1) * 99,
+          fieldC: (i + 1) * Math.random() * 100,
+          fieldD: '123eedd' + i
+        }, {
+          fieldA: 'test2',
+          fieldB: i * 99,
+          fieldC: i * Math.random() * 100,
+          fieldD: '123eedd' + i
+        } ]
+      });
+    } else {
+      products.push({
+        id: id,
+        name: 'Item name ' + id,
+        price: 2100 + i
+      });
+    }
+  }
+}
+addProducts(5);
+
+class BSTable extends React.Component {
+  render() {
+    if (this.props.data) {
+      return (
+        <BootstrapTable data={ this.props.data }>
+          <TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
+        </BootstrapTable>);
+    } else {
+      return (<p>?</p>);
+    }
+  }
+}
+
+export default class CustomExpandClass extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  isExpandableRow(row) {
+    if (row.id < 3) return true;
+    else return false;
+  }
+
+  expandComponent(row) {
+    return (
+      <BSTable data={ row.expand } />
+    );
+  }
+
+  render() {
+    const options = {
+      expandBodyClass: function(row, rowIndex) {
+        if (rowIndex > 1) {
+          return 'custom-expand-body-1';
+        } else {
+          return 'custom-expand-body-0';
+        }
+      },
+      expandParentClass: 'custom-expand-parent'  // expandParentClass also accept callback function
+    };
+    return (
+      <BootstrapTable data={ products }
+        options={ options }
+        expandableRow={ this.isExpandableRow }
+        expandComponent={ this.expandComponent }
+        search>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

examples/js/expandRow/demo.js

@@ -1,4 +1,5 @@
 /* eslint max-len: 0 */
+require('./style.css');
 import React from 'react';
 import ExpandRow from './expandRow';
 import SingleExpandRow from './single-expanding';
@@ -7,6 +8,7 @@ import ManageExpandExternal from './manage-expanding';
 import ExpandWithSelection from './expand-row-with-selection';
 import ExpandWithCellEdit from './expand-row-with-cellEdit';
 import ExpandIndicator from './expand-indicator';
+import CustomExpandClassName from './custom-expand-class';
 import CustomExpandIndicator from './custom-expand-indicator';
 import renderLinks from '../utils';
 
@@ -29,6 +31,10 @@ class Demo extends React.Component {
           { renderLinks('expandRow/expand-indicator.js') }
           <ExpandIndicator/>
         </Panel>
+        <Panel header={ 'Custom Expand Row ClassName' }>
+          { renderLinks('expandRow/custom-expand-class.js') }
+          <CustomExpandClassName/>
+        </Panel>
         <Panel header={ 'Custom Row Expand Indicator' }>
           { renderLinks('expandRow/custom-expand-indicator.js') }
           <CustomExpandIndicator/>

examples/js/expandRow/style.css

@@ -0,0 +1,16 @@
+.custom-expand-parent {
+  background-color: salmon;
+}
+
+.custom-expand-body-1 {
+  font-size: 8px;
+  color: lawngreen;
+  background-color: darkkhaki;
+}
+
+.custom-expand-body-0 {
+  font-size: 16px;
+  font-weight: bold;
+  background-color: springgreen;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}

src/BootstrapTable.js

@@ -420,6 +420,8 @@ class BootstrapTable extends Component {
             expandableRow={ this.props.expandableRow }
             expandRowBgColor={ this.props.options.expandRowBgColor }
             expandBy={ this.props.options.expandBy || Const.EXPAND_BY_ROW }
+            expandBodyClass={ this.props.options.expandBodyClass }
+            expandParentClass={ this.props.options.expandParentClass }
             columns={ columns }
             trClassName={ this.props.trClassName }
             striped={ this.props.striped }
@@ -1275,13 +1277,17 @@ class BootstrapTable extends Component {
         }
       }
     } else {
-      // debugger;
-      React.Children.forEach(this.props.children, (child, i) => {
-        if (child && child.props.width) {
-          header[i].style.width = `${child.props.width}px`;
-          header[i].style.minWidth = `${child.props.width}px`;
+      for (const i in bodyHeader) {
+        if (bodyHeader.hasOwnProperty(i)) {
+          const child = bodyHeader[i];
+          if (child.style.width) {
+            header[i].style.width = child.style.width;
+          }
+          if (child.style.minWidth) {
+            header[i].style.minWidth = child.style.minWidth;
+          }
         }
-      });
+      }
     }
     this.isVerticalScroll = isScroll;
   }
@@ -1479,6 +1485,8 @@ BootstrapTable.propTypes = {
     expanding: PropTypes.array,
     onExpand: PropTypes.func,
     onlyOneExpanding: PropTypes.bool,
+    expandBodyClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+    expandParentClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
     beforeShowError: PropTypes.func,
     printToolBar: PropTypes.bool,
     insertFailIndicator: PropTypes.string
@@ -1628,6 +1636,8 @@ BootstrapTable.defaultProps = {
     expanding: [],
     onExpand: undefined,
     onlyOneExpanding: false,
+    expandBodyClass: null,
+    expandParentClass: null,
     beforeShowError: undefined,
     printToolBar: true,
     insertFailIndicator: Const.INSERT_FAIL_INDICATOR

src/ExpandComponent.js

@@ -11,7 +11,7 @@ class ExpandComponent extends Component {
       style: {
         backgroundColor: this.props.bgColor
       },
-      className: classSet(className)
+      className: this.props.hidden ? null : classSet(className)
     };
     return (
       <tr hidden={ this.props.hidden } width={ this.props.width } { ...trCss }>

src/TableBody.js

@@ -148,11 +148,19 @@ class TableBody extends Component {
           this.props.expanding.indexOf(key) > -1,
           ExpandColumnCustomComponent, r, data
       );
+      const haveExpandContent = this.props.expandableRow && this.props.expandableRow(data);
+      const isExpanding = haveExpandContent && this.props.expanding.indexOf(key) > -1;
+
       // add by bluespring for className customize
       let trClassName = this.props.trClassName;
       if (isFun(this.props.trClassName)) {
         trClassName = this.props.trClassName(data, r);
       }
+      if (isExpanding && this.props.expandParentClass) {
+        trClassName += isFun(this.props.expandParentClass) ?
+          this.props.expandParentClass(data, r) :
+          this.props.expandParentClass;
+      }
       const result = [ <TableRow isSelected={ selected } key={ key } className={ trClassName }
         index={ r }
         row={ data }
@@ -175,14 +183,17 @@ class TableBody extends Component {
         { tableColumns }
       </TableRow> ];
 
-      if (this.props.expandableRow && this.props.expandableRow(data)) {
+      if (haveExpandContent) {
+        const expandBodyClass = isFun(this.props.expandBodyClass) ?
+          this.props.expandBodyClass(data, r) :
+          this.props.expandBodyClass;
         result.push(
           <ExpandComponent
             key={ key + '-expand' }
             row={ data }
-            className={ trClassName }
+            className={ expandBodyClass }
             bgColor={ this.props.expandRowBgColor || this.props.selectRow.bgColor || undefined }
-            hidden={ !(this.props.expanding.indexOf(key) > -1) }
+            hidden={ !isExpanding }
             colSpan={ expandColSpan }
             width={ "100%" }>
             { this.props.expandComponent(data) }
@@ -304,12 +315,13 @@ class TableBody extends Component {
       expandBy,
       expandableRow,
       selectRow: {
-        clickToExpand
+        clickToExpand,
+        hideSelectColumn
       },
       onlyOneExpanding
     } = this.props;
     const selectRowAndExpand = this._isSelectRowDefined() && !clickToExpand ? false : true;
-    columnIndex = this._isSelectRowDefined() ? columnIndex - 1 : columnIndex;
+    columnIndex = this._isSelectRowDefined() && !hideSelectColumn ? columnIndex - 1 : columnIndex;
     columnIndex = this._isExpandColumnVisible() ? columnIndex - 1 : columnIndex;
     if (expandableRow &&
       selectRowAndExpand &&
@@ -503,6 +515,8 @@ TableBody.propTypes = {
   expandBy: PropTypes.string,
   expanding: PropTypes.array,
   onExpand: PropTypes.func,
+  expandBodyClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+  expandParentClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
   onlyOneExpanding: PropTypes.bool,
   beforeShowError: PropTypes.func,
   keyBoardNav: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object ]),