49 lines
1.4 KiB
TypeScript
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>
|
|
)
|
|
}
|