Skip to content

Commit 1b59c86

Browse files
OnestarLeeOnestarLee
committed
chore: apply review.
1 parent 7b9072c commit 1b59c86

File tree

13 files changed

+110
-77
lines changed

13 files changed

+110
-77
lines changed

‎packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
165165
if (inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
166166
if (messageToReply) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY;
167167
if (messageForThread) {
168-
if (messageForThread?.threadInfo && messageForThread?.threadInfo.replyCount > 0) {
168+
if (messageForThread.threadInfo && messageForThread.threadInfo.replyCount > 0) {
169169
return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_TO_THREAD;
170170
} else {
171171
return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_IN_THREAD;

‎packages/uikit-react-native/src/components/ChannelThreadMessageList/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ import {
3232
import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
3333
import { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from '../../hooks/useContext';
3434
import SBUUtils from '../../libs/SBUUtils';
35-
import ChatFlatList from '../ChatFlatList';
3635
import { ReactionAddons } from '../ReactionAddons';
36+
import ThreadChatFlatList from '../ThreadChatFlatList';
3737

3838
type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
3939
type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
@@ -147,7 +147,7 @@ const ChannelThreadMessageList = <T extends SendbirdGroupChannel | SendbirdOpenC
147147
{channel.isFrozen && (
148148
<ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
149149
)}
150-
<ChatFlatList
150+
<ThreadChatFlatList
151151
{...flatListProps}
152152
onTopReached={onTopReached}
153153
onBottomReached={onBottomReached}

‎packages/uikit-react-native/src/components/ChatFlatList/index.tsx

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,31 +32,19 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
3232
) {
3333
const { select } = useUIKitTheme();
3434
const contentOffsetY = useRef(0);
35-
// FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
36-
const inverted = useRef(props.inverted ?? Boolean(props.data?.length));
37-
inverted.current = props.inverted ?? Boolean(props.data?.length);
3835

3936
const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
4037
onScroll?.(event);
4138

42-
const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
39+
const { contentOffset } = event.nativeEvent;
4340

4441
const prevOffsetY = contentOffsetY.current;
4542
const currOffsetY = contentOffset.y;
4643

47-
if (inverted.current) {
48-
if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
49-
onScrolledAwayFromBottom(false);
50-
} else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
51-
onScrolledAwayFromBottom(true);
52-
}
53-
} else {
54-
const bottomDetectThreshold = contentSize.height - layoutMeasurement.height - BOTTOM_DETECT_THRESHOLD;
55-
if (bottomDetectThreshold < prevOffsetY && currOffsetY <= bottomDetectThreshold) {
56-
onScrolledAwayFromBottom(true);
57-
} else if (bottomDetectThreshold < currOffsetY && prevOffsetY <= bottomDetectThreshold) {
58-
onScrolledAwayFromBottom(false);
59-
}
44+
if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
45+
onScrolledAwayFromBottom(false);
46+
} else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
47+
onScrolledAwayFromBottom(true);
6048
}
6149

6250
contentOffsetY.current = contentOffset.y;
@@ -72,14 +60,6 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
7260
);
7361
}
7462

75-
const _onStartReached: () => void = () => {
76-
inverted.current ? onBottomReached() : onTopReached();
77-
};
78-
79-
const _onEndReached: () => void = () => {
80-
inverted.current ? onTopReached() : onBottomReached();
81-
};
82-
8363
return (
8464
<FlatListInternal
8565
bounces={false}
@@ -88,11 +68,12 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function ChatFlatList(
8868
keyboardShouldPersistTaps={'handled'}
8969
indicatorStyle={select({ light: 'black', dark: 'white' })}
9070
{...props}
91-
inverted={inverted.current}
71+
// FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
72+
inverted={Boolean(props.data?.length)}
9273
ref={ref}
93-
onEndReached={_onEndReached}
74+
onEndReached={onTopReached}
9475
onScrollToIndexFailed={NOOP}
95-
onStartReached={_onStartReached}
76+
onStartReached={onBottomReached}
9677
scrollEventThrottle={16}
9778
onScroll={_onScroll}
9879
keyExtractor={getMessageUniqId}

‎packages/uikit-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const GroupChannelMessageReplyInfo = ({ channel, message, onPress }: Props) => {
5353

5454
if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
5555

56-
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(message.threadInfo.replyCount || 0, 99);
56+
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(message.threadInfo.replyCount || 0, 99);
5757
const onPressReply = () => {
5858
onPress?.(message as SendbirdUserMessage | SendbirdFileMessage);
5959
};

‎packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleCon
2727
import type { GroupChannelProps } from '../../domain/groupChannel/types';
2828
import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
2929
import SBUUtils from '../../libs/SBUUtils';
30-
import VoiceMessageStatusManager from '../../libs/VoiceMessageStatusManager';
3130
import { TypingIndicatorType } from '../../types';
3231
import { ReactionAddons } from '../ReactionAddons';
3332
import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
@@ -229,34 +228,6 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
229228
],
230229
};
231230

232-
const renderVoiceMessage = () => {
233-
const voiceMessageProps: {
234-
durationMetaArrayKey?: string;
235-
onUnmount: () => void;
236-
initialCurrentTime?: number;
237-
onSubscribeStatus?: VoiceMessageStatusManager['subscribe'];
238-
onUnsubscribeStatus?: VoiceMessageStatusManager['unsubscribe'];
239-
} = {
240-
durationMetaArrayKey: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
241-
initialCurrentTime: voiceMessageStatusManager.getCurrentTime(message.channelUrl, message.messageId),
242-
onSubscribeStatus: voiceMessageStatusManager.subscribe,
243-
onUnsubscribeStatus: voiceMessageStatusManager.unsubscribe,
244-
onUnmount: () => {
245-
if (isVoiceMessage(message) && playerService.uri === message.url) {
246-
resetPlayer();
247-
}
248-
},
249-
};
250-
251-
return (
252-
<GroupChannelMessage.VoiceFile
253-
message={message as SendbirdFileMessage}
254-
{...voiceMessageProps}
255-
{...messageProps}
256-
/>
257-
);
258-
};
259-
260231
const renderMessage = () => {
261232
switch (getMessageType(message)) {
262233
case 'admin': {
@@ -299,7 +270,21 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
299270
);
300271
}
301272
case 'file.voice': {
302-
return renderVoiceMessage();
273+
return (
274+
<GroupChannelMessage.VoiceFile
275+
message={message as SendbirdFileMessage}
276+
durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
277+
initialCurrentTime={voiceMessageStatusManager.getCurrentTime(message.channelUrl, message.messageId)}
278+
onSubscribeStatus={voiceMessageStatusManager.subscribe}
279+
onUnsubscribeStatus={voiceMessageStatusManager.unsubscribe}
280+
onUnmount={() => {
281+
if (isVoiceMessage(message) && playerService.uri === message.url) {
282+
resetPlayer();
283+
}
284+
}}
285+
{...messageProps}
286+
/>
287+
);
303288
}
304289
case 'unknown':
305290
default: {

‎packages/uikit-react-native/src/components/ThreadChatFlatList/index.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { forwardRef, useRef } from 'react';
2+
import { FlatListProps, FlatList as RNFlatList, StyleSheet } from 'react-native';
3+
4+
import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
5+
import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
6+
7+
import FlatListInternal from '../ChatFlatList/FlatListInternal';
8+
9+
const BOTTOM_DETECT_THRESHOLD = 50;
10+
const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
11+
12+
type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
13+
onBottomReached: () => void;
14+
onTopReached: () => void;
15+
onScrolledAwayFromBottom: (value: boolean) => void;
16+
};
17+
const ThreadChatFlatList = forwardRef<RNFlatList, Props>(function ThreadChatFlatList(
18+
{ onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
19+
ref,
20+
) {
21+
const { select } = useUIKitTheme();
22+
const contentOffsetY = useRef(0);
23+
24+
const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
25+
onScroll?.(event);
26+
27+
const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
28+
29+
const prevOffsetY = contentOffsetY.current;
30+
const currOffsetY = contentOffset.y;
31+
32+
const bottomDetectThreshold = contentSize.height - layoutMeasurement.height - BOTTOM_DETECT_THRESHOLD;
33+
if (bottomDetectThreshold < prevOffsetY && currOffsetY <= bottomDetectThreshold) {
34+
onScrolledAwayFromBottom(true);
35+
} else if (bottomDetectThreshold < currOffsetY && prevOffsetY <= bottomDetectThreshold) {
36+
onScrolledAwayFromBottom(false);
37+
}
38+
39+
contentOffsetY.current = contentOffset.y;
40+
});
41+
42+
return (
43+
<FlatListInternal
44+
bounces={false}
45+
removeClippedSubviews
46+
keyboardDismissMode={'on-drag'}
47+
keyboardShouldPersistTaps={'handled'}
48+
indicatorStyle={select({ light: 'black', dark: 'white' })}
49+
{...props}
50+
ref={ref}
51+
onEndReached={onBottomReached}
52+
onScrollToIndexFailed={NOOP}
53+
onStartReached={onTopReached}
54+
scrollEventThrottle={16}
55+
onScroll={_onScroll}
56+
keyExtractor={getMessageUniqId}
57+
style={{ flex: 1, ...StyleSheet.flatten(props.style) }}
58+
maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: UNREACHABLE_THRESHOLD }}
59+
/>
60+
);
61+
});
62+
63+
export default ThreadChatFlatList;

‎packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
108108
sbOptions.uikit.groupChannel.channel.replyType === 'thread' &&
109109
sbOptions.uikit.groupChannel.channel.threadReplySelectType === 'thread'
110110
) {
111-
if (parentMessage && parentMessage.createdAt >= props.channel?.messageOffsetTimestamp) {
111+
if (parentMessage.createdAt >= props.channel.messageOffsetTimestamp) {
112112
onPressReplyMessageInThread(parentMessage as SendbirdSendableMessage, childMessage.createdAt);
113113
} else {
114114
toast.show(STRINGS.TOAST.FIND_PARENT_MSG_ERROR, 'error');

‎packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
4848

4949
const nickName = parentMessage.sender?.nickname || STRINGS.LABELS.USER_NO_NAME;
5050
const messageTimestamp = STRINGS.GROUP_CHANNEL_THREAD.PARENT_MESSAGE_TIME(parentMessage);
51-
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(parentMessage.threadInfo?.replyCount || 0);
51+
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(parentMessage.threadInfo?.replyCount || 0);
5252
const createMessagePressActions = useCreateMessagePressActions({
5353
channel: props.channel,
5454
currentUserId: props.currentUserId,

‎packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import type {
3535
GroupChannelPubSubContextPayload,
3636
} from '../domain/groupChannel/types';
3737
import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
38+
import { FileType } from '../platform/types';
3839
import pubsub from '../utils/pubsub';
3940

4041
const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
@@ -198,7 +199,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
198199
const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
199200
async (params) => {
200201
const processedParams = await onBeforeSendFileMessage(params);
201-
const fileSize = (processedParams.file as File)?.size ?? processedParams.fileSize;
202+
const fileSize = (processedParams.file as FileType)?.size ?? processedParams.fileSize;
202203
const uploadSizeLimit = sbOptions.appInfo.uploadSizeLimit;
203204

204205
if (fileSize && uploadSizeLimit && fileSize > uploadSizeLimit) {

‎packages/uikit-react-native/src/fragments/createGroupChannelThreadFragment.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ const createGroupChannelThreadFragment = (
141141
onPressMediaMessage={_onPressMediaMessage}
142142
/>
143143
),
144-
inverted: false,
145144
contentContainerStyle: { flexGrow: 1 },
146145
...flatListProps,
147146
}),

0 commit comments

Comments
 (0)