Skip to content

Commit 376d6fd

Browse files
HoonBaekHoonBaek
authored
fix: Set border radius of message by is reaction enabled (#295)
Make the border of each message roundly when `isReactionEnabled` is true * Apply `isReactionEnabled` props to each message item body component * Text, File, Thumbnail, OG, Unknown
1 parent 218e687 commit 376d6fd

File tree

16 files changed

+42
-13
lines changed

16 files changed

+42
-13
lines changed

‎scripts/index_d_ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1443,6 +1443,7 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
14431443
message: FileMessage;
14441444
isByMe?: boolean;
14451445
mouseHover?: boolean;
1446+
isReactionEnabled?: boolean;
14461447
}
14471448
const FileMessageItemBody: React.FC<FileMessageItemBodyProps>;
14481449
export default FileMessageItemBody;
@@ -1736,6 +1737,8 @@ declare module '@sendbird/uikit-react/ui/OGMessageItemBody' {
17361737
message: UserMessage;
17371738
isByMe?: boolean;
17381739
mouseHover?: boolean;
1740+
isMentionEnabled?: boolean;
1741+
isReactionEnabled?: boolean;
17391742
}
17401743
const OGMessageItemBody: React.FC<OGMessageItemBodyProps>;
17411744
export default OGMessageItemBody;
@@ -1932,6 +1935,8 @@ declare module '@sendbird/uikit-react/ui/TextMessageItemBody' {
19321935
message: UserMessage;
19331936
isByMe?: boolean;
19341937
mouseHover?: boolean;
1938+
isMentionEnabled?: boolean;
1939+
isReactionEnabled?: boolean;
19351940
}
19361941
const TextMessageItemBody: React.FC<TextMessageItemBodyProps>;
19371942
export default TextMessageItemBody;
@@ -1944,6 +1949,7 @@ declare module '@sendbird/uikit-react/ui/ThumbnailMessageItemBody' {
19441949
message: FileMessage;
19451950
isByMe?: boolean;
19461951
mouseHover?: boolean;
1952+
isReactionEnabled?: boolean;
19471953
showFileViewer?: (bool: boolean) => void;
19481954
}
19491955
const ThumbnailMessageItemBody: React.FC<ThumbnailMessageItemBodyProps>;
@@ -1976,6 +1982,7 @@ declare module '@sendbird/uikit-react/ui/UnknownMessageItemBody' {
19761982
isByMe?: boolean;
19771983
message: SendbirdUIKitGlobal.CoreMessageType;
19781984
mouseHover?: boolean;
1985+
isReactionEnabled?: boolean;
19791986
}
19801987
const UnknownMessageItemBody: React.FC<UnknownMessageItemBodyProps>;
19811988
export default UnknownMessageItemBody;

‎src/index.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1353,6 +1353,7 @@ declare module '@sendbird/uikit-react/ui/FileMessageItemBody' {
13531353
message: FileMessage;
13541354
isByMe?: boolean;
13551355
mouseHover?: boolean;
1356+
isReactionEnabled?: boolean;
13561357
}
13571358
type FileMessageItemBody = React.FC<FileMessageItemBodyProps>;
13581359
export default FileMessageItemBody;
@@ -1614,6 +1615,8 @@ declare module '@sendbird/uikit-react/ui/OGMessageItemBody' {
16141615
message: UserMessage;
16151616
isByMe?: boolean;
16161617
mouseHover?: boolean;
1618+
isMentionEnabled?: boolean;
1619+
isReactionEnabled?: boolean;
16171620
}
16181621
type OGMessageItemBody = React.FC<OGMessageItemBodyProps>;
16191622
export default OGMessageItemBody;
@@ -1814,6 +1817,8 @@ declare module '@sendbird/uikit-react/ui/TextMessageItemBody' {
18141817
message: UserMessage;
18151818
isByMe?: boolean;
18161819
mouseHover?: boolean;
1820+
isMentionEnabled?: boolean;
1821+
isReactionEnabled?: boolean;
18171822
}
18181823
type TextMessageItemBody = React.FC<TextMessageItemBodyProps>;
18191824
export default TextMessageItemBody;
@@ -1826,6 +1831,7 @@ declare module '@sendbird/uikit-react/ui/ThumbnailMessageItemBody' {
18261831
message: FileMessage;
18271832
isByMe?: boolean;
18281833
mouseHover?: boolean;
1834+
isReactionEnabled?: boolean;
18291835
showFileViewer?: (bool: boolean) => void;
18301836
}
18311837
type ThumbnailMessageItemBody = React.FC<ThumbnailMessageItemBodyProps>;
@@ -1860,6 +1866,7 @@ declare module '@sendbird/uikit-react/ui/UnknownMessageItemBody' {
18601866
isByMe?: boolean;
18611867
message: CoreMessageType;
18621868
mouseHover?: boolean;
1869+
isReactionEnabled?: boolean;
18631870
}
18641871
type UnknownMessageItemBody = React.FC<UnknownMessageItemBodyProps>;
18651872
export default UnknownMessageItemBody;

‎src/smart-components/Channel/context/ChannelProvider.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -208,10 +208,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
208208
const isSuper = currentGroupChannel?.isSuper || false;
209209
const isBroadcast = currentGroupChannel?.isBroadcast || false;
210210
const { appInfo } = sdk;
211-
const usingReaction = (
212-
appInfo?.useReaction && !isBroadcast && !isSuper && (config?.isReactionEnabled || isReactionEnabled)
213-
// TODO: Make isReactionEnabled independent from appInfo.useReaction
214-
);
211+
const usingReaction = appInfo?.useReaction && !isBroadcast && !isSuper && (config?.isReactionEnabled || isReactionEnabled);
215212

216213
const emojiAllMap = useMemo(() => (
217214
usingReaction

‎src/ui/FileMessageItemBody/__tests__/FileMessageItemBody.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ describe('FileMessageItemBody', () => {
117117
it('should have class name by reactions of message prop', () => {
118118
const component = mount(
119119
<FileMessageItemBody
120+
isReactionEnabled
120121
message={createMockMessage((mock) => ({
121122
...mock,
122123
reactions: [{}, {}],

‎src/ui/FileMessageItemBody/__tests__/__snapshots__/FileMessageItemBody.spec.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`FileMessageItemBody should do a snapshot test of the FileMessageItemBody DOM 1`] = `
44
<div
5-
className="classname-for-snapshot sendbird-file-message-item-body outgoing mouse-hover reactions"
5+
className="classname-for-snapshot sendbird-file-message-item-body outgoing mouse-hover "
66
>
77
<div
88
className="sendbird-file-message-item-body__file-icon"

‎src/ui/FileMessageItemBody/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ interface Props {
1313
message: FileMessage;
1414
isByMe?: boolean;
1515
mouseHover?: boolean;
16+
isReactionEnabled?: boolean;
1617
}
1718

1819
export default function FileMessageItemBody({
1920
className,
2021
message,
2122
isByMe = false,
2223
mouseHover = false,
24+
isReactionEnabled = false,
2325
}: Props): ReactElement {
2426

2527
return (
@@ -28,7 +30,7 @@ export default function FileMessageItemBody({
2830
'sendbird-file-message-item-body',
2931
isByMe ? 'outgoing' : 'incoming',
3032
mouseHover ? 'mouse-hover' : '',
31-
message?.reactions?.length > 0 ? 'reactions' : '',
33+
(isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',
3234
])}>
3335
<div className="sendbird-file-message-item-body__file-icon">
3436
<Icon

‎src/ui/MessageContent/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ export default function MessageContent({
228228
isByMe={isByMe}
229229
mouseHover={mouseHover}
230230
isMentionEnabled={config?.isMentionEnabled || false}
231+
isReactionEnabled={isReactionEnabled}
231232
/>
232233
)}
233234
{(isOGMessage(message as UserMessage)) && (
@@ -237,6 +238,7 @@ export default function MessageContent({
237238
isByMe={isByMe}
238239
mouseHover={mouseHover}
239240
isMentionEnabled={config?.isMentionEnabled || false}
241+
isReactionEnabled={isReactionEnabled}
240242
/>
241243
)}
242244
{(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (
@@ -245,6 +247,7 @@ export default function MessageContent({
245247
message={message as FileMessage}
246248
isByMe={isByMe}
247249
mouseHover={mouseHover}
250+
isReactionEnabled={isReactionEnabled}
248251
/>
249252
)}
250253
{(isThumbnailMessage(message as FileMessage)) && (
@@ -253,6 +256,7 @@ export default function MessageContent({
253256
message={message as FileMessage}
254257
isByMe={isByMe}
255258
mouseHover={mouseHover}
259+
isReactionEnabled={isReactionEnabled}
256260
showFileViewer={showFileViewer}
257261
/>
258262
)}
@@ -262,6 +266,7 @@ export default function MessageContent({
262266
message={message}
263267
isByMe={isByMe}
264268
mouseHover={mouseHover}
269+
isReactionEnabled={isReactionEnabled}
265270
/>
266271
)}
267272
{/* reactions */}

‎src/ui/OGMessageItemBody/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ interface Props {
1616
isByMe?: boolean;
1717
mouseHover?: boolean;
1818
isMentionEnabled?: boolean;
19+
isReactionEnabled?: boolean;
1920
}
2021

2122
export default function OGMessageItemBody({
@@ -24,6 +25,7 @@ export default function OGMessageItemBody({
2425
isByMe = false,
2526
mouseHover = false,
2627
isMentionEnabled = false,
28+
isReactionEnabled = false,
2729
}: Props): ReactElement {
2830
const { stringSet } = useContext(LocalizationContext);
2931
const openOGUrl = (): void => {
@@ -36,7 +38,7 @@ export default function OGMessageItemBody({
3638
'sendbird-og-message-item-body',
3739
isByMe ? 'outgoing' : 'incoming',
3840
mouseHover ? 'mouse-hover' : '',
39-
message?.reactions?.length > 0 ? 'reactions' : '',
41+
(isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',
4042
])}>
4143
<Label
4244
key={uuidv4()}

‎src/ui/TextMessageItemBody/__tests__/TextMessageItemBody.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ describe('TextMessageItemBody', () => {
9595
it('should have class name by reactions of message prop', () => {
9696
const component = mount(
9797
<TextMessageItemBody
98+
isReactionEnabled
9899
message={createMockMessage((mockMessage) => ({
99100
...mockMessage,
100101
reactions: [{}, {}, {}],

‎src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`TextMessageItemBody should do a snapshot test of the TextMessageItemBod
55
className="sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-1"
66
>
77
<div
8-
className="class-name-for-snapshot sendbird-text-message-item-body outgoing mouse-hover reactions"
8+
className="class-name-for-snapshot sendbird-text-message-item-body outgoing mouse-hover "
99
>
1010
First second third fourth fifth
1111
<span

0 commit comments

Comments
 (0)