diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx index f2a91b0cfb..cbb860bf54 100644 --- a/package/src/components/ChannelList/ChannelList.tsx +++ b/package/src/components/ChannelList/ChannelList.tsx @@ -51,7 +51,10 @@ export type ChannelListProps = Partial< | 'PreviewMutedStatus' | 'PreviewStatus' | 'PreviewTitle' + | 'PreviewLastMessage' | 'PreviewUnreadCount' + | 'PreviewTypingIndicator' + | 'PreviewMessageDeliveryStatus' | 'ChannelDetailsBottomSheet' | 'getChannelActionItems' | 'swipeActionsEnabled' @@ -284,9 +287,12 @@ export const ChannelList = (props: ChannelListProps) => { PreviewAvatar, PreviewMessage, PreviewMutedStatus, + PreviewLastMessage, PreviewStatus, PreviewTitle, PreviewUnreadCount, + PreviewTypingIndicator, + PreviewMessageDeliveryStatus, ChannelDetailsBottomSheet, setFlatListRef, Skeleton = SkeletonDefault, @@ -417,7 +423,10 @@ export const ChannelList = (props: ChannelListProps) => { PreviewStatus, PreviewTitle, PreviewUnreadCount, + PreviewTypingIndicator, + PreviewMessageDeliveryStatus, ChannelDetailsBottomSheet, + PreviewLastMessage, swipeActionsEnabled, refreshing, refreshList, diff --git a/package/src/components/ChannelList/hooks/index.ts b/package/src/components/ChannelList/hooks/index.ts new file mode 100644 index 0000000000..ed59263a05 --- /dev/null +++ b/package/src/components/ChannelList/hooks/index.ts @@ -0,0 +1,11 @@ +export * from './listeners/useChannelUpdated'; +export * from './useChannelActionItems'; +export * from './useChannelActionItemsById'; +export * from './useChannelActions'; +export * from './useChannelMembershipState'; +export * from './useChannelMembersState'; +export * from './useChannelMuteActive'; +export * from './useChannelOnlineMemberCount'; +export * from './useIsDirectChat'; +export * from './useMutedChannels'; +export * from './useMutedUsers'; diff --git a/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts b/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts index c1910c60a5..7badceb7a0 100644 --- a/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts +++ b/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts @@ -30,6 +30,9 @@ export const useCreateChannelsContext = ({ PreviewMutedStatus, PreviewStatus, PreviewTitle, + PreviewLastMessage, + PreviewTypingIndicator, + PreviewMessageDeliveryStatus, PreviewUnreadCount, ChannelDetailsBottomSheet, swipeActionsEnabled, @@ -80,6 +83,9 @@ export const useCreateChannelsContext = ({ PreviewStatus, PreviewTitle, PreviewUnreadCount, + PreviewTypingIndicator, + PreviewMessageDeliveryStatus, + PreviewLastMessage, ChannelDetailsBottomSheet, swipeActionsEnabled, refreshing, diff --git a/package/src/components/ChannelPreview/ChannelMessagePreview.tsx b/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx similarity index 93% rename from package/src/components/ChannelPreview/ChannelMessagePreview.tsx rename to package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx index 0527ab3112..30d323c839 100644 --- a/package/src/components/ChannelPreview/ChannelMessagePreview.tsx +++ b/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx @@ -7,11 +7,11 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks'; import { primitives } from '../../theme'; -export type ChannelMessagePreviewProps = { +export type ChannelLastMessagePreviewProps = { message: LocalMessage | MessageResponse | DraftMessage; }; -export const ChannelMessagePreview = ({ message }: ChannelMessagePreviewProps) => { +export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreviewProps) => { const isMessageDeleted = message?.type === 'deleted'; const { theme: { semantics }, diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx index 27d184eba7..c6a129d240 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; -import { ChannelMessagePreview } from './ChannelMessagePreview'; +import { ChannelLastMessagePreview } from './ChannelLastMessagePreview'; import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus'; import { ChannelPreviewProps } from './ChannelPreview'; -import { ChannelTypingIndicatorPreview } from './ChannelTypingIndicatorPreview'; +import { ChannelPreviewTypingIndicator } from './ChannelPreviewTypingIndicator'; import { LastMessageType } from './hooks/useChannelPreviewData'; import { useChannelPreviewDraftMessage } from './hooks/useChannelPreviewDraftMessage'; @@ -13,6 +13,10 @@ import { useChannelPreviewPollLabel } from './hooks/useChannelPreviewPollLabel'; import { useChannelTypingState } from './hooks/useChannelTypingState'; +import { + ChannelsContextValue, + useChannelsContext, +} from '../../contexts/channelsContext/ChannelsContext'; import { useChatContext } from '../../contexts/chatContext/ChatContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; @@ -22,12 +26,34 @@ import { primitives } from '../../theme'; import { MessageStatusTypes } from '../../utils/utils'; import { ErrorBadge } from '../ui'; -export type ChannelPreviewMessageProps = Pick & { - lastMessage?: LastMessageType; -}; +export type ChannelPreviewMessageProps = Pick & + Partial< + Pick< + ChannelsContextValue, + 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage' + > + > & { + lastMessage?: LastMessageType; + }; export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { - const { channel, lastMessage } = props; + const { + channel, + lastMessage, + PreviewTypingIndicator: PreviewTypingIndicatorProp = ChannelPreviewTypingIndicator, + PreviewMessageDeliveryStatus: + PreviewMessageDeliveryStatusProp = ChannelMessagePreviewDeliveryStatus, + PreviewLastMessage: PreviewLastMessageProp = ChannelLastMessagePreview, + } = props; + const { + PreviewTypingIndicator: PreviewTypingIndicatorContext, + PreviewMessageDeliveryStatus: PreviewMessageDeliveryStatusContext, + PreviewLastMessage: PreviewLastMessageContext, + } = useChannelsContext(); + const PreviewTypingIndicator = PreviewTypingIndicatorProp || PreviewTypingIndicatorContext; + const PreviewMessageDeliveryStatus = + PreviewMessageDeliveryStatusProp || PreviewMessageDeliveryStatusContext; + const PreviewLastMessage = PreviewLastMessageProp || PreviewLastMessageContext; const { theme: { semantics }, } = useTheme(); @@ -52,14 +78,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error'; if (usersTyping.length > 0) { - return ; + return ; } if (draftMessage) { return ( {t('Draft')}: - + ); } @@ -94,15 +120,15 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { if (channel.data?.name || membersWithoutSelf.length > 1) { return ( - - + + ); } else { return ( - - + + ); } diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx index 43ea0c8b02..2b58da414b 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx @@ -111,7 +111,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW ]} testID='channel-preview-button' > - + & { +export type ChannelPreviewTypingIndicatorProps = Pick & { usersTyping: UserResponse[]; }; -export const ChannelTypingIndicatorPreview = ({ +export const ChannelPreviewTypingIndicator = ({ usersTyping, channel, -}: ChannelTypingIndicatorPreviewProps) => { +}: ChannelPreviewTypingIndicatorProps) => { const styles = useStyles(); const { t } = useTranslationContext(); diff --git a/package/src/components/ChannelPreview/hooks/index.ts b/package/src/components/ChannelPreview/hooks/index.ts new file mode 100644 index 0000000000..84a62ce423 --- /dev/null +++ b/package/src/components/ChannelPreview/hooks/index.ts @@ -0,0 +1,7 @@ +export * from './useChannelPreviewData'; +export * from './useChannelPreviewDraftMessage'; +export * from './useChannelPreviewPollLabel'; +export * from './useChannelPreviewDisplayName'; +export * from './useChannelPreviewDisplayPresence'; +export * from './useIsChannelMuted'; +export * from './useChannelTypingState'; diff --git a/package/src/components/ChannelPreview/index.ts b/package/src/components/ChannelPreview/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx index f190c0d2d5..4ec7d68606 100644 --- a/package/src/components/Chat/Chat.tsx +++ b/package/src/components/Chat/Chat.tsx @@ -3,10 +3,10 @@ import { Image, Platform } from 'react-native'; import { Channel, OfflineDBState } from 'stream-chat'; +import { useClientMutedUsers } from './hooks'; import { useAppSettings } from './hooks/useAppSettings'; import { useCreateChatContext } from './hooks/useCreateChatContext'; import { useIsOnline } from './hooks/useIsOnline'; -import { useMutedUsers } from './hooks/useMutedUsers'; import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext'; import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext'; @@ -172,7 +172,7 @@ const ChatWithContext = (props: PropsWithChildren) => { * Setup muted user listener * TODO: reimplement */ - const mutedUsers = useMutedUsers(client); + const mutedUsers = useClientMutedUsers(client); const debugRef = useDebugContext(); const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current; diff --git a/package/src/components/Chat/hooks/index.ts b/package/src/components/Chat/hooks/index.ts new file mode 100644 index 0000000000..2d7822d6a2 --- /dev/null +++ b/package/src/components/Chat/hooks/index.ts @@ -0,0 +1,5 @@ +export * from './useCreateChatClient'; +export * from './useIsOnline'; +export * from './useAppSettings'; +export * from './useClientMutedUsers'; +export * from './useCreateChatContext'; diff --git a/package/src/components/Chat/hooks/useMutedUsers.ts b/package/src/components/Chat/hooks/useClientMutedUsers.ts similarity index 90% rename from package/src/components/Chat/hooks/useMutedUsers.ts rename to package/src/components/Chat/hooks/useClientMutedUsers.ts index 07f88ce028..46f84de9b5 100644 --- a/package/src/components/Chat/hooks/useMutedUsers.ts +++ b/package/src/components/Chat/hooks/useClientMutedUsers.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import type { Event, Mute, StreamChat } from 'stream-chat'; -export const useMutedUsers = (client: StreamChat) => { +export const useClientMutedUsers = (client: StreamChat) => { const [mutedUsers, setMutedUsers] = useState(client?.mutedUsers || []); useEffect(() => { diff --git a/package/src/components/Chat/hooks/useSyncDatabase.ts b/package/src/components/Chat/hooks/useSyncDatabase.ts deleted file mode 100644 index 22645d7f37..0000000000 --- a/package/src/components/Chat/hooks/useSyncDatabase.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { StreamChat } from 'stream-chat'; - -type Params = { - client: StreamChat; - enableOfflineSupport: boolean; - initialisedDatabase: boolean; -}; - -/** - * @deprecated - * With the recent rework of the Offline Support feature, the handling of events has been moved - * to the stream-chat client instead of the SDK. This hook now does nothing and you can safely - * remove it from your code if you were using it. It will be removed in the next major release. - * @param client - * @param initialisedDatabase - */ -// @ts-ignore -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export const useSyncDatabase = ({ client, initialisedDatabase }: Params) => {}; diff --git a/package/src/components/index.ts b/package/src/components/index.ts index b5402f95a1..ef54bab1cc 100644 --- a/package/src/components/index.ts +++ b/package/src/components/index.ts @@ -33,37 +33,34 @@ export * from './Channel/hooks/useCreateThreadContext'; export * from './Channel/hooks/useCreateTypingContext'; export * from './Channel/hooks/useTargetedMessage'; +/** Channel List exports*/ export * from './ChannelList/ChannelList'; export * from './ChannelList/ChannelListFooterLoadingIndicator'; export * from './ChannelList/ChannelListHeaderErrorIndicator'; export * from './ChannelList/ChannelListHeaderNetworkDownIndicator'; export * from './ChannelList/ChannelListLoadingIndicator'; export * from './ChannelList/ChannelListMessenger'; -export * from './ChannelList/hooks/listeners/useChannelUpdated'; -export * from './ChannelList/hooks/useCreateChannelsContext'; -export * from './ChannelList/hooks/usePaginatedChannels'; -export * from './ChannelList/hooks/useChannelActionItems'; -export * from './ChannelList/hooks/useChannelActionItemsById'; -export * from './ChannelList/hooks/useChannelMembershipState'; export * from './ChannelList/Skeleton'; +export * from './ChannelList/hooks'; +/** Channel Preview exports */ +export * from './ChannelPreview/ChannelDetailsBottomSheet'; +export * from './ChannelPreview/ChannelLastMessagePreview'; +export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus'; export * from './ChannelPreview/ChannelPreview'; +export * from './ChannelPreview/ChannelPreviewMessage'; export * from './ChannelPreview/ChannelPreviewMessenger'; +export * from './ChannelPreview/ChannelPreviewMutedStatus'; +export * from './ChannelPreview/ChannelLastMessagePreview'; export * from './ChannelPreview/ChannelPreviewStatus'; export * from './ChannelPreview/ChannelPreviewTitle'; +export * from './ChannelPreview/ChannelPreviewTypingIndicator'; export * from './ChannelPreview/ChannelPreviewUnreadCount'; -export * from './ChannelPreview/hooks/useChannelPreviewDisplayName'; -export * from './ChannelPreview/hooks/useChannelPreviewDisplayPresence'; -export * from './ChannelPreview/hooks/useChannelPreviewData'; -export * from './ChannelPreview/hooks/useIsChannelMuted'; -export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus'; +export * from './ChannelPreview/hooks'; +/** Chat exports */ export * from './Chat/Chat'; -export * from './Chat/hooks/useCreateChatClient'; -export * from './Chat/hooks/useCreateChatContext'; -export * from './Chat/hooks/useIsOnline'; -export * from './Chat/hooks/useMutedUsers'; -export * from './Chat/hooks/useSyncDatabase'; +export * from './Chat/hooks'; export * from './ImageGallery/ImageGallery'; export * from './ImageGallery/components/AnimatedGalleryImage'; diff --git a/package/src/components/ui/Avatar/ChannelAvatar.tsx b/package/src/components/ui/Avatar/ChannelAvatar.tsx index 53c7a36d4a..5de72d5a6d 100644 --- a/package/src/components/ui/Avatar/ChannelAvatar.tsx +++ b/package/src/components/ui/Avatar/ChannelAvatar.tsx @@ -16,7 +16,7 @@ import { hashStringToNumber } from '../../../utils/utils'; export type ChannelAvatarProps = { channel: Channel; showOnlineIndicator?: boolean; - size: 'lg' | 'xl' | '2xl'; + size?: 'lg' | 'xl' | '2xl'; showBorder?: boolean; }; @@ -24,7 +24,7 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => { const { client } = useChatContext(); const { channel } = props; const online = useChannelPreviewDisplayPresence(channel); - const { showOnlineIndicator = online, size, showBorder = true } = props; + const { showOnlineIndicator = online, size = 'xl', showBorder = true } = props; const { theme: { semantics }, diff --git a/package/src/contexts/channelsContext/ChannelsContext.tsx b/package/src/contexts/channelsContext/ChannelsContext.tsx index 1fce3bb725..fd7dd26b04 100644 --- a/package/src/contexts/channelsContext/ChannelsContext.tsx +++ b/package/src/contexts/channelsContext/ChannelsContext.tsx @@ -9,15 +9,19 @@ import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListH import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems'; import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels'; import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet'; +import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview'; +import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus'; import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage'; import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger'; import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus'; import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle'; +import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator'; import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount'; import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator'; import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator'; import type { LoadingProps } from '../../components/Indicators/LoadingIndicator'; +import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; import { isTestEnvironment } from '../utils/isTestEnvironment'; @@ -177,13 +181,19 @@ export type ChannelsContextValue = { * * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx) */ - PreviewAvatar?: React.ComponentType; + PreviewAvatar?: React.ComponentType; /** * Custom UI component to render preview of latest message on channel. * * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx) */ PreviewMessage?: React.ComponentType; + /** + * Custom UI component to render delivery status of latest message on channel. + * + * **Default** [ChannelMessagePreviewDeliveryStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx) + */ + PreviewMessageDeliveryStatus?: React.ComponentType; /** * Custom UI component to render muted status. * @@ -208,7 +218,14 @@ export type ChannelsContextValue = { * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx) */ PreviewUnreadCount?: React.ComponentType; + PreviewTypingIndicator?: React.ComponentType; ChannelDetailsBottomSheet?: React.ComponentType; + /** + * Custom UI component to render preview of last message on channel. + * + * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx) + */ + PreviewLastMessage?: React.ComponentType; getChannelActionItems?: GetChannelActionItems; swipeActionsEnabled?: boolean;