Skip to content

Commit bb14051

Browse files
khushal87khushal87
committed
fix: move image gallery out of channel
1 parent 78ce17a commit bb14051

File tree

3 files changed

+78
-72
lines changed

3 files changed

+78
-72
lines changed

‎package/src/components/Channel/Channel.tsx‎

Lines changed: 37 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,7 @@ import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/c
5050
import {
5151
AttachmentPickerContextValue,
5252
AttachmentPickerProvider,
53-
ImageGalleryProvider,
54-
ImageGalleryProviderProps,
55-
MessageContextValue,
56-
OverlayContextValue,
57-
useOverlayContext,
58-
} from '../../contexts';
53+
} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
5954
import {
6055
AudioPlayerContextProps,
6156
AudioPlayerProvider,
@@ -65,6 +60,7 @@ import type { UseChannelStateValue } from '../../contexts/channelsStateContext/u
6560
import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
6661
import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
6762
import { MessageComposerProvider } from '../../contexts/messageComposerContext/MessageComposerContext';
63+
import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
6864
import {
6965
InputMessageInputContextValue,
7066
MessageInputProvider,
@@ -73,6 +69,10 @@ import {
7369
MessagesContextValue,
7470
MessagesProvider,
7571
} from '../../contexts/messagesContext/MessagesContext';
72+
import {
73+
OverlayContextValue,
74+
useOverlayContext,
75+
} from '../../contexts/overlayContext/OverlayContext';
7676
import {
7777
OwnCapabilitiesContextValue,
7878
OwnCapabilitiesProvider,
@@ -144,7 +144,6 @@ import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent }
144144
import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
145145
import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
146146
import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
147-
import { ImageGallery } from '../ImageGallery/ImageGallery';
148147
import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
149148
import {
150149
LoadingErrorIndicator as LoadingErrorIndicatorDefault,
@@ -268,7 +267,6 @@ const debounceOptions = {
268267
};
269268

270269
export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
271-
Partial<ImageGalleryProviderProps> &
272270
Pick<OverlayContextValue, 'overlay' | 'overlayOpacity'> &
273271
Partial<
274272
Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset' | 'disableAttachmentPicker'>
@@ -582,14 +580,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
582580
attachmentPickerErrorText,
583581
numberOfAttachmentImagesToLoadPerCall = 60,
584582
numberOfAttachmentPickerImageColumns = 3,
585-
autoPlayVideo = false,
586583
giphyVersion = 'fixed_height',
587-
imageGalleryCustomComponents,
588-
imageGalleryGridHandleHeight = 40,
589-
imageGalleryGridSnapPoints,
590-
numberOfImageGalleryGridColumns = 3,
591-
overlay,
592-
overlayOpacity,
593584
bottomInset = 0,
594585
CameraSelectorIcon = DefaultCameraSelectorIcon,
595586
FileSelectorIcon = DefaultFileSelectorIcon,
@@ -1760,25 +1751,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
17601751
],
17611752
);
17621753

1763-
const imageGalleryProviderProps = useMemo(
1764-
() => ({
1765-
autoPlayVideo,
1766-
giphyVersion,
1767-
imageGalleryCustomComponents,
1768-
imageGalleryGridHandleHeight,
1769-
imageGalleryGridSnapPoints,
1770-
numberOfImageGalleryGridColumns,
1771-
}),
1772-
[
1773-
autoPlayVideo,
1774-
giphyVersion,
1775-
imageGalleryCustomComponents,
1776-
imageGalleryGridHandleHeight,
1777-
imageGalleryGridSnapPoints,
1778-
numberOfImageGalleryGridColumns,
1779-
],
1780-
);
1781-
17821754
const attachmentPickerContext = useMemo(
17831755
() => ({
17841756
bottomInset,
@@ -2076,40 +2048,37 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
20762048
}
20772049

20782050
return (
2079-
<ImageGalleryProvider value={imageGalleryProviderProps}>
2080-
<KeyboardCompatibleView
2081-
behavior={keyboardBehavior}
2082-
enabled={!disableKeyboardCompatibleView}
2083-
keyboardVerticalOffset={keyboardVerticalOffset}
2084-
{...additionalKeyboardAvoidingViewProps}
2085-
>
2086-
<ChannelProvider value={channelContext}>
2087-
<OwnCapabilitiesProvider value={ownCapabilitiesContext}>
2088-
<TypingProvider value={typingContext}>
2089-
<PaginatedMessageListProvider value={messageListContext}>
2090-
<MessagesProvider value={messagesContext}>
2091-
<ThreadProvider value={threadContext}>
2092-
<AttachmentPickerProvider value={attachmentPickerContext}>
2093-
<MessageComposerProvider value={messageComposerContext}>
2094-
<MessageInputProvider value={inputMessageInputContext}>
2095-
<AudioPlayerProvider value={audioPlayerContext}>
2096-
<View style={{ height: '100%' }}>{children}</View>
2097-
{!disableAttachmentPicker && (
2098-
<AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
2099-
)}
2100-
</AudioPlayerProvider>
2101-
</MessageInputProvider>
2102-
</MessageComposerProvider>
2103-
</AttachmentPickerProvider>
2104-
</ThreadProvider>
2105-
</MessagesProvider>
2106-
</PaginatedMessageListProvider>
2107-
</TypingProvider>
2108-
</OwnCapabilitiesProvider>
2109-
</ChannelProvider>
2110-
</KeyboardCompatibleView>
2111-
{overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
2112-
</ImageGalleryProvider>
2051+
<KeyboardCompatibleView
2052+
behavior={keyboardBehavior}
2053+
enabled={!disableKeyboardCompatibleView}
2054+
keyboardVerticalOffset={keyboardVerticalOffset}
2055+
{...additionalKeyboardAvoidingViewProps}
2056+
>
2057+
<ChannelProvider value={channelContext}>
2058+
<OwnCapabilitiesProvider value={ownCapabilitiesContext}>
2059+
<TypingProvider value={typingContext}>
2060+
<PaginatedMessageListProvider value={messageListContext}>
2061+
<MessagesProvider value={messagesContext}>
2062+
<ThreadProvider value={threadContext}>
2063+
<AttachmentPickerProvider value={attachmentPickerContext}>
2064+
<MessageComposerProvider value={messageComposerContext}>
2065+
<MessageInputProvider value={inputMessageInputContext}>
2066+
<AudioPlayerProvider value={audioPlayerContext}>
2067+
<View style={{ height: '100%' }}>{children}</View>
2068+
{!disableAttachmentPicker && (
2069+
<AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
2070+
)}
2071+
</AudioPlayerProvider>
2072+
</MessageInputProvider>
2073+
</MessageComposerProvider>
2074+
</AttachmentPickerProvider>
2075+
</ThreadProvider>
2076+
</MessagesProvider>
2077+
</PaginatedMessageListProvider>
2078+
</TypingProvider>
2079+
</OwnCapabilitiesProvider>
2080+
</ChannelProvider>
2081+
</KeyboardCompatibleView>
21132082
);
21142083
};
21152084

‎package/src/contexts/overlayContext/OverlayContext.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
33
import { SharedValue } from 'react-native-reanimated';
44

55
import type { Streami18n } from '../../utils/i18n/Streami18n';
6+
import { ImageGalleryProviderProps } from '../imageGalleryContext/ImageGalleryContext';
67
import type { DeepPartial } from '../themeContext/ThemeContext';
78
import type { Theme } from '../themeContext/utils/theme';
89
import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
@@ -22,7 +23,7 @@ export const OverlayContext = React.createContext(
2223
DEFAULT_BASE_CONTEXT_VALUE as OverlayContextValue,
2324
);
2425

25-
export type OverlayProviderProps = {
26+
export type OverlayProviderProps = ImageGalleryProviderProps & {
2627
/** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
2728
i18nInstance?: Streami18n;
2829
value?: Partial<OverlayContextValue>;

‎package/src/contexts/overlayContext/OverlayProvider.tsx‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import React, { PropsWithChildren, useEffect, useState } from 'react';
1+
import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
22

33
import { BackHandler } from 'react-native';
44

55
import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';
66

77
import { OverlayContext, OverlayProviderProps } from './OverlayContext';
88

9+
import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
910
import { useStreami18n } from '../../hooks/useStreami18n';
1011

12+
import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
1113
import { ThemeProvider } from '../themeContext/ThemeContext';
1214
import {
1315
DEFAULT_USER_LANGUAGE,
@@ -35,7 +37,17 @@ import {
3537
* @example ./OverlayProvider.md
3638
*/
3739
export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>) => {
38-
const { children, i18nInstance, value } = props;
40+
const {
41+
children,
42+
i18nInstance,
43+
value,
44+
autoPlayVideo,
45+
giphyVersion,
46+
imageGalleryCustomComponents,
47+
imageGalleryGridHandleHeight,
48+
imageGalleryGridSnapPoints,
49+
numberOfImageGalleryGridColumns,
50+
} = props;
3951

4052
const [overlay, setOverlay] = useState(value?.overlay || 'none');
4153

@@ -76,10 +88,34 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
7688
style: value?.style,
7789
};
7890

91+
const imageGalleryProviderProps = useMemo(
92+
() => ({
93+
autoPlayVideo,
94+
giphyVersion,
95+
imageGalleryCustomComponents,
96+
imageGalleryGridHandleHeight,
97+
imageGalleryGridSnapPoints,
98+
numberOfImageGalleryGridColumns,
99+
}),
100+
[
101+
autoPlayVideo,
102+
giphyVersion,
103+
imageGalleryCustomComponents,
104+
imageGalleryGridHandleHeight,
105+
imageGalleryGridSnapPoints,
106+
numberOfImageGalleryGridColumns,
107+
],
108+
);
109+
79110
return (
80111
<TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
81112
<OverlayContext.Provider value={overlayContext}>
82-
<ThemeProvider style={overlayContext.style}>{children}</ThemeProvider>
113+
<ImageGalleryProvider value={imageGalleryProviderProps}>
114+
<ThemeProvider style={overlayContext.style}>
115+
{children}
116+
{overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
117+
</ThemeProvider>
118+
</ImageGalleryProvider>
83119
</OverlayContext.Provider>
84120
</TranslationProvider>
85121
);

0 commit comments

Comments
 (0)