feat: add scrollBehavior option to Channel (#676)

Addresses one of request in https://sendbird.atlassian.net/browse/AC-12

Added
[`scrollBehavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
prop to allow user to pass `"smooth"` option on scroll event via Channel
component(provider).
But I set the default option to `auto` which is an initial value of this
CSS property not to change the existing behavior.

Author: AhyoungRyu

src/index.d.ts

@@ -743,6 +743,7 @@ type ChannelContextProps = {
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   disableUserProfile?: boolean;
   disableMarkAsRead?: boolean;
+  scrollBehavior?: 'smooth' | 'auto';
 };
 
 interface ChannelUIProps {

src/modules/Channel/components/MessageList/hooks/__test__/useScrollBehavior.spec.ts

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react';
+import { useScrollBehavior } from '../useScrollBehavior';
+import { useChannelContext } from '../../../../context/ChannelProvider';
+
+jest.mock('../../../../context/ChannelProvider', () => ({
+  useChannelContext: jest.fn(),
+}));
+
+describe('useScrollBehavior', () => {
+  it('should set scroll behavior on scrollRef', () => {
+    const scrollRefMock = { current: { style: { scrollBehavior: 'auto' } } };
+    const scrollBehaviorMock = 'smooth';
+
+    useChannelContext.mockReturnValue({
+      scrollRef: scrollRefMock,
+      scrollBehavior: scrollBehaviorMock,
+    });
+
+    renderHook(() => useScrollBehavior());
+
+    expect(scrollRefMock.current.style.scrollBehavior).toBe(scrollBehaviorMock);
+  });
+
+  it('should set the scrollBehavior to `auto` by default if scrollBehavior prop is not set', () => {
+    const scrollRefMock = { current: { style: { } } };
+
+    useChannelContext.mockReturnValue({
+      scrollRef: scrollRefMock,
+    });
+
+    renderHook(() => useScrollBehavior());
+
+    expect(scrollRefMock.current.style.scrollBehavior).toBe('auto');
+  });
+});

src/modules/Channel/components/MessageList/hooks/useScrollBehavior.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useChannelContext } from '../../../context/ChannelProvider';
+
+export function useScrollBehavior() {
+  const {
+    scrollRef,
+    scrollBehavior = 'auto',
+  } = useChannelContext();
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.style.scrollBehavior = scrollBehavior;
+    }
+  }, [scrollRef.current]);
+
+  return null;
+}

src/modules/Channel/components/MessageList/index.tsx

@@ -17,6 +17,7 @@ import { UserMessage } from '@sendbird/chat/message';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCallback';
 import { useSetScrollToBottom } from './hooks/useSetScrollToBottom';
+import { useScrollBehavior } from './hooks/useScrollBehavior';
 
 const SCROLL_BOTTOM_PADDING = 50;
 
@@ -61,6 +62,8 @@ const MessageList: React.FC<MessageListProps> = ({
     : allMessages;
   const markAsReadScheduler = store.config.markAsReadScheduler;
 
+  useScrollBehavior();
+
   const onScroll = () => {
     const element = scrollRef?.current;
     if (element == null) {

src/modules/Channel/context/ChannelProvider.tsx

@@ -95,6 +95,7 @@ export type ChannelContextProps = {
   onQuoteMessageClick?: (props: { message: UserMessage | FileMessage }) => void;
   onMessageAnimated?: () => void;
   onMessageHighlighted?: () => void;
+  scrollBehavior?: 'smooth' | 'auto';
 };
 
 interface MessageStoreInterface {
@@ -186,6 +187,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     onQuoteMessageClick,
     onMessageAnimated,
     onMessageHighlighted,
+    scrollBehavior = 'auto',
   } = props;
 
   const globalStore = useSendbirdStateContext();
@@ -483,6 +485,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
       onScrollCallback,
       onScrollDownCallback,
       scrollRef,
+      scrollBehavior,
       toggleReaction,
     }}>
       <UserProfileProvider

src/modules/Channel/index.tsx

@@ -36,6 +36,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
       onQuoteMessageClick={props?.onQuoteMessageClick}
       onMessageAnimated={props?.onMessageAnimated}
       onMessageHighlighted={props?.onMessageHighlighted}
+      scrollBehavior={props.scrollBehavior}
     >
       <ChannelUI
         isLoading={props?.isLoading}