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 (
- {this.state.activities.map(this.renderRow.bind(this))} + + {this.renderActivityList.bind(this)} + {(!this.state.limit) ? this.renderButton() : null}
); } + renderActivityList(styles) { + return ( +
+ {styles.map(this.renderAnimatedItem.bind(this))} +
+ ); + } + + renderAnimatedItem(config, index) { + return ( +
+ {this.renderRow(config.data, index)} +
+ ); + } + renderButton() { return ( @@ -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,