Animation on row contraction

I really love the new expandable-row feature, however I got an issue with it : I can’t manage to animate the contraction of a row.

I succeeded to animate the expansion using the following code :

@keyframes EXPAND {
    0% { height: 0; }
    100% { height: 300px; }
}

.react-bs-container-body tr:nth-child(2n+2):not([hidden]) td div {
    animation: EXPAND 1s;
    height: 300px;
}

This code isn’t great but does the job, however I haven’t been able to animate contraction using the same method.

I think it’s because the hidden attribute is added instantly to the tr element before any animation can be performed.

Any idea ?

[AllenFang]

@ptitFicus, thanks your investigation, it’s awesome. As your mentioned, it’s really hard to tune the structure by div currently.

Anyway, I thought it’s better to solve this issue by pure css instead of a hacky javascript so I’ll try to find some solution, but this issue will be a lower priority to process.

Thanks, let me know if you still have any question.

[ptitFicus]

Ok, I spent some time on this, and here is what I think.

I don’t think that there is any way of animating row contraction with the current table structure. As mentioned before, this is due to the use of the hidden attribute, that instantly hide the table row, making it impossible to animate.

However the hidden tag is not the only issue here. Let’s pretend we move down the hidden attribute on the td element instead of the tr. Line animation would still be impossible since an html tr element cannot be animated directly : the only way to animate it is by animating its content, however the content would instantly disappear due to the use of the hidden attribute on the td element.

Note that the problem would be the same if using display: none instead of the hidden attribute, since it has the same instantaneous effect.

I ended up using a super dirty solution : I delay the click event on row to let some time to the component to animate, and when it’s done I rethrow the another click event to trigger line contraction. Here is what I get, the ugly part is in handleCellClick method.

/* 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);

export default class ExpandRow extends React.Component {
  constructor(props) {
    super(props);
    this.dataFormat = this.dataFormat.bind(this);
  }

  handleCellClick(e) {
    const clickedComponent = e.target;
    const expandedPart = clickedComponent.parentElement.parentElement.nextSibling.children[0].children[0];

    if (expandedPart.dataset.expanded === 'true') {
      expandedPart.dataset.expanded = 'false';
      e.stopPropagation();
      expandedPart.style.height = '0px';
      setTimeout(() => {
        // Re throw the event when the animation is done
        clickedComponent.parentElement.click();
      }, 2000);
    } else if (!expandedPart.dataset.expanded || expandedPart.dataset.expanded === 'false') {
      expandedPart.dataset.expanded = 'true';
      setTimeout(() => expandedPart.style.height = '300px', 10);
    }
  }

  dataFormat(cell) {
    return (
      <div onClick={ this.handleCellClick }>{ cell }</div>
    );
  }

  expandComponent() {
    const style = {
      transition: 'height 2s'
    };

    return (
      <div className='test-content' style={ style }>
        hello<br/>
        hello<br/>
        hello<br/>
        hello<br/>
        hello<br/>
        hello<br/>
        hello<br/>>
      </div>
    );
  }

  render() {
    const options = {
      expandRowBgColor: 'rgb(242, 255, 163)'
    };
    return (
      <BootstrapTable data={ products }
        options={ options }
        expandableRow={ () => true }
        expandComponent={ this.expandComponent }
        search>
        <TableHeaderColumn dataFormat={ this.dataFormat } dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataFormat={ this.dataFormat } dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataFormat={ this.dataFormat } dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

To conclude I think that animating contracting row is very complicated right now, but I don’t see any light modification of the codebase to make it easier. It would probably be simpler if using div instead of html table as suggested by #907, however it would be a huge modification of the codebase for such a limited need.