@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
64 lines • 3.87 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useCallback, useState } from 'react';
import { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';
import { ChatMessageComponentAsEditBoxPicker } from './ChatMessageComponentAsEditBoxPicker';
/**
* @private
*/
export const ChatMyMessageComponent = (props) => {
const { onDeleteMessage, onSendMessage, message, onCancelEditMessage, onUpdateMessage } = props;
const [isEditing, setIsEditing] = useState(false);
const [focusMessageAfterEditing, setFocusMessageAfterEditing] = useState(false);
const onEditClick = useCallback(() => {
setIsEditing(true);
setFocusMessageAfterEditing(false);
}, []);
const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
const content = 'content' in message ? message.content : undefined;
const onRemoveClick = useCallback(() => {
if (onDeleteMessage && message.messageId) {
onDeleteMessage(message.messageId);
}
// when fail to send, message does not have message id, delete message using clientMessageId
else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
onDeleteMessage(clientMessageId);
}
}, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
const onResendClick = useCallback(() => {
onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
let newContent = content !== null && content !== void 0 ? content : '';
onSendMessage && onSendMessage(newContent);
}, [message, onDeleteMessage, clientMessageId, onSendMessage, content]);
const onSubmitHandler = useCallback(
// due to a bug in babel, we can't use arrow function here
// affecting conditional-compile-remove(attachment-upload)
function (text) {
return __awaiter(this, void 0, void 0, function* () {
yield (onUpdateMessage === null || onUpdateMessage === void 0 ? void 0 : onUpdateMessage(message.messageId, text));
setIsEditing(false);
setFocusMessageAfterEditing(true);
});
}, [message, onUpdateMessage]);
const onCancelHandler = useCallback((messageId) => {
onCancelEditMessage === null || onCancelEditMessage === void 0 ? void 0 : onCancelEditMessage(messageId);
setIsEditing(false);
setFocusMessageAfterEditing(true);
}, [onCancelEditMessage]);
if (isEditing && message.messageType === 'chat') {
return React.createElement(ChatMessageComponentAsEditBoxPicker, { message: message, strings: props.strings, onSubmit: onSubmitHandler, onCancel: onCancelHandler });
}
else {
return React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings, inlineImageOptions: props.inlineImageOptions, shouldFocusFluentMessageBody: focusMessageAfterEditing }));
}
};
//# sourceMappingURL=ChatMyMessageComponent.js.map