jiti-meet/react/features/participants-pane/components/web/MeetingParticipantItems.js

118 lines
2.8 KiB
JavaScript

// @flow
import React from 'react';
import MeetingParticipantItem from './MeetingParticipantItem';
type Props = {
/**
* The translated ask unmute text for the qiuck action buttons.
*/
askUnmuteText: string,
/**
* Whether or not the local participant is in a breakout room.
*/
isInBreakoutRoom: boolean,
/**
* Callback for the mouse leaving this item.
*/
lowerMenu: Function,
/**
* Callback for the activation of this item's context menu.
*/
toggleMenu: Function,
/**
* Callback used to open a confirmation dialog for audio muting.
*/
muteAudio: Function,
/**
* The translated text for the mute participant button.
*/
muteParticipantButtonText: string,
/**
* The meeting participants.
*/
participantIds: Array<string>,
/**
* Callback used to open an actions drawer for a participant.
*/
openDrawerForParticipant: Function,
/**
* True if an overflow drawer should be displayed.
*/
overflowDrawer: boolean,
/**
* The if of the participant for which the context menu should be open.
*/
raiseContextId?: string,
/**
* The aria-label for the ellipsis action.
*/
participantActionEllipsisLabel: string,
/**
* Current search string.
*/
searchString?: string,
/**
* The translated "you" text.
*/
youText: string
}
/**
* Component used to display a list of meeting participants.
*
* @returns {ReactNode}
*/
function MeetingParticipantItems({
askUnmuteText,
isInBreakoutRoom,
lowerMenu,
toggleMenu,
muteAudio,
muteParticipantButtonText,
participantIds,
openDrawerForParticipant,
overflowDrawer,
raiseContextId,
participantActionEllipsisLabel,
searchString,
youText
}: Props) {
const renderParticipant = id => (
<MeetingParticipantItem
askUnmuteText = { askUnmuteText }
isHighlighted = { raiseContextId === id }
isInBreakoutRoom = { isInBreakoutRoom }
key = { id }
muteAudio = { muteAudio }
muteParticipantButtonText = { muteParticipantButtonText }
onContextMenu = { toggleMenu(id) }
onLeave = { lowerMenu }
openDrawerForParticipant = { openDrawerForParticipant }
overflowDrawer = { overflowDrawer }
participantActionEllipsisLabel = { participantActionEllipsisLabel }
participantID = { id }
searchString = { searchString }
youText = { youText } />
);
return participantIds.map(renderParticipant);
}
// Memoize the component in order to avoid rerender on drawer open/close.
export default React.memo<Props>(MeetingParticipantItems);