Skip to content

Commit e429dac

Browse files
HoonBaekHoonBaek
authored
fix: Modify render custom separator (#287)
* Define `RenderCustomSeparatorProps` * Apply the props into the renderCustomSeparator * Fix typo sep`e`rator to sep`a`rator
1 parent b27708d commit e429dac

File tree

7 files changed

+22
-14
lines changed

7 files changed

+22
-14
lines changed

‎MIGRATION_v2-to-v3.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -666,7 +666,7 @@ The following table lists properties that were added to the `Channel` module.
666666
|renderMessage|React.ReactElement|Renders a customized message view in the channel. (Default: `null`)|
667667
|renderMessageInput|React.ReactElement|Renders a customized message input component. (Default: `null`)|
668668
|renderTypingIndicator|React.ReactElement|Renders a customized typing indicator component. (Default: `null`)|
669-
|renderCustomSeperator|React.ReactElement|Renders a customized date separator view in the message list component. (Default: `null`)|
669+
|renderCustomSeparator|React.ReactElement|Renders a customized date separator view in the message list component. (Default: `null`)|
670670
671671
</div>
672672

‎scripts/index_d_ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ declare module "SendbirdUIKitGlobal" {
9292
chainTop: boolean;
9393
chainBottom: boolean;
9494
}
95+
export interface RenderCustomSeparatorProps {
96+
message: AdminMessage | UserMessage | FileMessage;
97+
}
9598

9699
export interface ClientUserMessage extends UserMessage, ClientMessage { }
97100
export interface ClientFileMessage extends FileMessage, ClientMessage { }
@@ -476,7 +479,7 @@ declare module "SendbirdUIKitGlobal" {
476479
renderMessage?: (props: RenderMessageProps) => React.ReactNode | React.ReactElement;
477480
renderMessageInput?: () => React.ReactNode | React.ReactElement;
478481
renderTypingIndicator?: () => React.ReactNode | React.ReactElement;
479-
renderCustomSeperator?: () => React.ReactNode | React.ReactElement;
482+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
480483
}
481484

482485
export type CoreMessageType = AdminMessage | UserMessage | FileMessage;
@@ -526,15 +529,15 @@ declare module "SendbirdUIKitGlobal" {
526529
handleScroll: () => void;
527530
// for extending
528531
renderMessage?: (props: RenderMessageProps) => React.ReactNode | React.ReactElement;
529-
renderCustomSeperator?: () => React.ReactNode | React.ReactElement;
532+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
530533
renderEditInput?: () => React.ReactNode | React.ReactElement;
531534
renderMessageContent?: () => React.ReactNode | React.ReactElement;
532535
};
533536

534537
export type MessageListProps = {
535538
renderMessage?: (props: RenderMessageProps) => React.ReactNode | React.ReactElement;
536539
renderPlaceholderEmpty?: () => React.ReactNode | React.ReactElement;
537-
renderCustomSeperator?: () => React.ReactNode | React.ReactElement;
540+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
538541
};
539542

540543
export type SuggestedMentionListProps = {

‎src/index.d.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import type {
3535
import type { Locale } from 'date-fns';
3636
import { OpenChannel, OpenChannelCreateParams, OpenChannelUpdateParams } from '@sendbird/chat/openChannel';
3737
import { UikitMessageHandler } from './lib/selectors';
38+
import { RenderCustomSeparatorProps } from './types';
3839

3940
type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
4041

@@ -621,7 +622,7 @@ interface ChannelUIProps {
621622
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
622623
renderMessageInput?: () => React.ReactElement;
623624
renderTypingIndicator?: () => React.ReactElement;
624-
renderCustomSeparator?: () => React.ReactElement;
625+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
625626
}
626627

627628
type CoreMessageType = AdminMessage | UserMessage | FileMessage;
@@ -671,15 +672,15 @@ type MessageUIProps = {
671672
handleScroll: () => void;
672673
// for extending
673674
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
674-
renderCustomSeparator?: () => React.ReactElement;
675+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
675676
renderEditInput?: () => React.ReactElement;
676677
renderMessageContent?: () => React.ReactElement;
677678
};
678679

679680
type MessageListProps = {
680681
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
681682
renderPlaceholderEmpty?: () => React.ReactElement;
682-
renderCustomSeparator?: () => React.ReactElement;
683+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
683684
};
684685

685686
type SuggestedMentionListProps = {

‎src/smart-components/Channel/components/ChannelUI/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import TypingIndicator from '../TypingIndicator';
1212
import FrozenNotification from '../FrozenNotification';
1313
import UnreadCount from '../UnreadCount';
1414
import MessageInputWrapper from '../MessageInput';
15-
import { RenderMessageProps } from '../../../../types';
15+
import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
1616
import * as messageActionTypes from '../../context/dux/actionTypes';
1717

1818
export interface ChannelUIProps {
@@ -23,7 +23,7 @@ export interface ChannelUIProps {
2323
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
2424
renderMessageInput?: () => React.ReactElement;
2525
renderTypingIndicator?: () => React.ReactElement;
26-
renderCustomSeparator?: () => React.ReactElement;
26+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
2727
}
2828

2929
const ChannelUI: React.FC<ChannelUIProps> = ({

‎src/smart-components/Channel/components/Message/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import MessageContent from '../../../../ui/MessageContent';
2222
import FileViewer from '../FileViewer';
2323
import RemoveMessageModal from '../RemoveMessageModal';
2424
import { MessageInputKeys } from '../../../../ui/MessageInput/const';
25-
import { EveryMessage, RenderMessageProps } from '../../../../types';
25+
import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
2626
import { useLocalization } from '../../../../lib/LocalizationContext';
2727

2828
type MessageUIProps = {
@@ -33,7 +33,7 @@ type MessageUIProps = {
3333
handleScroll: () => void;
3434
// for extending
3535
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
36-
renderCustomSeparator?: () => React.ReactElement;
36+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
3737
renderEditInput?: () => React.ReactElement;
3838
renderMessageContent?: () => React.ReactElement;
3939
};
@@ -171,7 +171,7 @@ const Message = (props: MessageUIProps): React.FC<MessageUIProps> | React.ReactE
171171
}, [message, renderMessage]);
172172
const renderedCustomSeparator = useMemo(() => {
173173
if (renderCustomSeparator) {
174-
return renderCustomSeparator?.();
174+
return renderCustomSeparator?.({ message: message });
175175
}
176176
return null;
177177
}, [message, renderCustomSeparator]);

‎src/smart-components/Channel/components/MessageList/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
88
import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
99
import { compareMessagesForGrouping } from '../../context/utils';
1010
import Message from '../Message';
11-
import { RenderMessageProps } from '../../../../types';
11+
import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
1212
import { isAboutSame } from '../../context/utils';
1313
import uuidv4 from '../../../../utils/uuid';
1414

1515
export type MessageListProps = {
1616
renderMessage?: (props: RenderMessageProps) => React.ReactElement;
1717
renderPlaceholderEmpty?: () => React.ReactElement;
18-
renderCustomSeparator?: () => React.ReactElement;
18+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
1919
};
2020

2121
const SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';

‎src/types.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ export interface RenderMessageProps {
4141
chainBottom: boolean;
4242
}
4343

44+
export interface RenderCustomSeparatorProps {
45+
message: AdminMessage | UserMessage | FileMessage;
46+
}
47+
4448
export interface ClientUserMessage extends UserMessage, ClientMessage { }
4549
export interface ClientFileMessage extends FileMessage, ClientMessage { }
4650
export interface ClientAdminMessage extends AdminMessage, ClientMessage { }

0 commit comments

Comments
 (0)