refine expand all

Author: AllenFang

src/BootstrapTable.js

@@ -61,7 +61,6 @@ class BootstrapTable extends Component {
       sizePerPage: this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0],
       selectedRowKeys: this.store.getSelectedRowKeys(),
       reset: false,
-      expandAllChilds: this.props.options.expandAllChilds,
       x: this.props.keyBoardNav ? 0 : -1,
       y: this.props.keyBoardNav ? 0 : -1
     };
@@ -488,9 +487,9 @@ class BootstrapTable extends Component {
             expandColumnVisible={ expandColumnOptions.expandColumnVisible }
             expandColumnComponent={ expandColumnOptions.expandColumnComponent }
             expandedColumnHeaderComponent={ expandColumnOptions.expandedColumnHeaderComponent }
-            expandAllChilds={ this.state.expandAllChilds }
+            noAnyExpand={ this.state.expanding.length === 0 }
+            expandAll={ this.props.options.expandAll }
             toggleExpandAllChilds={ this.toggleExpandAllChilds }
-            showExpandAllHeaderColumn={ this.props.options.showExpandAllHeaderColumn }
             expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
             { this.props.children }
           </TableHeader>
@@ -642,21 +641,18 @@ class BootstrapTable extends Component {
   }
 
   toggleExpandAllChilds() {
-    const { expandAllChilds } = this.state;
-    const compScope = this;
-    if (expandAllChilds) {
+    const { expanding } = this.state;
+    if (expanding.length > 0) {
       this.setState(() => {
         return {
           expanding: [],
-          expandAllChilds: !expandAllChilds,
           reset: false
         };
       });
     } else {
       this.setState(() => {
         return {
-          expanding: compScope.store.getAllRowkey(),
-          expandAllChilds: !expandAllChilds,
+          expanding: this.store.getAllRowkey(),
           reset: false
         };
       });
@@ -1741,8 +1737,7 @@ BootstrapTable.propTypes = {
     printToolBar: PropTypes.bool,
     insertFailIndicator: PropTypes.string,
     noAutoBOM: PropTypes.bool,
-    expandAllChilds: PropTypes.bool,
-    showExpandAllHeaderColumn: PropTypes.bool
+    expandAll: PropTypes.bool
   }),
   fetchInfo: PropTypes.shape({
     dataTotalSize: PropTypes.number
@@ -1913,8 +1908,7 @@ BootstrapTable.defaultProps = {
     printToolBar: true,
     insertFailIndicator: Const.INSERT_FAIL_INDICATOR,
     noAutoBOM: true,
-    expandAllChilds: false,
-    showExpandAllHeaderColumn: false
+    expandAll: false
   },
   fetchInfo: {
     dataTotalSize: 0

src/ExpandRowHeaderColumn.js

@@ -15,30 +15,34 @@ class ExpandRowHeaderColumn extends Component {
   render() {
     const {
       expandedColumnHeaderComponent,
-      expandAllChilds,
-      showExpandAllHeaderColumn
+      noAnyExpand,
+      expandAll
     } = this.props;
-    const expandedHeaderComponent = (expandAllChilds ? '(-)' : '(+)' );
+    const expandedHeaderComponent = noAnyExpand ?
+      <span className='fa fa-plus glyphicon glyphicon-plus'></span> :
+      <span className='fa fa-minus glyphicon glyphicon-minus'></span>;
     const ExpandedColumnHeaderComponent = expandedColumnHeaderComponent;
 
     return (
       <th rowSpan={ this.props.rowCount } style={ { textAlign: 'center' } }
         className='react-bs-table-expand-cell'
         data-is-only-head={ false }>
-        { showExpandAllHeaderColumn && <div onClick={ this.toggleExpandAllChilds }>
+        {
+          expandAll ? <div onClick={ this.toggleExpandAllChilds }>
           { expandedColumnHeaderComponent ?
             <ExpandedColumnHeaderComponent
-              expandAllChilds={ this.props.expandAllChilds } /> : expandedHeaderComponent }
-        </div> }
+              anyExpand={ !noAnyExpand } /> : expandedHeaderComponent }
+          </div> : null
+        }
       </th>
     );
   }
 }
 ExpandRowHeaderColumn.propTypes = {
   expandedColumnHeaderComponent: PropTypes.func,
   rowCount: PropTypes.number,
-  expandAllChilds: PropTypes.bool,
-  toggleExpandAllChilds: PropTypes.func,
-  showExpandAllHeaderColumn: PropTypes.bool
+  noAnyExpand: PropTypes.bool,
+  expandAll: PropTypes.bool,
+  toggleExpandAllChilds: PropTypes.func
 };
 export default ExpandRowHeaderColumn;

src/TableHeader.js

@@ -39,8 +39,8 @@ class TableHeader extends Component {
 
   render() {
     const { sortIndicator, sortList, onSort, reset, version, condensed, bordered,
-      expandedColumnHeaderComponent, expandAllChilds, toggleExpandAllChilds,
-      showExpandAllHeaderColumn } = this.props;
+      expandedColumnHeaderComponent, noAnyExpand, toggleExpandAllChilds, expandAll
+    } = this.props;
     const containerClasses = classSet(
       'react-bs-container-header',
       'table-header-wrapper',
@@ -68,19 +68,19 @@ class TableHeader extends Component {
         this.props.expandColumnBeforeSelectColumn &&
           <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
             expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
-            expandAllChilds={ expandAllChilds }
-            toggleExpandAllChilds={ toggleExpandAllChilds }
-            showExpandAllHeaderColumn={ showExpandAllHeaderColumn }/>
+            noAnyExpand={ noAnyExpand }
+            expandAll={ expandAll }
+            toggleExpandAllChilds={ toggleExpandAllChilds }/>
     ], [
       this.renderSelectRowHeader(rowCount + 1, rowKey++)
     ], [
       this.props.expandColumnVisible &&
         !this.props.expandColumnBeforeSelectColumn &&
           <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
             expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
-            expandAllChilds={ expandAllChilds }
-            toggleExpandAllChilds={ toggleExpandAllChilds }
-            showExpandAllHeaderColumn={ showExpandAllHeaderColumn }/>
+            noAnyExpand={ noAnyExpand }
+            expandAll={ expandAll }
+            toggleExpandAllChilds={ toggleExpandAllChilds }/>
     ]);
 
     React.Children.forEach(this.props.children, (elm) => {
@@ -182,9 +182,9 @@ TableHeader.propTypes = {
   expandedColumnHeaderComponent: PropTypes.func,
   expandColumnBeforeSelectColumn: PropTypes.bool,
   version: PropTypes.string,
-  expandAllChilds: PropTypes.bool,
-  toggleExpandAllChilds: PropTypes.func,
-  showExpandAllHeaderColumn: PropTypes.bool
+  noAnyExpand: PropTypes.bool,
+  expandAll: PropTypes.bool,
+  toggleExpandAllChilds: PropTypes.func
 };
 
 export default TableHeader;