Skip to content

Commit 55dfba4

Browse files
isekovanicisekovanic
committed
Merge branch 'develop' into feat/poll-screens-redesign
2 parents 27afe3d + 2f570e1 commit 55dfba4

17 files changed

Lines changed: 133 additions & 87 deletions

File tree

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { getUrlWithoutParams } from '../../utils/utils';
4343
export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
4444
Pick<
4545
MessageContextValue,
46+
| 'alignment'
4647
| 'images'
4748
| 'videos'
4849
| 'onLongPress'
@@ -69,6 +70,7 @@ export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalle
6970
const GalleryWithContext = (props: GalleryPropsWithContext) => {
7071
const {
7172
additionalPressableProps,
73+
alignment,
7274
imageGalleryStateStore,
7375
ImageLoadingFailedIndicator,
7476
ImageLoadingIndicator,
@@ -141,6 +143,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
141143
styles.container,
142144
{
143145
flexDirection: invertedDirections ? 'column' : 'row',
146+
alignSelf: alignment === 'right' ? 'flex-end' : 'flex-start',
144147
},
145148
images.length !== 1
146149
? { width: gridWidth, height: gridHeight }
@@ -439,18 +442,25 @@ const GalleryImageThumbnail = ({
439442

440443
const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWithContext) => {
441444
const {
445+
alignment: prevAlignment,
442446
images: prevImages,
443447
message: prevMessage,
444448
myMessageTheme: prevMyMessageTheme,
445449
videos: prevVideos,
446450
} = prevProps;
447451
const {
452+
alignment: nextAlignment,
448453
images: nextImages,
449454
message: nextMessage,
450455
myMessageTheme: nextMyMessageTheme,
451456
videos: nextVideos,
452457
} = nextProps;
453458

459+
const alignmentEqual = prevAlignment === nextAlignment;
460+
if (!alignmentEqual) {
461+
return false;
462+
}
463+
454464
const messageEqual =
455465
prevMessage?.id === nextMessage?.id &&
456466
`${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
@@ -498,6 +508,7 @@ export type GalleryProps = Partial<GalleryPropsWithContext>;
498508
*/
499509
export const Gallery = (props: GalleryProps) => {
500510
const {
511+
alignment: propAlignment,
501512
additionalPressableProps: propAdditionalPressableProps,
502513
ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
503514
ImageLoadingIndicator: PropImageLoadingIndicator,
@@ -517,6 +528,7 @@ export const Gallery = (props: GalleryProps) => {
517528

518529
const { imageGalleryStateStore } = useImageGalleryContext();
519530
const {
531+
alignment: contextAlignment,
520532
images: contextImages,
521533
message: contextMessage,
522534
onLongPress: contextOnLongPress,
@@ -539,7 +551,7 @@ export const Gallery = (props: GalleryProps) => {
539551
const images = propImages || contextImages;
540552
const videos = propVideos || contextVideos;
541553
const message = propMessage || contextMessage;
542-
554+
const alignment = propAlignment || contextAlignment;
543555
if (!images.length && !videos.length) {
544556
return null;
545557
}
@@ -568,6 +580,7 @@ export const Gallery = (props: GalleryProps) => {
568580
<MemoizedGallery
569581
{...{
570582
additionalPressableProps,
583+
alignment,
571584
channelId: message?.cid,
572585
imageGalleryStateStore,
573586
ImageLoadingFailedIndicator,
@@ -608,7 +621,6 @@ const useStyles = () => {
608621
},
609622
container: {
610623
flexDirection: 'row',
611-
justifyContent: 'center',
612624
gap: primitives.spacingXxs,
613625
},
614626
imageContainer: {},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type GalleryImageWithContextProps = GalleryImageProps &
99
Pick<ChatContextValue, 'ImageComponent'>;
1010

1111
export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
12-
const { ImageComponent = Image, uri, ...rest } = props;
12+
const { ImageComponent = Image, uri, style, ...rest } = props;
1313

1414
// Caching image components such as FastImage will not work with local images.
1515
// This for the case of local uris, we use the default Image component.
@@ -18,7 +18,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
1818
<ImageComponent
1919
{...rest}
2020
accessibilityLabel='Gallery Image'
21-
style={[styles.image, rest.style]}
21+
style={[styles.image, style]}
2222
source={{
2323
uri: makeImageCompatibleUrl(uri),
2424
}}
@@ -30,7 +30,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
3030
<Image
3131
{...rest}
3232
accessibilityLabel='Gallery Image'
33-
style={[styles.image, rest.style]}
33+
style={[styles.image, style]}
3434
source={{
3535
uri: makeImageCompatibleUrl(uri),
3636
}}

‎package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export function buildGalleryOfSingleImage({
8585
image,
8686
resizableCDNHosts,
8787
flex: 1,
88+
resizeMode: 'cover',
8889
...container,
8990
});
9091

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { AttachmentCommandPicker } from './AttachmentPickerContent';
99
import {
1010
useAttachmentPickerContext,
1111
useChannelContext,
12+
useMessageComposer,
1213
useMessageInputContext,
1314
useMessagesContext,
1415
useOwnCapabilitiesContext,
@@ -181,6 +182,7 @@ export const PollPickerButton = () => {
181182

182183
export const CommandsPickerButton = () => {
183184
const [showCommandsSheet, setShowCommandsSheet] = useState(false);
185+
const messageComposer = useMessageComposer();
184186
const { hasCommands } = useMessageInputContext();
185187
const { attachmentPickerStore, disableAttachmentPicker } = useAttachmentPickerContext();
186188
const { selectedPicker } = useAttachmentPickerState();
@@ -195,7 +197,7 @@ export const CommandsPickerButton = () => {
195197

196198
const onClose = useStableCallback(() => setShowCommandsSheet(false));
197199

198-
return hasCommands ? (
200+
return hasCommands && !messageComposer.editedMessage ? (
199201
<>
200202
<AttachmentTypePickerButton
201203
testID='commands-touchable'

‎package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
33

44
import { useTheme } from '../../contexts/themeContext/ThemeContext';
55

6-
import { Lightning } from '../../icons/Lightning';
76
import { Smile } from '../../icons/Smile';
7+
import { primitives } from '../../theme';
88

99
export type AutoCompleteSuggestionHeaderProps = {
1010
queryText?: string;
@@ -14,7 +14,7 @@ export type AutoCompleteSuggestionHeaderProps = {
1414
export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () => {
1515
const {
1616
theme: {
17-
colors: { accent_blue, grey },
17+
semantics,
1818
messageInput: {
1919
suggestions: {
2020
header: { container, title },
@@ -25,8 +25,10 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
2525

2626
return (
2727
<View style={[styles.container, container]}>
28-
<Lightning fill={accent_blue} size={32} />
29-
<Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
28+
<Text
29+
style={[styles.title, { color: semantics.textTertiary }, title]}
30+
testID='commands-header-title'
31+
>
3032
{'Instant Commands'}
3133
</Text>
3234
</View>
@@ -107,7 +109,9 @@ const styles = StyleSheet.create({
107109
padding: 8,
108110
},
109111
title: {
110-
fontSize: 14,
112+
fontSize: primitives.typographyFontSizeSm,
113+
lineHeight: primitives.typographyLineHeightNormal,
114+
fontWeight: primitives.typographyFontWeightMedium,
111115
paddingLeft: 8,
112116
},
113117
});

‎package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionComma
77

88
import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
99
import { useTheme } from '../../contexts/themeContext/ThemeContext';
10-
import { AtMentions } from '../../icons/AtMentions';
1110
import { primitives } from '../../theme';
1211
import type { Emoji } from '../../types/types';
1312

@@ -22,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
2221
const { id, name, online } = item;
2322
const {
2423
theme: {
25-
colors: { accent_blue, black },
24+
colors: { black },
2625
messageInput: {
2726
suggestions: {
2827
mention: { column, container: mentionContainer, name: nameStyle },
@@ -40,7 +39,6 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
4039
{name || id}
4140
</Text>
4241
</View>
43-
<AtMentions pathFill={accent_blue} />
4442
</View>
4543
);
4644
};
@@ -203,8 +201,9 @@ const useStyles = () => {
203201
paddingVertical: primitives.spacingXs,
204202
},
205203
name: {
206-
fontSize: 14,
207-
fontWeight: 'bold',
204+
fontSize: primitives.typographyFontSizeMd,
205+
lineHeight: primitives.typographyLineHeightNormal,
206+
color: semantics.textPrimary,
208207
paddingBottom: 2,
209208
},
210209
tag: {

‎package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { useCallback, useMemo } from 'react';
2-
import { FlatList, StyleSheet, View } from 'react-native';
2+
import { FlatList, StyleSheet } from 'react-native';
3+
4+
import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
35

46
import { SearchSourceState, TextComposerState, TextComposerSuggestion } from 'stream-chat';
57

@@ -12,7 +14,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
1214
import { useStableCallback } from '../../hooks';
1315
import { useStateStore } from '../../hooks/useStateStore';
1416

15-
export const DEFAULT_LIST_HEIGHT = 200;
17+
export const DEFAULT_LIST_HEIGHT = 208;
1618

1719
export type AutoCompleteSuggestionListProps = Partial<
1820
Pick<MessageInputContextValue, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'>
@@ -63,10 +65,10 @@ export const AutoCompleteSuggestionList = ({
6365
colors: { black, white },
6466
messageInput: {
6567
container: { maxHeight },
66-
suggestionsListContainer: { flatlist },
6768
},
6869
},
6970
} = useTheme();
71+
const styles = useStyles();
7072

7173
const renderItem = useCallback(
7274
({ item }: { item: TextComposerSuggestion }) => {
@@ -90,7 +92,12 @@ export const AutoCompleteSuggestionList = ({
9092
}
9193

9294
return (
93-
<View style={[styles.container]}>
95+
<Animated.View
96+
entering={ZoomIn.duration(200)}
97+
exiting={ZoomOut.duration(200)}
98+
layout={LinearTransition.duration(200)}
99+
style={styles.container}
100+
>
94101
<FlatList
95102
data={items}
96103
keyboardShouldPersistTaps='always'
@@ -99,33 +106,47 @@ export const AutoCompleteSuggestionList = ({
99106
onEndReached={loadMore}
100107
onEndReachedThreshold={0.1}
101108
renderItem={renderItem}
102-
style={[
103-
styles.flatlist,
104-
flatlist,
105-
{ backgroundColor: white, maxHeight, shadowColor: black },
106-
]}
109+
style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
107110
testID={'auto-complete-suggestion-list'}
108111
/>
109-
</View>
112+
</Animated.View>
110113
);
111114
};
112115

113-
const styles = StyleSheet.create({
114-
container: {
115-
maxHeight: DEFAULT_LIST_HEIGHT,
116-
},
117-
flatlist: {
118-
borderRadius: 8,
119-
elevation: 3,
120-
marginHorizontal: 8,
121-
shadowOffset: {
122-
height: 1,
123-
width: 0,
116+
const useStyles = () => {
117+
const {
118+
theme: {
119+
semantics,
120+
messageInput: {
121+
suggestionsListContainer: { flatlist },
122+
},
124123
},
125-
shadowOpacity: 0.22,
126-
shadowRadius: 2.22,
127-
},
128-
});
124+
} = useTheme();
125+
return useMemo(
126+
() =>
127+
StyleSheet.create({
128+
container: {
129+
maxHeight: DEFAULT_LIST_HEIGHT,
130+
backgroundColor: semantics.composerBg,
131+
borderTopWidth: 1,
132+
borderColor: semantics.borderCoreDefault,
133+
},
134+
flatlist: {
135+
borderRadius: 8,
136+
elevation: 3,
137+
marginHorizontal: 8,
138+
shadowOffset: {
139+
height: 1,
140+
width: 0,
141+
},
142+
shadowOpacity: 0.22,
143+
shadowRadius: 2.22,
144+
...flatlist,
145+
},
146+
}),
147+
[semantics, flatlist],
148+
);
149+
};
129150

130151
AutoCompleteSuggestionList.displayName =
131152
'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

‎package/src/components/Message/MessageSimple/MessageContent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
310310
key={`quoted_reply_${messageContentOrderIndex}`}
311311
style={[styles.replyContainer, replyContainer]}
312312
>
313-
<Reply styles={replyStyles} />
313+
<Reply mode='reply' styles={replyStyles} />
314314
</View>
315315
)
316316
);
@@ -328,7 +328,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
328328
return (
329329
<View
330330
key={`gallery_${messageContentOrderIndex}`}
331-
style={[styles.galleryContainer]}
331+
style={styles.galleryContainer}
332332
>
333333
<Gallery />
334334
</View>

‎package/src/components/Message/utils/messageActions.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { MessagesContextValue } from '../../../contexts/messagesContext/Mes
33
import type { OwnCapabilitiesContextValue } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
44
import { isClipboardAvailable } from '../../../native';
55

6+
import { FileTypes } from '../../../types/types';
67
import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
78

89
export type MessageActionsParams = {
@@ -53,6 +54,9 @@ export const messageActions = ({
5354
threadReply,
5455
unpinMessage,
5556
}: MessageActionsParams) => {
57+
const messageHasGiphyOrImgur = message.attachments?.some(
58+
(attachment) => attachment.type === FileTypes.Giphy || attachment.type === FileTypes.Imgur,
59+
);
5660
if (showMessageReactions) {
5761
return [];
5862
}
@@ -72,8 +76,10 @@ export const messageActions = ({
7276
}
7377

7478
if (
75-
(isMyMessage && ownCapabilities.updateOwnMessage) ||
76-
(!isMyMessage && ownCapabilities.updateAnyMessage)
79+
((isMyMessage && ownCapabilities.updateOwnMessage) ||
80+
(!isMyMessage && ownCapabilities.updateAnyMessage)) &&
81+
!messageHasGiphyOrImgur &&
82+
!message.poll_id
7783
) {
7884
actions.push(editMessage);
7985
}

0 commit comments

Comments
 (0)