communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
33 lines • 1.68 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Persona, Stack, PersonaSize, Text } from '@fluentui/react';
import React from 'react';
import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';
/**
* @internal
* A component for displaying a single line of caption
*/
export const _Caption = (props) => {
const { displayName, userId, captionText, onRenderAvatar } = props;
const personaOptions = {
hidePersonaDetails: true,
size: PersonaSize.size32,
text: displayName,
showOverflowTooltip: false,
imageShouldStartVisible: true,
initialsTextColor: 'white',
styles: {
root: {
margin: '0.25rem'
}
}
};
const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
React.createElement(Stack.Item, { className: iconClassName }, userIcon),
React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
React.createElement(Stack.Item, { className: displayNameContainerClassName },
React.createElement(Text, { className: displayNameClassName }, displayName)),
React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText))));
};
//# sourceMappingURL=Caption.js.map