fix: Do not render date separator when renderCustomSeparator is null (#147)

Fixes: https://sendbird.atlassian.net/browse/UIKIT-1746

Author: HoonBaek

src/index.d.ts

@@ -609,7 +609,7 @@ interface ChannelUIProps {
   renderMessage?: (props: RenderMessageProps) => React.ComponentType;
   renderMessageInput?: () => React.ReactNode;
   renderTypingIndicator?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 }
 
 type CoreMessageType = Sendbird.AdminMessage | Sendbird.UserMessage | Sendbird.FileMessage;
@@ -659,15 +659,15 @@ type MessageUIProps = {
   handleScroll: () => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
   renderEditInput?: () => React.ReactNode;
   renderMessageContent?: () => React.ReactNode;
 };
 
 type MessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderPlaceholderEmpty?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 };
 
 type SuggestedMentionListProps = {

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

@@ -23,7 +23,7 @@ export interface ChannelUIProps {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderMessageInput?: () => React.ReactNode;
   renderTypingIndicator?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 }
 
 const ChannelUI: React.FC<ChannelUIProps> = ({
@@ -34,7 +34,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   renderMessage,
   renderMessageInput,
   renderTypingIndicator,
-  renderCustomSeperator,
+  renderCustomSeparator,
 }: ChannelUIProps) => {
   const {
     currentGroupChannel,
@@ -143,7 +143,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
             <MessageList
               renderMessage={renderMessage}
               renderPlaceholderEmpty={renderPlaceholderEmpty}
-              renderCustomSeperator={renderCustomSeperator}
+              renderCustomSeparator={renderCustomSeparator}
             />
           )
       }

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

@@ -32,7 +32,7 @@ type MessageUIProps = {
   handleScroll: () => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
   renderEditInput?: () => React.ReactNode;
   renderMessageContent?: () => React.ReactNode;
 };
@@ -44,7 +44,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
     chainTop,
     chainBottom,
     handleScroll,
-    renderCustomSeperator,
+    renderCustomSeparator,
     renderEditInput,
     renderMessage,
     renderMessageContent,
@@ -160,6 +160,12 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
       chainBottom,
     });
   }, [message, renderMessage]);
+  const renderedCustomSeparator = useMemo(() => {
+    if (renderCustomSeparator) {
+      return renderCustomSeparator?.();
+    }
+    return null;
+  }, [message, renderCustomSeparator]);
 
   if (renderedMessage) {
     return (
@@ -174,15 +180,15 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
         {/* date-separator */}
         {
           // TODO: Add message instance as a function parameter
-          hasSeparator && renderCustomSeperator?.() || (
+          hasSeparator && (renderedCustomSeparator || (
             <DateSeparator>
               <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
                 {format(message.createdAt, 'MMMM dd, yyyy', {
                   locale: dateLocale,
                 })}
               </Label>
             </DateSeparator>
-          )
+          ))
         }
         {renderedMessage}
       </div>
@@ -273,7 +279,7 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
     >
       {/* date-separator */}
       {
-        hasSeparator && (renderCustomSeperator?.() || (
+        hasSeparator && (renderedCustomSeparator || (
           <DateSeparator>
             <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
               {format(message.createdAt, 'MMMM dd, yyyy', {

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

@@ -15,7 +15,7 @@ import uuidv4 from '../../../../utils/uuid';
 export type MessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ReactNode;
   renderPlaceholderEmpty?: () => React.ReactNode;
-  renderCustomSeperator?: () => React.ReactNode;
+  renderCustomSeparator?: () => React.ReactNode;
 };
 
 const SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';
@@ -24,7 +24,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
   const {
     renderMessage,
     renderPlaceholderEmpty,
-    renderCustomSeperator,
+    renderCustomSeparator,
   } = props;
   const {
     allMessages,
@@ -143,7 +143,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
             hasSeparator={hasSeparator}
             chainTop={chainTop}
             chainBottom={chainBottom}
-            renderCustomSeperator={renderCustomSeperator}
+            renderCustomSeparator={renderCustomSeparator}
             key={m.messageId + uuidv4()}
           />
         );

src/smart-components/Channel/index.tsx

@@ -36,7 +36,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
         renderMessage={props?.renderMessage}
         renderMessageInput={props?.renderMessageInput}
         renderTypingIndicator={props?.renderTypingIndicator}
-        renderCustomSeperator={props?.renderCustomSeperator}
+        renderCustomSeparator={props?.renderCustomSeparator}
       />
     </ChannelProvider>
   );