88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
// @flow
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { TouchableOpacity } from 'react-native';
|
|
import { Text } from 'react-native-paper';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { createBreakoutRoomsEvent, sendAnalytics } from '../../../analytics';
|
|
import { hideDialog } from '../../../base/dialog/actions';
|
|
import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
|
|
import {
|
|
Icon,
|
|
IconClose,
|
|
IconRingGroup
|
|
} from '../../../base/icons';
|
|
import { isLocalParticipantModerator } from '../../../base/participants';
|
|
import styles from '../../../participants-pane/components/native/styles';
|
|
import { closeBreakoutRoom, moveToRoom, removeBreakoutRoom } from '../../actions';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* The room for which the menu is open.
|
|
*/
|
|
room: Object
|
|
}
|
|
|
|
const BreakoutRoomContextMenu = ({ room }: Props) => {
|
|
const dispatch = useDispatch();
|
|
const closeDialog = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
|
|
const isLocalModerator = useSelector(isLocalParticipantModerator);
|
|
const { t } = useTranslation();
|
|
|
|
const onJoinRoom = useCallback(() => {
|
|
sendAnalytics(createBreakoutRoomsEvent('join'));
|
|
dispatch(moveToRoom(room.jid));
|
|
closeDialog();
|
|
}, [ dispatch, room ]);
|
|
|
|
const onRemoveBreakoutRoom = useCallback(() => {
|
|
dispatch(removeBreakoutRoom(room.jid));
|
|
closeDialog();
|
|
}, [ dispatch, room ]);
|
|
|
|
const onCloseBreakoutRoom = useCallback(() => {
|
|
dispatch(closeBreakoutRoom(room.id));
|
|
closeDialog();
|
|
}, [ dispatch, room ]);
|
|
|
|
return (
|
|
<BottomSheet
|
|
addScrollViewPadding = { false }
|
|
onCancel = { closeDialog }
|
|
showSlidingView = { true }>
|
|
<TouchableOpacity
|
|
onPress = { onJoinRoom }
|
|
style = { styles.contextMenuItem }>
|
|
<Icon
|
|
size = { 24 }
|
|
src = { IconRingGroup } />
|
|
<Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.join')}</Text>
|
|
</TouchableOpacity>
|
|
{!room?.isMainRoom && isLocalModerator
|
|
&& !(room?.participants && Object.keys(room.participants).length > 0)
|
|
? <TouchableOpacity
|
|
onPress = { onRemoveBreakoutRoom }
|
|
style = { styles.contextMenuItem }>
|
|
<Icon
|
|
size = { 24 }
|
|
src = { IconClose } />
|
|
<Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.remove')}</Text>
|
|
</TouchableOpacity>
|
|
: <TouchableOpacity
|
|
onPress = { onCloseBreakoutRoom }
|
|
style = { styles.contextMenuItem }>
|
|
<Icon
|
|
size = { 24 }
|
|
src = { IconClose } />
|
|
<Text style = { styles.contextMenuItemText }>{t('breakoutRooms.actions.close')}</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
</BottomSheet>
|
|
);
|
|
};
|
|
|
|
export default BreakoutRoomContextMenu;
|