Skip to content

Commit 856462b

Browse files
khushal87khushal87
committed
feat: reaction list top redesign
1 parent 19dff83 commit 856462b

File tree

11 files changed

+1088
-781
lines changed

11 files changed

+1088
-781
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -709,7 +709,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
709709
PollContent,
710710
ReactionListBottom = ReactionListBottomDefault,
711711
reactionListPosition = 'top',
712-
reactionListType = 'segmented',
712+
reactionListType = 'clustered',
713713
ReactionListTop = ReactionListTopDefault,
714714
Reply = ReplyDefault,
715715
ScrollToBottomButton = ScrollToBottomButtonDefault,

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

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import Animated, {
1212

1313
import { MessageContentProps } from './MessageContent';
1414
import { MessageSimplePropsWithContext } from './MessageSimple';
15-
import { ReactionListTopProps } from './ReactionList/ReactionListTop';
1615

1716
import { MessagesContextValue, useTheme } from '../../../contexts';
1817

@@ -22,23 +21,30 @@ import { MessageStatusTypes } from '../../../utils/utils';
2221

2322
export type MessageBubbleProps = Pick<
2423
MessagesContextValue,
25-
'reactionListPosition' | 'MessageContent' | 'ReactionListTop' | 'MessageError'
24+
| 'reactionListPosition'
25+
| 'MessageContent'
26+
| 'ReactionListTop'
27+
| 'MessageError'
28+
| 'reactionListType'
2629
> &
2730
Pick<
2831
MessageContentProps,
2932
| 'isVeryLastMessage'
3033
| 'backgroundColor'
3134
| 'messageGroupedSingleOrBottom'
3235
| 'noBorder'
33-
| 'setMessageContentWidth'
3436
| 'message'
37+
| 'setMessageContentWidth'
3538
> &
36-
Pick<ReactionListTopProps, 'messageContentWidth'>;
39+
Pick<MessageSimplePropsWithContext, 'alignment'> & {
40+
messageContentWidth: number;
41+
};
3742

3843
export const MessageBubble = React.memo(
3944
({
45+
alignment,
4046
reactionListPosition,
41-
messageContentWidth,
47+
reactionListType,
4248
setMessageContentWidth,
4349
MessageContent,
4450
ReactionListTop,
@@ -51,29 +57,48 @@ export const MessageBubble = React.memo(
5157
}: MessageBubbleProps) => {
5258
const {
5359
theme: {
54-
messageSimple: { contentContainer },
60+
messageSimple: {
61+
bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
62+
},
5563
},
5664
} = useTheme();
5765
const isMessageErrorType =
5866
message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
5967

6068
return (
61-
<View style={[styles.contentContainer, contentContainer]}>
62-
<MessageContent
63-
backgroundColor={backgroundColor}
64-
isVeryLastMessage={isVeryLastMessage}
65-
messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
66-
noBorder={noBorder}
67-
setMessageContentWidth={setMessageContentWidth}
68-
/>
69+
<View style={[styles.wrapper, wrapper]}>
6970
{reactionListPosition === 'top' && ReactionListTop ? (
70-
<ReactionListTop messageContentWidth={messageContentWidth} />
71-
) : null}
72-
{isMessageErrorType ? (
73-
<View style={styles.errorContainer}>
74-
<MessageError />
71+
<View
72+
style={[
73+
styles.reactionListTopContainer,
74+
reactionListTopContainer,
75+
{ alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start' },
76+
]}
77+
>
78+
<ReactionListTop type={reactionListType} />
7579
</View>
7680
) : null}
81+
<View
82+
style={[
83+
styles.contentContainer,
84+
{ alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end' },
85+
contentContainer,
86+
]}
87+
>
88+
<MessageContent
89+
backgroundColor={backgroundColor}
90+
isVeryLastMessage={isVeryLastMessage}
91+
messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
92+
noBorder={noBorder}
93+
setMessageContentWidth={setMessageContentWidth}
94+
/>
95+
96+
{isMessageErrorType ? (
97+
<View style={[styles.errorContainer, errorContainer]}>
98+
<MessageError />
99+
</View>
100+
) : null}
101+
</View>
77102
</View>
78103
);
79104
},
@@ -223,7 +248,9 @@ const styles = StyleSheet.create({
223248
flexDirection: 'row',
224249
zIndex: 1, // To hide the stick inside the message content
225250
},
226-
contentContainer: {},
251+
contentContainer: {
252+
alignSelf: 'flex-start',
253+
},
227254
swipeContentContainer: {
228255
flexShrink: 0,
229256
overflow: 'hidden',
@@ -234,4 +261,6 @@ const styles = StyleSheet.create({
234261
top: 8,
235262
right: -12,
236263
},
264+
reactionListTopContainer: {},
265+
wrapper: {},
237266
});

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

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export type MessageSimplePropsWithContext = Pick<
4949
| 'alignment'
5050
| 'channel'
5151
| 'groupStyles'
52-
| 'hasReactions'
5352
| 'isMyMessage'
5453
| 'message'
5554
| 'onlyEmojis'
@@ -98,7 +97,6 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
9897
enableMessageGroupingByUser,
9998
enableSwipeToReply,
10099
groupStyles,
101-
hasReactions,
102100
isMyMessage,
103101
message,
104102
MessageAvatar,
@@ -132,11 +130,9 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
132130
receiverMessageBackgroundColor,
133131
senderMessageBackgroundColor,
134132
},
135-
headerWrapper,
136133
lastMessageContainer,
137134
messageGroupedSingleOrBottomContainer,
138135
messageGroupedTopContainer,
139-
reactionListTop: { position: reactionPosition },
140136
},
141137
},
142138
} = useTheme();
@@ -223,22 +219,10 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
223219
testID='message-components'
224220
>
225221
{/* TODO: Find a better way to avoid Remounting here. */}
226-
{reactionListPosition === 'top' && hasReactions ? (
227-
<View
228-
style={[
229-
{
230-
paddingBottom: reactionPosition,
231-
},
232-
headerWrapper,
233-
]}
234-
>
235-
<MessageHeader />
236-
</View>
237-
) : (
238-
<MessageHeader />
239-
)}
222+
<MessageHeader />
240223
{enableSwipeToReply ? (
241224
<SwipableMessageBubble
225+
alignment={alignment}
242226
backgroundColor={backgroundColor}
243227
isVeryLastMessage={isVeryLastMessage}
244228
MessageContent={MessageContent}
@@ -250,13 +234,15 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
250234
noBorder={noBorder}
251235
onSwipe={onSwipeActionHandler}
252236
reactionListPosition={reactionListPosition}
237+
reactionListType={reactionListType}
253238
ReactionListTop={ReactionListTop}
254239
setMessageContentWidth={setMessageContentWidth}
255240
shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
256241
message={message}
257242
/>
258243
) : (
259244
<MessageBubble
245+
alignment={alignment}
260246
backgroundColor={backgroundColor}
261247
isVeryLastMessage={isVeryLastMessage}
262248
MessageContent={MessageContent}
@@ -266,6 +252,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
266252
noBorder={noBorder}
267253
reactionListPosition={reactionListPosition}
268254
ReactionListTop={ReactionListTop}
255+
reactionListType={reactionListType}
269256
setMessageContentWidth={setMessageContentWidth}
270257
message={message}
271258
/>
@@ -293,7 +280,6 @@ const areEqual = (
293280
const {
294281
channel: prevChannel,
295282
groupStyles: prevGroupStyles,
296-
hasReactions: prevHasReactions,
297283
message: prevMessage,
298284
myMessageTheme: prevMyMessageTheme,
299285
onlyEmojis: prevOnlyEmojis,
@@ -304,7 +290,6 @@ const areEqual = (
304290
const {
305291
channel: nextChannel,
306292
groupStyles: nextGroupStyles,
307-
hasReactions: nextHasReactions,
308293
message: nextMessage,
309294
myMessageTheme: nextMyMessageTheme,
310295
onlyEmojis: nextOnlyEmojis,
@@ -313,11 +298,6 @@ const areEqual = (
313298
members: nextMembers,
314299
} = nextProps;
315300

316-
const hasReactionsEqual = prevHasReactions === nextHasReactions;
317-
if (!hasReactionsEqual) {
318-
return false;
319-
}
320-
321301
const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
322302
if (!groupStylesEqual) {
323303
return false;
@@ -427,7 +407,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
427407
alignment,
428408
channel,
429409
groupStyles,
430-
hasReactions,
431410
isMyMessage,
432411
message,
433412
onlyEmojis,
@@ -472,7 +451,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
472451
enableMessageGroupingByUser,
473452
enableSwipeToReply,
474453
groupStyles,
475-
hasReactions,
476454
isMyMessage,
477455
message,
478456
MessageAvatar,

0 commit comments

Comments
 (0)