animate adding new persons

admin/src/components/people/people-list.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { peopleSelector, fetchAllPeople } from '../../ducks/people'
 import { List } from 'react-virtualized'
+import { TransitionMotion, spring } from 'react-motion'
+
 import PersonCard from './person-card'
 
 import 'react-virtualized/styles.css'
@@ -13,20 +15,48 @@ class PeopleList extends Component {
 
   render() {
     return (
-      <List
-        rowRenderer={this.rowRenderer}
-        rowCount={this.props.people.length}
-        rowHeight={150}
-        height={400}
-        width={400}
-      />
+      <TransitionMotion
+        styles={this.styles}
+        willEnter={this.willEnter}
+        willLeave={this.willLeave}
+      >
+        {(interpolated) => (
+          <List
+            scrollToIndex={interpolated.length - 1}
+            rowRenderer={this.rowRenderer(interpolated)}
+            rowCount={interpolated.length}
+            rowHeight={150}
+            height={400}
+            width={400}
+          />
+        )}
+      </TransitionMotion>
     )
   }
 
-  rowRenderer = ({ style, index, key }) => {
-    const person = this.props.people[index]
+  willEnter = () => ({
+    opacity: 0
+  })
+
+  willLeave = () => ({
+    opacity: spring(0, { stiffness: 20, damping: 40 })
+  })
+
+  get styles() {
+    return this.props.people.map((people) => ({
+      key: people.uid,
+      style: {
+        opacity: spring(1, { stiffness: 50, damping: 40 })
+      },
+      data: people
+    }))
+  }
+
+  rowRenderer = (interpolated) => ({ style, index, key }) => {
+    const rowCtx = interpolated[index]
+    const person = rowCtx.data
     return (
-      <div style={style} key={key}>
+      <div style={{ ...style, ...rowCtx.style }} key={key}>
         <PersonCard person={person} />
       </div>
     )