communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
103 lines • 4.72 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Icon } from '@fluentui/react';
import React, { useCallback } from 'react';
import { useMemo } from 'react';
import { useLocale } from '../../localization';
import { _AttachmentCard } from './AttachmentCard';
import { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';
import { _isIdentityMicrosoftTeamsUser } from "../../../../acs-ui-common/src";
import { mergeClasses } from '@griffel/react';
import { useAttachmentCardGroupStyles } from '../styles/AttachmentCardGroup.styles';
/**
* @internal
*/
export const _AttachmentDownloadCards = (props) => {
const { attachments, message } = props;
const localeStrings = useLocale().strings.messageThread;
const attachmentCardGroupStyles = useAttachmentCardGroupStyles();
const getMenuActions = useCallback((attachment, localeStrings, message, action) => {
const defaultMenuActions = getDefaultMenuActions(localeStrings, message);
try {
const actions = action === null || action === void 0 ? void 0 : action(attachment, message);
if (actions && actions.length > 0) {
return actions;
}
else {
return defaultMenuActions;
}
}
catch (_a) {
return defaultMenuActions;
}
}, []);
const hasMultipleAttachments = useMemo(() => {
var _a, _b;
return ((_b = (_a = props.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1;
}, [props.attachments]);
if (!attachments || attachments.length === 0 || !attachments) {
return React.createElement(React.Fragment, null);
}
return (React.createElement("div", { className: mergeClasses(attachmentCardGroupStyles.root, hasMultipleAttachments
? attachmentCardGroupStyles.multipleAttachments
: attachmentCardGroupStyles.singleAttachment), "data-ui-id": "attachment-download-card-group" },
React.createElement(_AttachmentCardGroup, { attachmentGroupLayout: _AttachmentCardGroupLayout.Grid }, attachments &&
attachments.map((attachment) => (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: getMenuActions(attachment, localeStrings, message, props.actionsForAttachment), onActionHandlerFailed: props.onActionHandlerFailed, selfResizing: hasMultipleAttachments }))))));
};
/**
* @private
*/
const getDefaultMenuActions = (locale, chatMessage) => {
let actionName = locale.openAttachment;
// if message is sent by a Teams user, we need to use a different icon ("open")
const isTeamsUser = _isIdentityMicrosoftTeamsUser(chatMessage === null || chatMessage === void 0 ? void 0 : chatMessage.senderId);
if (isTeamsUser) {
return [
{
name: actionName,
icon: React.createElement(Icon, { iconName: "OpenAttachment" }),
onClick: defaultOnClickHandler
}
];
}
// otherwise, use the default icon ("download")
/* @conditional-compile-remove(file-sharing-acs) */
actionName = locale.downloadAttachment;
return [
Object.assign(Object.assign({}, defaultAttachmentMenuAction), { name: actionName })
];
};
/**
*
* The default action handler for downloading attachments. This handler will open the attachment's URL in a new tab.
*/
const defaultOnClickHandler = (attachment) => {
return new Promise((resolve) => {
window.open(attachment.url, '_blank', 'noopener,noreferrer');
resolve();
});
};
/**
* @beta
*
* The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.
*/
export const defaultAttachmentMenuAction = {
/**
*
* name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.
* by default it's an unlocalized string when this is used as a imported constant,
* but you can overwrite it with your own localized string.
*
* i.e. defaultAttachmentMenuAction.name = localize('Download');
*
* when no action is provided, the UI library will overwrite this name
* with a localized string this string when it's used in the UI.
*/
name: 'Download',
// this is the icon shown on the right of the attachment card
icon: React.createElement(Icon, { iconName: "DownloadAttachment", "data-ui-id": "attachment-download-card-download-icon" }),
// this is the action that runs when the icon is clicked
onClick: defaultOnClickHandler
};
//# sourceMappingURL=AttachmentDownloadCards.js.map