communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
102 lines • 4.83 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { ChatMessageContent } from '../ChatMessage/ChatMessageContent';
/* @conditional-compile-remove(data-loss-prevention) */
import { BlockedMessageContent } from '../ChatMessage/ChatMessageContent';
import { _AttachmentDownloadCards } from '../Attachment/AttachmentDownloadCards';
import { formatTimeForChatMessage, formatTimestampForChatMessage } from './Datetime';
import { chatMessageEditedTagStyle } from '../styles/ChatMessageComponent.styles';
/** @private
* Return the string value for the FluentUI message attached prop based on the message's attached status.
* @param attached - The message's attached status.
*/
export const getFluentUIAttachedValue = (messageAttachedStatus) => {
return messageAttachedStatus === 'top' || messageAttachedStatus === false ? 'top' : 'center';
};
/**
* @private
* Get the message bubble content for the message.
*/
export function getMessageBubbleContent(message, strings, userId, inlineImageOptions,
/* @conditional-compile-remove(mention) */
mentionDisplayOptions,
/**
* Optional callback to render message attachments in the message component.
*/
onRenderAttachmentDownloads,
/**
* Optional callback to define custom actions for attachments.
*/
actionsForAttachment) {
/* @conditional-compile-remove(data-loss-prevention) */
if (message.messageType === 'blocked') {
return (React.createElement("div", { tabIndex: 0 },
React.createElement(BlockedMessageContent, { message: message, strings: strings })));
}
return (React.createElement("div", { className: "ui-chat__message__content" },
React.createElement(ChatMessageContent, { message: message, strings: strings,
/* @conditional-compile-remove(mention) */
mentionDisplayOptions: mentionDisplayOptions, inlineImageOptions: inlineImageOptions }),
onRenderAttachmentDownloads
? onRenderAttachmentDownloads(message)
: defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment)));
}
/**
* Default component for rendering attachment downloads.
*/
const defaultOnRenderAttachmentDownloads = (message, strings, actionsForAttachment) => {
var _a;
const attachments = 'attachments' in message ? message.attachments : undefined;
return ((_a = attachments === null || attachments === void 0 ? void 0 : attachments.length) !== null && _a !== void 0 ? _a : 0) > 0 ? (React.createElement(_AttachmentDownloadCards, { message: message, attachments: attachments, actionsForAttachment: actionsForAttachment, strings: {
/* @conditional-compile-remove(file-sharing-acs) */
downloadAttachment: strings.downloadAttachment,
openAttachment: strings.openAttachment,
attachmentCardGroupMessage: strings.attachmentCardGroupMessage
} })) : (React.createElement(React.Fragment, null));
};
/** @private */
export const generateDefaultTimestamp = (createdOn, showDate, strings) => {
const formattedTimestamp = showDate
? formatTimestampForChatMessage(createdOn, new Date(), strings)
: formatTimeForChatMessage(createdOn);
return formattedTimestamp;
};
// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
/** @private */
export const generateCustomizedTimestamp = (createdOn, locale, onDisplayDateTimeString) => {
/* @conditional-compile-remove(date-time-customization) */
return onDisplayDateTimeString
? onDisplayDateTimeString(createdOn)
: locale.onDisplayDateTimeString
? locale.onDisplayDateTimeString(createdOn)
: '';
return '';
};
/**
* @private
* Get the edited tag for the message if it is edited.
*/
export const getMessageEditedDetails = (message, theme, editedTag) => {
const editedOn = 'editedOn' in message ? message.editedOn : undefined;
if (message.messageType === 'chat' && editedOn) {
return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, editedTag);
}
return undefined;
};
/**
* Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.
*
* This function removes the 'tabindex' and 'data-tabster' attributes from the provided
* HTMLDivElement, making it non-focusable and removing any associated keyboard navigation styles.
*
* @param node - The HTMLDivElement from which to remove the keyboard navigation styles. If null, the function does nothing.
*/
export const removeFluentUIKeyboardNavigationStyles = (node) => {
if (node) {
// Remove tabindex to make the div element non-focusable
node.removeAttribute('tabindex');
node.removeAttribute('data-tabster');
}
};
//# sourceMappingURL=ChatMessageComponentUtils.js.map