This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Application/Messages/Message/EditMessage/EditMessage.tsx

49 lines
1.4 KiB
TypeScript

import useTranslation from "next-translate/useTranslation"
import TextareaAutosize from "react-textarea-autosize"
import type { MessageProps } from "../Message"
export interface EditMessageProps extends MessageProps {
handleEdit: () => Promise<void>
handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
textareaRef: React.RefObject<HTMLTextAreaElement>
}
export const EditMessage: React.FC<
React.PropsWithChildren<EditMessageProps>
> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
const { t } = useTranslation()
const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
event,
) => {
event.preventDefault()
await handleEdit()
}
return (
<form
className="flex h-full w-full items-center"
onSubmit={handleEditSubmit}
onKeyDown={handleKeyDown}
>
<TextareaAutosize
className="scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none"
placeholder={t("application:write-a-message")}
wrap="soft"
maxRows={6}
name="message"
defaultValue={message.value}
ref={textareaRef}
autoFocus
onFocus={(event) => {
event.currentTarget.setSelectionRange(
event.currentTarget.value.length,
event.currentTarget.value.length,
)
}}
/>
</form>
)
}