this repo has no description
Clipclop tweaks (#3851)
* scroll on input resize
* add back the padding 🙊
* fix timestamps
+20
-13
+5
src/components/dms/MessageItem.tsx
+5
src/components/dms/MessageItem.tsx
···
32
32
next.sender?.did === currentAccount?.did
33
33
34
34
const isLastInGroup = useMemo(() => {
35
+
// TODO this means it's a placeholder. Let's figure out the right way to do this though!
36
+
if (item.id.length > 13) {
37
+
return false
38
+
}
39
+
35
40
// if the next message is from a different sender, then it's the last in the group
36
41
if (isFromSelf ? !isNextFromSelf : isNextFromSelf) {
37
42
return true
+6
-4
src/screens/Messages/Conversation/MessageInput.tsx
+6
-4
src/screens/Messages/Conversation/MessageInput.tsx
···
18
18
19
19
export function MessageInput({
20
20
onSendMessage,
21
-
onFocus,
21
+
scrollToEnd,
22
22
}: {
23
23
onSendMessage: (message: string) => void
24
-
onFocus?: () => void
24
+
scrollToEnd: () => void
25
25
}) {
26
26
const {_} = useLingui()
27
27
const t = useTheme()
···
54
54
55
55
setMaxHeight(max)
56
56
setIsInputScrollable(availableSpace < 30)
57
+
58
+
scrollToEnd()
57
59
},
58
-
[topInset],
60
+
[scrollToEnd, topInset],
59
61
)
60
62
61
63
return (
···
82
84
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
83
85
scrollEnabled={isInputScrollable}
84
86
blurOnSubmit={false}
85
-
onFocus={onFocus}
87
+
onFocus={scrollToEnd}
86
88
onContentSizeChange={onInputLayout}
87
89
ref={inputRef}
88
90
/>
+1
-1
src/screens/Messages/Conversation/MessageInput.web.tsx
+1
-1
src/screens/Messages/Conversation/MessageInput.web.tsx
+7
-7
src/screens/Messages/Conversation/MessagesList.tsx
+7
-7
src/screens/Messages/Conversation/MessagesList.tsx
···
168
168
[contentHeight.value, hasInitiallyScrolled, isAtBottom],
169
169
)
170
170
171
-
const onInputFocus = React.useCallback(() => {
172
-
flatListRef.current?.scrollToEnd({animated: true})
173
-
}, [flatListRef])
171
+
const scrollToEnd = React.useCallback(() => {
172
+
requestAnimationFrame(() =>
173
+
flatListRef.current?.scrollToEnd({animated: true}),
174
+
)
175
+
}, [])
174
176
175
177
const {bottom: bottomInset} = useSafeAreaInsets()
176
178
const {gtMobile} = useBreakpoints()
···
200
202
maintainVisibleContentPosition={{
201
203
minIndexForVisible: 1,
202
204
}}
205
+
contentContainerStyle={{paddingHorizontal: 10}}
203
206
removeClippedSubviews={false}
204
207
onContentSizeChange={onContentSizeChange}
205
208
onStartReached={onStartReached}
···
215
218
/>
216
219
</ScrollProvider>
217
220
</View>
218
-
<MessageInput
219
-
onSendMessage={onSendMessage}
220
-
onFocus={isWeb ? onInputFocus : undefined}
221
-
/>
221
+
<MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />
222
222
</KeyboardAvoidingView>
223
223
)
224
224
}