stream-chat-react/dist/components/MessageInput/EditMessageForm.js

React components to create chat conversations or livestream style chat

import React, { useCallback, useEffect } from 'react';
import { MessageInput } from './MessageInput';
import { MessageInputFlat } from './MessageInputFlat';
import { Modal as DefaultModal } from '../Modal';
import { useComponentContext, useMessageContext, useMessageInputContext, useTranslationContext, } from '../../context';
import { useMessageComposer, useMessageComposerHasSendableData } from './hooks';
const EditMessageFormSendButton = () => {
    const { t } = useTranslationContext();
    const hasSendableData = useMessageComposerHasSendableData();
    return (React.createElement("button", { className: 'str-chat__edit-message-send', "data-testid": 'send-button-edit-form', disabled: !hasSendableData, type: 'submit' }, t('Send')));
};
export const EditMessageForm = () => {
    const { t } = useTranslationContext('EditMessageForm');
    const messageComposer = useMessageComposer();
    const { clearEditingState, handleSubmit } = useMessageInputContext('EditMessageForm');
    const cancel = useCallback(() => {
        clearEditingState?.();
        messageComposer.restore();
    }, [clearEditingState, messageComposer]);
    useEffect(() => {
        const onKeyDown = (event) => {
            if (event.key === 'Escape')
                cancel();
        };
        document.addEventListener('keydown', onKeyDown);
        return () => document.removeEventListener('keydown', onKeyDown);
    }, [cancel]);
    return (React.createElement("form", { autoComplete: 'off', className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
        React.createElement(MessageInputFlat, null),
        React.createElement("div", { className: 'str-chat__edit-message-form-options' },
            React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: cancel, type: 'button' }, t('Cancel')),
            React.createElement(EditMessageFormSendButton, null))));
};
export const EditMessageModal = ({ additionalMessageInputProps, }) => {
    const { EditMessageInput = EditMessageForm, Modal = DefaultModal } = useComponentContext();
    const { clearEditingState } = useMessageContext();
    const messageComposer = useMessageComposer();
    const onEditModalClose = useCallback(() => {
        clearEditingState();
        messageComposer.restore();
    }, [clearEditingState, messageComposer]);
    return (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: onEditModalClose, open: true },
        React.createElement(MessageInput, { clearEditingState: clearEditingState, focus: true, hideSendButton: true, Input: EditMessageInput, ...additionalMessageInputProps })));
};