|
1 | 1 | import $ from 'jquery' |
2 | | -import React, {Component} from 'react' // eslint-disable-line |
| 2 | +import React, {Component} from 'react' |
3 | 3 | import {PropTypes} from 'prop-types' |
4 | 4 | import ReactDOM from 'react-dom' |
5 | | -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' |
| 5 | +import {CSSTransition, TransitionGroup} from 'react-transition-group' |
6 | 6 |
|
7 | 7 | class Events extends Component { |
8 | 8 | render () { |
| 9 | + const transitionOptions = { |
| 10 | + classNames: 'events', |
| 11 | + in: true, |
| 12 | + timeout: 500 |
| 13 | + } |
| 14 | + |
| 15 | + const defaultContent = (<CSSTransition key='empty-entry' {...transitionOptions}> |
| 16 | + <div>Nothing to see yet.</div> |
| 17 | + </CSSTransition>) |
| 18 | + |
9 | 19 | const content = this.props.list.map(function (entry) { |
10 | | - return <Events.Entry key={entry.id} { ...entry } /> |
| 20 | + return (<CSSTransition key={entry.id} {...transitionOptions}> |
| 21 | + <div className='events-list-entry'> |
| 22 | + <span className='event-name'>{entry.name}</span> |
| 23 | + {entry.content} |
| 24 | + </div> |
| 25 | + </CSSTransition>) |
11 | 26 | }) |
12 | 27 |
|
13 | 28 | return (<div className='events-list'> |
14 | | - <ReactCSSTransitionGroup transitionName='events' transitionLeave={false} transitionEnterTimeout={500}> |
15 | | - {content.length ? content : (<div key='empty-entry'> |
16 | | - Nothing to see yet. |
17 | | - </div>)} |
18 | | - </ReactCSSTransitionGroup> |
| 29 | + <TransitionGroup |
| 30 | + children={content.length ? content : defaultContent} |
| 31 | + enter={true} |
| 32 | + exit={false} |
| 33 | + /> |
19 | 34 | </div>) |
20 | 35 | } |
21 | 36 | } |
22 | 37 | Events.propTypes = { |
23 | 38 | list: PropTypes.array |
24 | 39 | } |
25 | 40 |
|
26 | | -Events.Entry = class Entry extends Component { |
27 | | - render () { |
28 | | - return (<div className='events-list-entry'> |
29 | | - <span className='event-name'>{this.props.name}</span> |
30 | | - {this.props.content} |
31 | | - </div>) |
32 | | - } |
33 | | -} |
34 | | -Events.Entry.propTypes = { |
35 | | - name: PropTypes.string, |
36 | | - content: PropTypes.object |
37 | | -} |
38 | | - |
39 | 41 | class CursorPosition extends Component { |
40 | 42 | render () { |
41 | 43 | return (<span className='cursor-position'> |
|
0 commit comments