move expanding state from TableBody to BootstrapTable

AllenFang · Jan 7, 2017 · 7987f39 · 7987f39
1 parent a82c8f3
commit 7987f39
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -40,6 +40,7 @@ class BootstrapTable extends Component {
     this.state = {
       data: this.getTableData(),
       currPage: currPage,
+      expanding: [],
       sizePerPage: this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0],
       selectedRowKeys: this.store.getSelectedRowKeys()
     };
@@ -331,7 +332,8 @@ class BootstrapTable extends Component {
             onRowMouseOut={ this.handleRowMouseOut }
             onSelectRow={ this.handleSelectRow }
             noDataText={ this.props.options.noDataText }
-            adjustHeaderWidth={ this._adjustHeaderWidth } />
+            expanding={ this.state.expanding }
+            onExpand={ this.handleExpandRow } />
         </div>
         { tableFilter }
         { pagination }
@@ -390,6 +392,12 @@ class BootstrapTable extends Component {
     });
   }
 
+  handleExpandRow = expanding => {
+    this.setState({ expanding }, () => {
+      this.props.adjustHeaderWidth();
+    });
+  }
+
   handlePaginationData = (page, sizePerPage) => {
     const { onPageChange, pageStartIndex } = this.props.options;
     if (onPageChange) {

diff --git a/src/TableBody.js b/src/TableBody.js
@@ -15,9 +15,7 @@ class TableBody extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      currEditCell: null,
-      expanding: [],
-      lastExpand: null
+      currEditCell: null
     };
   }
 
@@ -142,7 +140,7 @@ class TableBody extends Component {
           <ExpandComponent
             className={ trClassName }
             bgColor={ this.props.expandRowBgColor || this.props.selectRow.bgColor || undefined }
-            hidden={ !(this.state.expanding.indexOf(key) > -1) }
+            hidden={ !(this.props.expanding.indexOf(key) > -1) }
             colSpan={ expandColSpan }
             width={ "100%" }>
             { this.props.expandComponent(data) }
@@ -236,15 +234,13 @@ class TableBody extends Component {
       (expandBy === Const.EXPAND_BY_ROW ||
       (expandBy === Const.EXPAND_BY_COL && columns[columnIndex].expandable))) {
       const rowKey = this.props.data[rowIndex - 1][keyField];
-      let expanding = this.state.expanding;
+      let expanding = this.props.expanding;
       if (expanding.indexOf(rowKey) > -1) {
         expanding = expanding.filter(k => k !== rowKey);
       } else {
         expanding.push(rowKey);
       }
-      this.setState({ expanding }, () => {
-        this.props.adjustHeaderWidth();
-      });
+      this.props.onExpand(expanding);
     }
   }
 
@@ -316,6 +312,7 @@ TableBody.propTypes = {
   expandComponent: PropTypes.func,
   expandRowBgColor: PropTypes.string,
   expandBy: PropTypes.string,
-  adjustHeaderWidth: PropTypes.func
+  expanding: PropTypes.array,
+  onExpand: PropTypes.func
 };
 export default TableBody;