Row expand animation v2

packages/react-bootstrap-table2-example/examples/row-expand/disable-animation.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: (row, rowIndex) => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  animate: false
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ), 
+  animate: false
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -165,6 +165,7 @@ import SelectionColumnPositionTable from 'examples/row-selection/selection-colum
 
 // work on row expand
 import BasicRowExpand from 'examples/row-expand';
+import DisableExpandAnimation from 'examples/row-expand/disable-animation';
 import RowExpandManagement from 'examples/row-expand/expand-management';
 import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
 import ExpandColumn from 'examples/row-expand/expand-column';
@@ -429,6 +430,7 @@ storiesOf('Row Selection', module)
 storiesOf('Row Expand', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Row Expand', () => <BasicRowExpand />)
+  .add('Disable Expand Animation', () => <DisableExpandAnimation />)
   .add('Expand Management', () => <RowExpandManagement />)
   .add('Non Expandabled Rows', () => <NonExpandableRows />)
   .add('Expand Indicator', () => <ExpandColumn />)

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

@@ -207,6 +207,7 @@ BootstrapTable.propTypes = {
   }),
   expandRow: PropTypes.shape({
     renderer: PropTypes.func,
+    animate: PropTypes.bool,
     expanded: PropTypes.array,
     onExpand: PropTypes.func,
     onExpandAll: PropTypes.func,
@@ -273,6 +274,7 @@ BootstrapTable.defaultProps = {
   },
   expandRow: {
     renderer: undefined,
+    animate: true,
     expanded: [],
     nonExpandable: []
   },

packages/react-bootstrap-table2/src/row-expand/expand-row.js

@@ -1,40 +1,76 @@
 import cs from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
+import { Transition } from 'react-transition-group';
 
-const ExpandRow = ({ children, expanded, onClosed, className, ...rest }) => (
-  <tr>
-    <td className={ cs('reset-expansion-style', className) } { ...rest }>
-      <CSSTransition
-        appear
-        in={ expanded }
-        timeout={ 400 }
-        classNames="row-expand-slide"
-        onExited={ onClosed }
-      >
-        <div>
-          <div className="row-expansion-style">
-            { children }
-          </div>
+export default class ExpandRow extends React.Component {
+  componentDidUpdate(prevProps) {
+    if (!this.props.animate && !this.props.expanded && prevProps.expanded !== this.props.expanded) {
+      this.props.onClosed();
+    }
+  }
+  onEnter() {
+    this.expandableDiv = document.getElementById(`expansion-div-${this.props.id}`);
+    if (!this.elementHeight) {
+      this.elementHeight = this.expandableDiv.offsetHeight;
+    }
+    this.expandableDiv.style.height = '0px';
+    const elementHeight = this.elementHeight;
+    setTimeout(() => { this.expandableDiv.style.height = `${elementHeight}px`; }, 1);
+  }
+  onExit() {
+    this.expandableDiv.style.height = '0px';
+  }
+  render() {
+    const { children, expanded, onClosed, className, id, animate, ...rest } = this.props;
+
+    let expansionDiv = (
+      <div id={ `expansion-div-${id}` } className="row-expansion-inner">
+        <div className="row-expansion-style">
+          {children}
         </div>
-      </CSSTransition>
-    </td>
-  </tr>
-);
+      </div>
+    );
+
+    if (animate) {
+      expansionDiv = (
+        <Transition
+          in={ expanded }
+          timeout={ 460 }
+          onEnter={ () => this.onEnter() }
+          onExit={ () => this.onExit() }
+          onExited={ onClosed }
+          unmountOnExit
+        >
+          {expansionDiv}
+        </Transition>
+      );
+    }
+
+    return (
+      <tr>
+        <td className={ cs('reset-expansion-style', className) } { ...rest }>
+          {expansionDiv}
+        </td>
+      </tr>
+    );
+  }
+}
 
 ExpandRow.propTypes = {
   children: PropTypes.node,
   expanded: PropTypes.bool,
   onClosed: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  animate: PropTypes.bool,
+  id: PropTypes.number
 };
 
 ExpandRow.defaultProps = {
   children: null,
   expanded: false,
   onClosed: null,
-  className: ''
+  className: '',
+  animate: true,
+  id: null
 };
-
-export default ExpandRow;

packages/react-bootstrap-table2/src/row-expand/row-consumer.js

@@ -34,7 +34,9 @@ export default (Component) => {
         className={ cs(props.className, parentClassName) }
       />,
       expanded || isClosing ? <ExpandRow
+        id={ key }
         key={ `${key}-expanding` }
+        animate={ expandRow.animate }
         colSpan={ props.visibleColumnSize }
         expanded={ expanded }
         onClosed={ () => expandRow.onClosed(key) }

packages/react-bootstrap-table2/style/react-bootstrap-table2.scss

@@ -163,20 +163,8 @@
   .row-expansion-style{
     padding: 8px;
   }
-  .row-expand-slide-appear{
-    max-height: 0;
+  .row-expansion-inner{
+    transition: height 0.5s ease;
     overflow: hidden;
   }
-  .row-expand-slide-appear-active{
-    max-height: 1000px;
-    transition: max-height 3s linear;
-  }
-  .row-expand-slide-exit{
-    max-height: 1000px;
-  }
-  .row-expand-slide-exit-active{
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 400ms cubic-bezier(0, 0.95, 0, 0.95)
-  }
 }