@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
84 lines • 5.36 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { concatStyleSets, Stack } from '@fluentui/react';
import { EndCallButton } from "../../../../../../react-components/src";
import React, { useMemo } from 'react';
import { useState, useCallback } from 'react';
import { usePropsFor } from '../../hooks/usePropsFor';
import { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from '../../styles/Buttons.styles';
import { Prompt } from '../Prompt';
import { useLocale } from '../../../localization';
/** @private */
export const EndCall = (props) => {
var _a;
const compactMode = props.displayType === 'compact';
const hangUpButtonProps = usePropsFor(EndCallButton);
const localeStrings = useLocale().strings;
const endCallDiaglogLabels = useMemo(() => ({
confirmButtonLabel: localeStrings.call.endCallConfirmButtonLabel,
heading: localeStrings.call.endCallConfirmDialogTitle,
text: localeStrings.call.leaveConfirmDialogContent,
closeButtonLabel: localeStrings.call.close
}), [localeStrings.call.endCallConfirmButtonLabel, localeStrings.call.endCallConfirmDialogTitle, localeStrings.call.leaveConfirmDialogContent, localeStrings.call.close]);
const leaveDiaglogLabels = useMemo(() => ({
confirmButtonLabel: localeStrings.call.leaveConfirmButtonLabel,
heading: localeStrings.call.leaveConfirmDialogTitle,
text: localeStrings.call.leaveConfirmDialogContent,
closeButtonLabel: localeStrings.call.close
}), [localeStrings.call.leaveConfirmButtonLabel, localeStrings.call.leaveConfirmDialogContent, localeStrings.call.leaveConfirmDialogTitle, localeStrings.call.close]);
const [dialogLabels, setDialogLabels] = useState(leaveDiaglogLabels);
const { onHangUp } = hangUpButtonProps;
const [showHangUpConfirm, setShowHangUpConfirm] = React.useState(false);
const toggleConfirm = useCallback(() => {
setShowHangUpConfirm(!showHangUpConfirm);
}, [showHangUpConfirm]);
const onHangUpConfirm = useCallback((hangUpForEveryone) => {
onHangUp === null || onHangUp === void 0 ? void 0 : onHangUp(hangUpForEveryone);
toggleConfirm();
}, [onHangUp, toggleConfirm]);
const hangUpOverride = useCallback((forEveryone) => __awaiter(void 0, void 0, void 0, function* () {
if (props.mobileView || forEveryone === false /* value being false(not undefined) because it comes from endCall option */) {
onHangUp();
return;
}
setDialogLabels(forEveryone ? endCallDiaglogLabels : leaveDiaglogLabels);
toggleConfirm();
}), [endCallDiaglogLabels, leaveDiaglogLabels, onHangUp, props.mobileView, toggleConfirm]);
const styles = useMemo(() => { var _a; return concatStyleSets(compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [compactMode, props.styles]);
const enableBreakoutRoomMenu = !!props.returnFromBreakoutRoom;
const breakoutRoomMenuProps = {
items: [{
key: 'returnToMainMeeting',
text: localeStrings.call.returnFromBreakoutRoomButtonLabel,
title: localeStrings.call.returnFromBreakoutRoomButtonLabel,
onClick: () => {
var _a;
(_a = props.returnFromBreakoutRoom) === null || _a === void 0 ? void 0 : _a.call(props);
}
}, {
key: 'leaveRoomAndMainMeeting',
text: localeStrings.call.leaveBreakoutRoomAndMeetingButtonLabel,
title: localeStrings.call.leaveBreakoutRoomAndMeetingButtonLabel,
onClick: () => onHangUp()
}],
styles: props.styles
};
return React.createElement(Stack, null,
React.createElement(EndCallButton, Object.assign({ "data-ui-id": "call-composite-hangup-button" }, hangUpButtonProps, { onHangUp: props.disableEndCallModal ? onHangUp : hangUpOverride, styles: styles, showLabel: !compactMode, enableEndCallMenu: (_a = props.enableEndCallMenu) !== null && _a !== void 0 ? _a : false, menuProps: enableBreakoutRoomMenu ? breakoutRoomMenuProps : undefined })),
React.createElement(Prompt, Object.assign({}, dialogLabels, { styles: {
main: {
minWidth: '22.5rem',
padding: '1.5rem'
}
}, cancelButtonLabel: localeStrings.call.hangUpCancelButtonLabel, onConfirm: () => onHangUpConfirm(props.enableEndCallMenu), isOpen: showHangUpConfirm, onCancel: toggleConfirm })));
};
//# sourceMappingURL=EndCall.js.map