From dcb04f7927ec46143648afa647018812f1e0fbde Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Thu, 9 Feb 2017 21:12:38 -0300
Subject: [PATCH] Ivan - Improve last events animations [skip ci]

---
 client/package.json                           |  2 +-
 .../panel/dashboard/admin-panel-activity.js   | 37 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/client/package.json b/client/package.json
index 0033b6df..22a71851 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/app/admin/panel/dashboard/admin-panel-activity.js b/client/src/app/admin/panel/dashboard/admin-panel-activity.js
index 251462fb..608cd3c7 100644
--- a/client/src/app/admin/panel/dashboard/admin-panel-activity.js
+++ b/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,