Ivan - Improve last events animations [skip ci]

client/package.json

@@ -68,7 +68,7 @@
     "react-document-title": "^1.0.2",
     "react-dom": "^15.0.1",
     "react-google-recaptcha": "^0.5.2",
-    "react-motion": "^0.4.4",
+    "react-motion": "^0.4.7",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.0",
     "react-router-redux": "^4.0.5",

client/src/app/admin/panel/dashboard/admin-panel-activity.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import _ from 'lodash';
+import {TransitionMotion, spring} from 'react-motion';
 
 import API from 'lib-app/api-call';
 import i18n from 'lib-app/i18n';
@@ -64,12 +66,30 @@ class AdminPanelActivity extends React.Component {
     renderList() {
         return (
             <div>
-                {this.state.activities.map(this.renderRow.bind(this))}
+                <TransitionMotion styles={this.getStyles()} willEnter={this.getEnterStyle.bind(this)}>
+                    {this.renderActivityList.bind(this)}
+                </TransitionMotion>
                 {(!this.state.limit) ? this.renderButton() : null}
             </div>
         );
     }
 
+    renderActivityList(styles) {
+        return (
+            <div>
+                {styles.map(this.renderAnimatedItem.bind(this))}
+            </div>
+        );
+    }
+
+    renderAnimatedItem(config, index) {
+        return (
+            <div style={config.style} key={config.key}>
+                {this.renderRow(config.data, index)}
+            </div>
+        );
+    }
+
     renderButton() {
         return (
             <SubmitButton type="secondary" onClick={this.retrieveNextPage.bind(this)}>
@@ -84,6 +104,21 @@ class AdminPanelActivity extends React.Component {
         );
     }
 
+    getStyles() {
+        return this.state.activities.map((item, index) => ({
+            key: index + '',
+            data: item,
+            style: {marginTop: spring(0), opacity: spring(1)}
+        }));
+    }
+
+    getEnterStyle() {
+        return {
+            marginTop: -20,
+            opacity: 0
+        };
+    }
+
     onMenuItemClick(index) {
         this.setState({
             page: 1,