Skip to content

Commit a5bcff6

Browse files
khushal87khushal87
committed
chore: resolve conflicts
2 parents 818f89d + 621398d commit a5bcff6

File tree

63 files changed

+1410
-690
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1410
-690
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,16 +175,18 @@ const useCommandPickerStyle = () => {
175175
flexGrow: 1,
176176
paddingHorizontal: primitives.spacingXxs,
177177
paddingBottom: primitives.spacing2xl,
178+
backgroundColor: semantics.composerBg,
178179
},
179180
title: {
181+
backgroundColor: semantics.composerBg,
180182
fontWeight: primitives.typographyFontWeightSemiBold,
181183
fontSize: primitives.typographyFontSizeMd,
182184
color: semantics.textPrimary,
183185
paddingHorizontal: primitives.spacingMd,
184186
paddingBottom: primitives.spacingMd,
185187
},
186188
}),
187-
[semantics.textPrimary],
189+
[semantics.composerBg, semantics.textPrimary],
188190
);
189191
};
190192

‎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: 13 additions & 8 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
};
@@ -75,7 +73,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
7573
const { args, name } = item;
7674
const {
7775
theme: {
78-
colors: { black, grey },
76+
semantics,
7977
messageInput: {
8078
suggestions: {
8179
command: { args: argsStyle, container: commandContainer, title },
@@ -88,10 +86,16 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
8886
return (
8987
<View style={[styles.commandContainer, commandContainer]}>
9088
{name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
91-
<Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
89+
<Text
90+
style={[styles.title, { color: semantics.textPrimary }, title]}
91+
testID='commands-item-title'
92+
>
9293
{(name || '').replace(/^\w/, (char) => char.toUpperCase())}
9394
</Text>
94-
<Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
95+
<Text
96+
style={[styles.args, { color: semantics.textTertiary }, argsStyle]}
97+
testID='commands-item-args'
98+
>
9599
{`/${name} ${args}`}
96100
</Text>
97101
</View>
@@ -203,8 +207,9 @@ const useStyles = () => {
203207
paddingVertical: primitives.spacingXs,
204208
},
205209
name: {
206-
fontSize: 14,
207-
fontWeight: 'bold',
210+
fontSize: primitives.typographyFontSizeMd,
211+
lineHeight: primitives.typographyLineHeightNormal,
212+
color: semantics.textPrimary,
208213
paddingBottom: 2,
209214
},
210215
tag: {

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

Lines changed: 48 additions & 26 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'>
@@ -60,13 +62,12 @@ export const AutoCompleteSuggestionList = ({
6062

6163
const {
6264
theme: {
63-
colors: { black, white },
6465
messageInput: {
6566
container: { maxHeight },
66-
suggestionsListContainer: { flatlist },
6767
},
6868
},
6969
} = useTheme();
70+
const styles = useStyles();
7071

7172
const renderItem = useCallback(
7273
({ item }: { item: TextComposerSuggestion }) => {
@@ -90,7 +91,12 @@ export const AutoCompleteSuggestionList = ({
9091
}
9192

9293
return (
93-
<View style={[styles.container]}>
94+
<Animated.View
95+
entering={ZoomIn.duration(200)}
96+
exiting={ZoomOut.duration(200)}
97+
layout={LinearTransition.duration(200)}
98+
style={styles.container}
99+
>
94100
<FlatList
95101
data={items}
96102
keyboardShouldPersistTaps='always'
@@ -99,33 +105,49 @@ export const AutoCompleteSuggestionList = ({
99105
onEndReached={loadMore}
100106
onEndReachedThreshold={0.1}
101107
renderItem={renderItem}
102-
style={[
103-
styles.flatlist,
104-
flatlist,
105-
{ backgroundColor: white, maxHeight, shadowColor: black },
106-
]}
108+
style={[styles.flatlist, { maxHeight }]}
107109
testID={'auto-complete-suggestion-list'}
108110
/>
109-
</View>
111+
</Animated.View>
110112
);
111113
};
112114

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

130152
AutoCompleteSuggestionList.displayName =
131153
'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

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

Lines changed: 1 addition & 1 deletion
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
);

‎package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
2222
"width": 32,
2323
},
2424
{
25-
"backgroundColor": "#003a3f",
25+
"backgroundColor": "#006970",
2626
},
2727
{
2828
"borderColor": "rgba(255, 255, 255, 0.2)",

‎package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
2929
"alignItems": "flex-start",
3030
"flexDirection": "row",
3131
"flexWrap": "wrap",
32-
"fontSize": 15,
32+
"fontSize": 17,
3333
"justifyContent": "flex-start",
3434
"lineHeight": 20,
3535
"marginBottom": 8,
@@ -41,7 +41,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
4141
style={
4242
{
4343
"color": "#000000",
44-
"fontSize": 15,
44+
"fontSize": 17,
4545
"lineHeight": 20,
4646
}
4747
}

‎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
}

‎package/src/components/MessageInput/MessageInput.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native
44
import { GestureHandlerRootView } from 'react-native-gesture-handler';
55
import Animated, {
66
Extrapolation,
7-
FadeIn,
8-
FadeOut,
97
interpolate,
108
LinearTransition,
119
useAnimatedStyle,
@@ -133,6 +131,7 @@ const useStyles = () => {
133131
shadowRadius: 12,
134132
},
135133
suggestionsListContainer: {
134+
backgroundColor: semantics.composerBg,
136135
position: 'absolute',
137136
width: '100%',
138137
},
@@ -419,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
419418
<>
420419
<MessageInputLeadingView />
421420

422-
<AutoCompleteInput
423-
TextInputComponent={TextInputComponent}
424-
{...additionalTextInputProps}
425-
/>
421+
<Animated.View layout={LinearTransition.duration(200)}>
422+
<AutoCompleteInput
423+
TextInputComponent={TextInputComponent}
424+
{...additionalTextInputProps}
425+
/>
426+
</Animated.View>
426427
</>
427428
)}
428429

@@ -454,14 +455,9 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
454455
<MessageComposerTrailingView />
455456
)}
456457

457-
<Animated.View
458-
entering={FadeIn.duration(200)}
459-
exiting={FadeOut.duration(200)}
460-
layout={LinearTransition.duration(200)}
461-
style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
462-
>
458+
<View style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}>
463459
<AutoCompleteSuggestionList />
464-
</Animated.View>
460+
</View>
465461

466462
{showPollCreationDialog ? (
467463
<View style={styles.pollModalWrapper}>

0 commit comments

Comments
 (0)