import React from 'react'
import ReactDOM from 'react-dom'
import { Transition, animated } from 'react-spring'

const defaultStyles = {
  overflow: 'hidden',
  width: '200px',
  backgroundColor: 'red',
  color: 'white',
  display: 'flex',
  justifyContent: 'center',
  fontSize: '4em',
  position: 'absolute',
  margin: 'auto',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  height: '100px',
};

class App extends React.PureComponent {
  state = { items: [] }

  componentDidMount() {
    // new item
    setTimeout(() => this.setState({ items: ['item1'] }), 2000)
    // new item in between
    setTimeout(() => this.setState({ items: ['item2'] }), 3000)
    // deleted items
    setTimeout(() => this.setState({ items: ['item3'] }), 4000)
    // scrambled order
    setTimeout(() => this.setState({ items: ['item4'] }), 5000)
  }

  render() {
    // display: 'flex', flexDirection: 'column', alignItems: 'center'
    return (
      <ul style={{ backgroundColor: 'white', position: 'relative', height: '100px', marginTop: '100px'}}>
        <Transition
          keys={this.state.items}
          from={{ opacity: 0, y: -200 }}
          enter={{ opacity: 1, y: 0 }}
          leave={{ opacity: 0, y: 200 }}
        >
          {this.state.items.map(item => ({ y, opacity }) => <li style={{ ...defaultStyles, opacity, transform: `translate3d(0, ${y}px, 0)` }}>{item}</li>)}
        </Transition>
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))