@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
172 lines • 8.49 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, ContextualMenu, DirectionalHint, Persona, PersonaSize, useTheme } from '@fluentui/react';
import { _pxToRem, _formatString } from "../../../../acs-ui-common/src";
import React, { useMemo } from 'react';
import { chatMessageMenuStyle, menuIconStyleSet, menuItemIncreasedSizeStyles, menuSubIconStyleSet } from '../styles/ChatMessageComponent.styles';
/**
* Chat message actions flyout that contains actions such as Edit Message, or Remove Message.
*
* @private
*/
export const ChatMessageActionFlyout = (props) => {
var _a, _b;
const theme = useTheme();
const messageReadByCount = (_a = props.messageReadBy) === null || _a === void 0 ? void 0 : _a.length;
const sortedMessageReadyByList = [...((_b = props.messageReadBy) !== null && _b !== void 0 ? _b : [])].sort((a, b) => a.displayName.localeCompare(b.displayName));
const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map(person => {
const personaOptions = {
hidePersonaDetails: true,
size: PersonaSize.size24,
text: person.displayName,
showOverflowTooltip: false,
styles: {
root: {
margin: '0.25rem'
}
}
};
const { onRenderAvatar } = props;
return {
'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
key: person.displayName,
text: person.displayName,
itemProps: {
styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
},
onRenderIcon: () => {
var _a;
if (onRenderAvatar) {
const rendered = onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions);
if (rendered) {
return rendered;
}
}
return React.createElement(Persona, Object.assign({}, personaOptions));
},
iconProps: {
styles: menuIconStyleSet
}
};
});
const menuItems = useMemo(() => {
const items = [{
key: 'Edit',
'data-testid': 'chat-composite-message-contextual-menu-edit-action',
text: props.strings.editMessage,
itemProps: {
styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
},
iconProps: {
iconName: 'MessageEdit',
styles: menuIconStyleSet
},
onClick: props.onEditClick
}, {
key: 'Remove',
'data-testid': 'chat-composite-message-contextual-menu-remove-action',
text: props.strings.removeMessage,
itemProps: {
styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
},
iconProps: {
iconName: 'MessageRemove',
styles: menuIconStyleSet
},
onClick: props.onRemoveClick
}];
// only show read by x of y if more than 3 participants in total including myself
// only show read by x of y if less than 20 participants in total including myself. This is because read by is not supported for 20 or more participants.
// TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.remoteParticipantsCount < 19 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {
items.push({
key: 'Read Count',
'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
text: _formatString(props.strings.messageReadCount, {
messageReadByCount: `${messageReadByCount}`,
remoteParticipantsCount: `${props.remoteParticipantsCount}`
}),
itemProps: {
styles: concatStyleSets({
linkContent: {
color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary
},
root: {
borderTop: `1px solid ${theme.palette.neutralLighter}`
}
}, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
},
calloutProps: preventUnwantedDismissProps,
subMenuProps: {
items: messageReadByList !== null && messageReadByList !== void 0 ? messageReadByList : [],
calloutProps: preventUnwantedDismissProps,
styles: concatStyleSets({
root: {
maxWidth: _pxToRem(320),
span: {
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}
})
},
iconProps: {
iconName: 'MessageSeen',
styles: {
root: {
color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary
}
}
},
submenuIconProps: {
iconName: 'HorizontalGalleryRightButton',
styles: menuSubIconStyleSet
},
disabled: messageReadByCount <= 0
});
}
else if (props.messageStatus === 'failed' && props.strings.resendMessage) {
items.push({
key: 'Resend',
text: props.strings.resendMessage,
itemProps: {
styles: concatStyleSets({
linkContent: {
color: theme.palette.neutralPrimary
},
root: {
borderTop: `1px solid ${theme.palette.neutralLighter}`
}
}, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
},
calloutProps: preventUnwantedDismissProps,
iconProps: {
iconName: 'MessageResend',
styles: {
root: {
color: theme.palette.themeDarkAlt
}
}
},
onClick: props.onResendClick
});
}
return items;
}, [props.strings.editMessage, props.strings.removeMessage, props.strings.messageReadCount, props.strings.resendMessage, props.messageStatus, props.increaseFlyoutItemSize, props.onEditClick, props.onRemoveClick, props.onResendClick, props.remoteParticipantsCount, props.showMessageStatus, messageReadByCount, theme.palette.neutralPrimary, theme.palette.neutralTertiary, theme.palette.neutralLighter, theme.palette.themeDarkAlt, messageReadByList]);
// gap space uses pixels
return React.createElement(ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps });
};
/**
* Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
*/
const preventUnwantedDismissProps = {
preventDismissOnEvent: (ev) => {
return ev.type === 'resize';
}
};
const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: {
root: {
marginRight: '3px'
}
} });
//# sourceMappingURL=ChatMessageActionsFlyout.js.map