Add animations with react-flip-move

[jehartzog]

I use react-flip-move as a drop in replacement for my tables to create easy animations. It's easy enough to modify existing code that already builds tables in react by replacing the element with

<table>
  <FlipMove typeName='tbody'>
    {this.renderRows()}
  </FlipMove>
</table>

I believe the easiest to add this functionality would be the ability to pass in a wrapper object that react-bootstrap-table would use to replace the tbody element that react-bootstrap-table creates, but the API doesn't currently allow this.

Does this approach seem correct?

[AllenFang]

@jehartzog, thanks for your feedback, I'm not very familiar with animation, but I maybe a wrapper object is a well design. Anyway, I prefer to fixing some bugs and forward to v3.0.0 as production release, then I'll try to support this feature, so PR is welcome.

[jehartzog]

I have started the PR and have basic animations working. The insert animation actually looks great, the remove one animations but not correctly. I also created a demo page to try them out.

I'll need to cleanup the way I pass props so you can actually configure the animations, but I'd like to do the proof of concept to make sure FlipMove will able to easily add great animations with minimal API changes.

Let me know if you are interested in getting this PR more polished or see a better way to proceed!

[AllenFang]

@jehartzog, awesome, how about show me your demo page or your demo code, Because I'm pretty care the usage of this component(or your implement function), it is supposed to be very easy and simple to understand or configure for user, In addition, I always doing some clean or tuning for each PR, so just focus on the implementation for functionality and let me know if you got any trouble 👍

Thanks your contribution and you did a great job

[jehartzog]

I tried to get a version of this up and running on my own remote server but I mainly work with Meteor so am slow with webpack, sorry! If you find yourself wanting to play with you on your own machine you can grab the branch.

So far this is all the code I modified (besides passing in the prop) in TableBody.js started at line 167:

    // TODO Refactor this to allow passing in more animations controls to FlipMove
    let tableBody = null;
    if (this.props.animate) {
      console.log('here');
      tableBody = <FlipMove typeName='tbody' ref='tbody'>{ tableRows }</FlipMove>;
    } else {
      tableBody = <tbody ref='tbody'>{ tableRows }</tbody>;
    }

    return (
      <div ref='container'
        className={ classSet('react-bs-container-body', this.props.bodyContainerClass) }
        style={ this.props.style }>
        <table className={ tableClasses }>
          { React.cloneElement(tableHeader, { ref: 'header' }) }
          { tableBody }
        </table>
      </div>
    );

As you can see, it's as easy as swapping out the <tbody> component with <FlipMove>, passing some props, and then fixing all the issues that pop up :D.

Here is an example, the add row actually works well, but the delete row has some css issues. I'm still trying to figure out if this is a bug in FlipMove or just how it works with react-bootstrap-table.

[AllenFang]

That's cool, thank you :)