feat(react): focus chat input when replying

This commit is contained in:
Pavel Prichodko 2022-04-06 10:33:58 +02:00
parent d6ed1d8496
commit 211adef137
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
1 changed files with 16 additions and 3 deletions

View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect, useRef } from 'react'
import { useChatState } from '~/src/contexts/chat-context'
import { CrossIcon } from '~/src/icons/cross-icon'
@ -15,9 +15,22 @@ import { Text } from '~/src/system/text'
import type { Message } from '~/src/contexts/chat-context'
export const ChatInput = () => {
interface Props {
value?: string
}
export const ChatInput = (props: Props) => {
const { value } = props
const { state } = useChatState()
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
if (state.message) {
inputRef.current?.focus()
}
}, [state.message])
return (
<Wrapper>
<IconButton label="Add file">
@ -27,7 +40,7 @@ export const ChatInput = () => {
{state.message && <InputReply reply={state.message} />}
<InputWrapper>
<Input placeholder="Message" />
<Input ref={inputRef} placeholder="Message" defaultValue={value} />
<Flex>
<IconButton label="Pick emoji">
<EmojiIcon />