communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
32 lines • 3.36 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { Stack, Text, Link, Icon, useTheme, PrimaryButton, mergeStyleSets } from '@fluentui/react';
import { _formatString } from "../../../../acs-ui-common/src";
import { iconBannerContainerStyles, iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, sparkleIconBackdropStyles, textContainerStyles } from '../styles/SitePermissions.styles';
import { isValidString } from '../utils';
/**
* spacing for the icons in the banner.
*/
const tokens = { childrenGap: '2rem' };
/** @private */
export const SitePermissionsContainer = (props) => {
var _a, _b;
const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
const theme = useTheme();
const showPrimaryButton = onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText);
return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
props.cameraIconName && (React.createElement(Stack, null,
React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
props.connectorIconName && (React.createElement(Stack, { styles: iconContainerStyles, horizontal: true },
React.createElement(Icon, { styles: sparkleIconBackdropStyles(theme), iconName: props.connectorIconName }))),
props.microphoneIconName && (React.createElement(Stack, null,
React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
React.createElement(Stack, { styles: textContainerStyles },
strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React.createElement(Text, { styles: primaryTextStyles, role: "alert", "aria-live": "assertive" }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
showPrimaryButton && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick, autoFocus: true })),
onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick, autoFocus: !showPrimaryButton }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
};
//# sourceMappingURL=SitePermissionsScaffolding.js.map