Participant list is now animated on events, fixes #302
parent
136037d83f
commit
feac3f069d
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue