@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
56 lines • 3.12 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { DefaultSystemMessage } from './DefaultSystemMessage';
import { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';
import { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';
/**
* The wrapper component to display different types of chat message.
*
* @private
*/
export const ChatMessageComponentWrapper = (props) => {
var _a;
const { message, styles, onRenderMessage, key: messageKey } = props;
const systemMessageStyle = useMemo(() => {
return {
paddingTop: '0.5rem'
};
}, []);
const customMessageStyle = useMemo(() => {
return {
paddingTop: '1rem',
paddingBottom: '0.25rem'
};
}, []);
switch (message.messageType) {
case 'chat':
{
const myChatMessageStyle = message.status === 'failed' ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
}
case 'system':
{
const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, props)) : onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
return React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent);
}
default:
{
// We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
return React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent);
}
}
};
const fluentChatComponent = (props) => {
if (props.message.mine === true) {
return React.createElement(FluentChatMyMessageComponent, Object.assign({}, props));
}
else {
return React.createElement(FluentChatMessageComponent, Object.assign({}, props));
}
};
//# sourceMappingURL=ChatMessageComponentWrapper.js.map