Define SCROLL_BUFFER and apply it to the Channel&OpenChannel message …

…list
sendbird · Mar 29, 2023 · 16d7c42 · 16d7c42
1 parent f24d056
commit 16d7c42
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 9 deletions.
diff --git a/src/smart-components/Channel/components/MessageList/index.tsx b/src/smart-components/Channel/components/MessageList/index.tsx
@@ -11,7 +11,7 @@ import { isAboutSame } from '../../context/utils';
 import { getMessagePartsInfo } from './getMessagePartsInfo';
 import UnreadCount from '../UnreadCount';
 import FrozenNotification from '../FrozenNotification';
-import { MESSAGE_SCROLL_BUFFER } from '../../context/const';
+import { SCROLL_BUFFER } from '../../../../utils/consts';
 
 export interface MessageListProps {
   className?: string;
@@ -77,7 +77,7 @@ const MessageList: React.FC<MessageListProps> = ({
       });
     }
 
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       onScrollDownCallback(([messages]) => {
         if (messages) {
           try {
@@ -96,7 +96,7 @@ const MessageList: React.FC<MessageListProps> = ({
       setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)
     }
 
-    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       // Mark as read if scroll is at end
       setTimeout(() => {
         messagesDispatcher({
@@ -125,7 +125,7 @@ const MessageList: React.FC<MessageListProps> = ({
     const current = scrollRef?.current;
     if (current) {
       const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom && scrollBottom <= MESSAGE_SCROLL_BUFFER) {
+      if (scrollBottom < bottom && scrollBottom <= SCROLL_BUFFER) {
         current.scrollTop += bottom - scrollBottom;
       }
     }

diff --git a/src/smart-components/Channel/context/const.ts b/src/smart-components/Channel/context/const.ts
@@ -1,5 +1,3 @@
-export const MESSAGE_SCROLL_BUFFER = 10;
-
 export const PREV_RESULT_SIZE = 30;
 export const NEXT_RESULT_SIZE = 15;
 

diff --git a/src/smart-components/OpenChannel/components/OpenChannelMessageList/index.tsx b/src/smart-components/OpenChannel/components/OpenChannelMessageList/index.tsx
@@ -1,6 +1,7 @@
 import './openchannel-message-list.scss';
 
 import React, { ReactElement, useRef, useState, useMemo, useLayoutEffect, useEffect } from 'react';
+import { FileMessage, UserMessage } from '@sendbird/chat/message';
 import isSameDay from 'date-fns/isSameDay';
 
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
@@ -10,7 +11,7 @@ import { compareMessagesForGrouping } from '../../context/utils';
 import { useOpenChannelContext } from '../../context/OpenChannelProvider';
 import OpenChannelMessage from '../OpenChannelMessage';
 import { RenderMessageProps } from '../../../../types';
-import { FileMessage, UserMessage } from '@sendbird/chat/message';
+import { SCROLL_BUFFER } from '../../../../utils/consts';
 
 export type OpenchannelMessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
@@ -53,7 +54,7 @@ function OpenchannelMessageList(
     if (!hasMore) {
       return;
     }
-    if (scrollTop === 0) {
+    if (scrollTop < SCROLL_BUFFER) {
       onScroll(() => {
         // noop
       });

diff --git a/src/smart-components/OpenChannelList/components/OpenChannelListUI/index.tsx b/src/smart-components/OpenChannelList/components/OpenChannelListUI/index.tsx
@@ -13,6 +13,7 @@ import { useOpenChannelListContext } from '../../context/OpenChannelListProvider
 import OpenChannelListActionTypes from '../../context/dux/actionTypes';
 import CreateOpenChannel from '../../../CreateOpenChannel';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { SCROLL_BUFFER } from '../../../../utils/consts';
 
 interface RenderOpenChannelPreviewProps {
   channel: OpenChannel;
@@ -57,7 +58,7 @@ function OpenChannelListUI({
       scrollHeight,
     } = element;
     const isAboutSame = (a, b, px) => (Math.abs(a - b) <= px);
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       fetchNextChannels((messages) => {
         if (messages) {
           try {

diff --git a/src/utils/consts.ts b/src/utils/consts.ts
@@ -1,3 +1,5 @@
+export const SCROLL_BUFFER = 10;
+
 // voice message record
 export const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;
 export const VOICE_RECORDER_DEFAULT_MIN = 1000;
@@ -24,3 +26,4 @@ export const VOICE_MESSAGE_MIME_TYPE = 'audio/mp3;sbu_type=voice';
 export const META_ARRAY_VOICE_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';
 export const META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';
 export const META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = 'voice/mp3';
+``