Fix expand row

react-component · Oct 18, 2017 · f445dd8 · f445dd8
1 parent d6dc32b
commit f445dd8
Show file tree

Hide file tree

Showing 4 changed files with 472 additions and 13 deletions.
diff --git a/src/ExpandableTable.js b/src/ExpandableTable.js
@@ -174,11 +174,9 @@ class ExpandableTable extends React.Component {
   renderRows = (renderRows, record, index, indent, fixed, parentKey) => {
     const { expandedRowClassName, columns, expandedRowRender, childrenColumnName } = this.props;
     const childrenData = record[childrenColumnName];
-    const expanded = this.isRowExpanded(record, index);
-    const expandedRowContent = (expandedRowRender && expanded) ?
-      expandedRowRender(record, index, indent)  : null;
+    const expandedRowContent = expandedRowRender && expandedRowRender(record, index, indent);
 
-    if (expandedRowContent && expanded) {
+    if (expandedRowContent) {
       return [
         this.renderExpandedRow(
           parentKey,

diff --git a/src/ExpandedRowHeigh.js b/src/ExpandedRowHeigh.js
@@ -2,18 +2,19 @@ import React from 'react';
 import { connect } from 'mini-store';
 
 class ExpandedRowHeigh extends React.Component {
-  componentDidMount() {
-    this.setHeight();
+  componentDidUpdate() {
+    if (!this.props.fixed && this.rowRef && !this.set) {
+      this.setHeight();
+    }
   }
 
   setHeight() {
-    const { store, fixed, rowKey } = this.props;
-    if (!fixed) {
-      const { expandedRowsHeight } = store.getState();
-      const height = this.rowRef.getBoundingClientRect().height;
-      expandedRowsHeight[rowKey] = height;
-      store.setState({ expandedRowsHeight });
-    }
+    const { store, rowKey } = this.props;
+    const { expandedRowsHeight } = store.getState();
+    const height = this.rowRef.getBoundingClientRect().height;
+    expandedRowsHeight[rowKey] = height;
+    store.setState({ expandedRowsHeight });
+    this.set = true;
   }
 
   saveRowRef = (node) => {

diff --git a/src/TableRow.jsx b/src/TableRow.jsx
@@ -41,6 +41,18 @@ class TableRow extends React.Component {
     renderExpandIcon() {},
   }
 
+  constructor(props) {
+    super(props);
+
+    this.shouldRender = props.visible;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.visible || (!this.props.visible && nextProps.visible)) {
+      this.shouldRender = true;
+    }
+  }
+
   onRowClick = (event) => {
     const { record, index, onRowClick } = this.props;
     onRowClick(record, index, event);
@@ -69,6 +81,11 @@ class TableRow extends React.Component {
   }
 
   render() {
+
+    if (!this.shouldRender) {
+      return null;
+    }
+
     const {
       prefixCls,
       columns,