communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
49 lines • 3.7 kB
JavaScript
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());
});
};
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { useMemo } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, DefaultButton, PrimaryButton } from '@fluentui/react';
import { buttonsContainerClassName, buttonStyles, defaultButtonStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
import { useLocale } from '../localization';
/**
* @public
* a component for realTimeText modal
*/
export const RealTimeTextModal = (props) => {
const { showModal, onDismissModal, onStartRealTimeText } = props;
const localeStrings = useLocale().strings.realTimeTextModal;
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
const theme = useTheme();
const onDismiss = useCallback(() => {
if (onDismissModal) {
onDismissModal();
}
}, [onDismissModal]);
const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
if (onStartRealTimeText) {
yield onStartRealTimeText();
}
onDismiss();
}), [onDismiss, onStartRealTimeText]);
const RealTimeTextModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: RealTimeTextModalStyle },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
React.createElement(Text, { role: "heading", className: titleClassName, "aria-level": 1 }, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalTitle),
React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.realTimeTextCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextModalText),
React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm, "data-ui-id": "realTimeText-modal-confirm-button" },
React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextConfirmButtonLabel)),
React.createElement(DefaultButton, { onClick: onDismiss, styles: defaultButtonStyles() },
React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.realTimeTextCancelButtonLabel))))));
};
//# sourceMappingURL=RealTimeTextModal.js.map