1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import React from 'react'
import {Pressable, TextInput, View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
export function MessageInput({
onSendMessage,
onFocus,
onBlur,
}: {
onSendMessage: (message: string) => void
onFocus: () => void
onBlur: () => void
}) {
const t = useTheme()
const [message, setMessage] = React.useState('')
const inputRef = React.useRef<TextInput>(null)
const onSubmit = React.useCallback(() => {
onSendMessage(message)
setMessage('')
setTimeout(() => {
inputRef.current?.focus()
}, 100)
}, [message, onSendMessage])
return (
<View
style={[
a.flex_row,
a.py_sm,
a.px_sm,
a.rounded_full,
a.mt_sm,
t.atoms.bg_contrast_25,
]}>
<TextInput
accessibilityLabel="Text input field"
accessibilityHint="Write a message"
value={message}
onChangeText={setMessage}
placeholder="Write a message"
style={[a.flex_1, a.text_sm, a.px_sm]}
onSubmitEditing={onSubmit}
onFocus={onFocus}
onBlur={onBlur}
placeholderTextColor={t.palette.contrast_500}
ref={inputRef}
/>
<Pressable
accessibilityRole="button"
style={[
a.rounded_full,
a.align_center,
a.justify_center,
{height: 30, width: 30, backgroundColor: t.palette.primary_500},
]}
onPress={onSubmit}>
<Text style={a.text_md}>🐴</Text>
</Pressable>
</View>
)
}
|
