Participant list is now animated on events, fixes #302

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-06 13:30:05 +02:00
parent 136037d83f
commit feac3f069d
2 changed files with 33 additions and 25 deletions

View File

@ -27,6 +27,7 @@
"react": "^16.10.2", "react": "^16.10.2",
"react-cookie-consent": "^2.5.0", "react-cookie-consent": "^2.5.0",
"react-dom": "^16.10.2", "react-dom": "^16.10.2",
"react-flip-toolkit": "^7.0.9",
"react-intl": "^3.4.0", "react-intl": "^3.4.0",
"react-redux": "^7.1.1", "react-redux": "^7.1.1",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",

View File

@ -7,6 +7,7 @@ import classnames from 'classnames';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { withRoomContext } from '../../../RoomContext'; import { withRoomContext } from '../../../RoomContext';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Flipper, Flipped } from 'react-flip-toolkit';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ListPeer from './ListPeer'; import ListPeer from './ListPeer';
import ListMe from './ListMe'; import ListMe from './ListMe';
@ -110,7 +111,11 @@ class ParticipantList extends React.PureComponent
defaultMessage='Participants' defaultMessage='Participants'
/> />
</li> </li>
<Flipper
flipKey={participants}
>
{ participants.map((peer) => ( { participants.map((peer) => (
<Flipped key={peer.id} flipId={peer.id}>
<li <li
key={peer.id} key={peer.id}
className={classnames(classes.listItem, { className={classnames(classes.listItem, {
@ -135,7 +140,9 @@ class ParticipantList extends React.PureComponent
/> />
} }
</li> </li>
</Flipped>
))} ))}
</Flipper>
</ul> </ul>
</div> </div>
); );