Skip to content

Commit 4f0e2f8

Browse files
isekovanicisekovanic
authored
fix: require cycles from redesign (#3509)
## 🎯 Goal This PR addresses some require cycles introduced with the development of V9. ## 🛠 Implementation details <!-- Provide a description of the implementation --> ## 🎨 UI Changes <!-- Add relevant screenshots --> <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
1 parent 2f42d10 commit 4f0e2f8

23 files changed

+221
-205
lines changed

‎package/src/components/Attachment/VideoThumbnail.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
33

44
import { useTheme } from '../../contexts/themeContext/ThemeContext';
5-
import { VideoPlayIndicator } from '../ui';
5+
import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
66

77
const styles = StyleSheet.create({
88
container: {

‎package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,19 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
22
import { Linking, StyleSheet } from 'react-native';
33

44
import { renderAttachmentPickerItem } from './AttachmentPickerItem';
5+
import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
56

67
import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
78

89
import { useStableCallback } from '../../../../hooks';
910
import { Picture } from '../../../../icons';
1011

1112
import { NativeHandlers } from '../../../../native';
12-
import type { File } from '../../../../types/types';
1313
import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
1414
import {
15-
AttachmentPickerContentProps,
1615
AttachmentPickerGenericContent,
17-
} from '../AttachmentPickerContent';
18-
19-
export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
20-
21-
export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
22-
23-
export type PhotoContentItemType = File | IosLimitedItemType;
24-
25-
export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
26-
'uri' in item && item.uri === '@getstream/ios-limited-button';
16+
type AttachmentPickerContentProps,
17+
} from '../AttachmentPickerGenericContent';
2718

2819
const keyExtractor = (item: PhotoContentItemType) => item.uri;
2920

‎package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
44

55
import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
66

7-
import { isIosLimited, PhotoContentItemType } from './AttachmentMediaPicker';
7+
import { isIosLimited, type PhotoContentItemType } from './shared';
88

99
import { useAttachmentPickerContext } from '../../../../contexts';
1010
import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';

‎package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { File } from '../../../../types/types';
2+
3+
export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
4+
5+
export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
6+
7+
export type PhotoContentItemType = File | IosLimitedItemType;
8+
9+
export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
10+
'uri' in item && item.uri === IOS_LIMITED_DEEPLINK;

‎package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx‎

Lines changed: 8 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2-
import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
2+
import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
33

44
import { FlatList } from 'react-native-gesture-handler';
55

66
import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
77

88
import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
99

10+
import {
11+
AttachmentPickerGenericContent,
12+
type AttachmentPickerContentProps,
13+
} from './AttachmentPickerGenericContent';
14+
1015
import {
1116
useAttachmentPickerContext,
1217
useBottomSheetContext,
@@ -16,90 +21,9 @@ import {
1621
} from '../../../contexts';
1722
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
1823
import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
19-
import { Camera, FilePickerIcon, IconProps, PollThumbnail, Recorder } from '../../../icons';
24+
import { Camera, FilePickerIcon, PollThumbnail, Recorder } from '../../../icons';
2025
import { primitives } from '../../../theme';
2126
import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
22-
import { Button } from '../../ui';
23-
24-
const useStyles = () => {
25-
const {
26-
theme: { semantics },
27-
} = useTheme();
28-
29-
return useMemo(
30-
() =>
31-
StyleSheet.create({
32-
container: {
33-
alignItems: 'center',
34-
justifyContent: 'center',
35-
backgroundColor: semantics.backgroundCoreElevation1,
36-
paddingHorizontal: primitives.spacing2xl,
37-
paddingBottom: primitives.spacing3xl,
38-
},
39-
infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
40-
text: {
41-
fontSize: primitives.typographyFontSizeMd,
42-
color: semantics.textSecondary,
43-
marginTop: 8,
44-
marginHorizontal: 24,
45-
textAlign: 'center',
46-
maxWidth: 200,
47-
},
48-
}),
49-
[semantics.backgroundCoreElevation1, semantics.textSecondary],
50-
);
51-
};
52-
53-
export type AttachmentPickerGenericContentProps = {
54-
Icon: React.ComponentType<IconProps>;
55-
onPress: () => void;
56-
height?: number;
57-
buttonText?: string;
58-
description?: string;
59-
};
60-
61-
export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
62-
const { height, buttonText, Icon, description, onPress } = props;
63-
const styles = useStyles();
64-
65-
const {
66-
theme: {
67-
semantics,
68-
attachmentPicker: {
69-
content: { container, text, infoContainer },
70-
},
71-
},
72-
} = useTheme();
73-
74-
const ThemedIcon = useCallback(
75-
() => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
76-
[Icon, semantics.textTertiary],
77-
);
78-
79-
return (
80-
<View
81-
style={[
82-
styles.container,
83-
{
84-
height,
85-
},
86-
container,
87-
]}
88-
>
89-
<View style={[styles.infoContainer, infoContainer]}>
90-
<ThemedIcon />
91-
<Text style={[styles.text, text]}>{description}</Text>
92-
</View>
93-
<Button
94-
variant={'secondary'}
95-
type={'outline'}
96-
size={'lg'}
97-
label={buttonText}
98-
onPress={onPress}
99-
/>
100-
</View>
101-
);
102-
};
10327

10428
const keyExtractor = (item: { id: string }) => item.id;
10529

@@ -298,7 +222,7 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
298222
);
299223
};
300224

301-
export type AttachmentPickerContentProps = Pick<AttachmentPickerGenericContentProps, 'height'>;
225+
export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
302226

303227
export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
304228
const { height } = props;

‎package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useCallback, useMemo } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
5+
import { IconProps } from '../../../icons';
6+
import { primitives } from '../../../theme';
7+
import { Button } from '../../ui';
8+
9+
const useStyles = () => {
10+
const {
11+
theme: { semantics },
12+
} = useTheme();
13+
14+
return useMemo(
15+
() =>
16+
StyleSheet.create({
17+
container: {
18+
alignItems: 'center',
19+
justifyContent: 'center',
20+
backgroundColor: semantics.backgroundCoreElevation1,
21+
paddingHorizontal: primitives.spacing2xl,
22+
paddingBottom: primitives.spacing3xl,
23+
},
24+
infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
25+
text: {
26+
fontSize: primitives.typographyFontSizeMd,
27+
color: semantics.textSecondary,
28+
marginTop: 8,
29+
marginHorizontal: 24,
30+
textAlign: 'center',
31+
maxWidth: 200,
32+
},
33+
}),
34+
[semantics.backgroundCoreElevation1, semantics.textSecondary],
35+
);
36+
};
37+
38+
export type AttachmentPickerContentProps = {
39+
height?: number;
40+
};
41+
42+
export type AttachmentPickerGenericContentProps = AttachmentPickerContentProps & {
43+
Icon: React.ComponentType<IconProps>;
44+
onPress: () => void;
45+
buttonText?: string;
46+
description?: string;
47+
};
48+
49+
export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
50+
const { height, buttonText, Icon, description, onPress } = props;
51+
const styles = useStyles();
52+
53+
const {
54+
theme: {
55+
semantics,
56+
attachmentPicker: {
57+
content: { container, text, infoContainer },
58+
},
59+
},
60+
} = useTheme();
61+
62+
const ThemedIcon = useCallback(
63+
() => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
64+
[Icon, semantics.textTertiary],
65+
);
66+
67+
return (
68+
<View
69+
style={[
70+
styles.container,
71+
{
72+
height,
73+
},
74+
container,
75+
]}
76+
>
77+
<View style={[styles.infoContainer, infoContainer]}>
78+
<ThemedIcon />
79+
<Text style={[styles.text, text]}>{description}</Text>
80+
</View>
81+
<Button
82+
variant={'secondary'}
83+
type={'outline'}
84+
size={'lg'}
85+
label={buttonText}
86+
onPress={onPress}
87+
/>
88+
</View>
89+
);
90+
};

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,11 @@ import { emojis } from '../MessageMenu/emojis';
215215
import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
216216
import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
217217
import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
218-
import {
219-
MessageReactionPicker as MessageReactionPickerDefault,
220-
toUnicodeScalarString,
221-
} from '../MessageMenu/MessageReactionPicker';
218+
import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
222219
import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
223220
import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
224221
import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
222+
import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
225223
import { Reply as ReplyDefault } from '../Reply/Reply';
226224

227225
export type MarkReadFunctionOptions = {

‎package/src/components/ImageGallery/components/ImageGalleryFooter.tsx‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
import React, { useMemo, useRef, useState } from 'react';
22
import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
3-
import Animated, {
4-
Extrapolation,
5-
interpolate,
6-
SharedValue,
7-
useAnimatedStyle,
8-
} from 'react-native-reanimated';
3+
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
94

10-
import {
11-
ImageGalleryProviderProps,
12-
useImageGalleryContext,
13-
} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
5+
import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
6+
7+
import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
148
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
159
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
1610
import { useStateStore } from '../../../hooks/useStateStore';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
3832
shareMenuOpen: boolean;
3933
}) => React.ReactElement | null;
4034

41-
export type ImageGalleryVideoControlProps = {
42-
attachmentId: string;
43-
};
44-
4535
export type ImageGalleryVideoControlComponent = ({
4636
attachmentId,
4737
}: ImageGalleryVideoControlProps) => React.ReactElement | null;
4838

49-
export type ImageGalleryFooterProps = Pick<
50-
ImageGalleryProviderProps,
51-
'ImageGalleryVideoControls'
52-
> & {
53-
accessibilityLabel: string;
54-
opacity: SharedValue<number>;
55-
openGridView: () => void;
56-
visible: SharedValue<number>;
57-
};
58-
5939
const imageGallerySelector = (state: ImageGalleryState) => ({
6040
asset: state.assets[state.currentIndex],
6141
currentIndex: state.currentIndex,

‎package/src/components/ImageGallery/components/ImageGalleryHeader.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
22

33
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
44

5-
import Animated, {
6-
Extrapolation,
7-
interpolate,
8-
SharedValue,
9-
useAnimatedStyle,
10-
} from 'react-native-reanimated';
5+
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
116

12-
import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
7+
import type { ImageGalleryHeaderProps } from './types';
8+
9+
import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
1310
import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
1411
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
1512
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
2623
? Animated.createAnimatedComponent(SafeAreaView)
2724
: SafeAreaView;
2825

29-
export type ImageGalleryHeaderProps = {
30-
opacity: SharedValue<number>;
31-
visible: SharedValue<number>;
32-
};
33-
3426
const imageGallerySelector = (state: ImageGalleryState) => ({
3527
asset: state.assets[state.currentIndex],
3628
});

‎package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useCallback, useMemo } from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
33

4-
import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
4+
import type { ImageGalleryVideoControlProps } from './types';
55

66
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
77

0 commit comments

Comments
 (0)