From 9f92f881adeeb583fb765003b00618013298515a Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 25 Oct 2024 19:10:19 -0300 Subject: [PATCH 01/10] fix: poc with overlayscrollbars --- .../CustomScrollbars/CustomScrollbars.tsx | 103 +++++++++--------- .../components/Page/PageScrollableContent.tsx | 6 +- .../client/sidebar/RoomList/RoomList.tsx | 21 ++-- apps/meteor/package.json | 2 + yarn.lock | 19 ++++ 5 files changed, 90 insertions(+), 61 deletions(-) diff --git a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx index d443639794f15..39d58e1629e13 100644 --- a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx +++ b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx @@ -1,60 +1,65 @@ -import { Palette } from '@rocket.chat/fuselage'; -import type { ScrollValues } from 'rc-scrollbars'; -import { Scrollbars } from 'rc-scrollbars'; -import type { MutableRefObject, CSSProperties, ReactNode } from 'react'; -import React, { memo, forwardRef, useCallback, useMemo } from 'react'; +import { css } from '@rocket.chat/css-in-js'; +import { Box, Palette } from '@rocket.chat/fuselage'; +import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; +import { useOverlayScrollbars } from 'overlayscrollbars-react'; +import type { HTMLAttributes, ReactElement } from 'react'; +import React, { useEffect, useState, useRef, cloneElement, forwardRef, memo } from 'react'; -export type CustomScrollbarsProps = { +import 'overlayscrollbars/styles/overlayscrollbars.css'; + +type CustomScrollbarsProps = { + children: ReactElement; + virtualized?: boolean; overflowX?: boolean; - style?: CSSProperties; - children?: ReactNode; - onScroll?: (values: ScrollValues) => void; - renderView?: typeof Scrollbars.defaultProps.renderView; - renderTrackHorizontal?: typeof Scrollbars.defaultProps.renderTrackHorizontal; - autoHide?: boolean; -}; - -const styleDefault: CSSProperties = { - flexGrow: 1, - overflowY: 'hidden', -}; - -const CustomScrollbars = forwardRef(function CustomScrollbars( - { children, style, onScroll, overflowX, renderView, ...props }, +} & Omit, 'is'>; + +const CustomScrollbars = forwardRef(function Virtualized( + { virtualized = false, overflowX, ...props }, ref, ) { - const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]); - - const refSetter = useCallback( - (scrollbarRef) => { - if (ref && scrollbarRef) { - if (typeof ref === 'function') { - ref(scrollbarRef.view ?? null); - return; - } + const rootRef = useRef(null); + const mergedRefs = useMergedRefs(rootRef, ref); + const [scroller, setScroller] = useState(null); + const [initialize, osInstance] = useOverlayScrollbars({ + options: { scrollbars: { autoHide: 'scroll' }, overflow: { x: overflowX ? 'scroll' : 'hidden' } }, + defer: true, + }); - (ref as MutableRefObject).current = scrollbarRef.view; - } - }, - [ref], - ); + useEffect(() => { + const { current: root } = rootRef; + + if (scroller && root) { + return initialize({ + target: root, + elements: { + viewport: scroller, + }, + }); + } + + if (root) { + initialize(root); + } + + return () => osInstance()?.destroy(); + }, [scroller, initialize, osInstance]); return ( -
} - renderThumbVertical={({ style, ...props }) => ( -
- )} - children={children} - ref={refSetter} - /> + > + {cloneElement(props.children, virtualized ? { scrollerRef: setScroller } : undefined)} + ); }); diff --git a/apps/meteor/client/components/Page/PageScrollableContent.tsx b/apps/meteor/client/components/Page/PageScrollableContent.tsx index f8c3bb5ba54b3..c31e137114a08 100644 --- a/apps/meteor/client/components/Page/PageScrollableContent.tsx +++ b/apps/meteor/client/components/Page/PageScrollableContent.tsx @@ -1,13 +1,11 @@ -import type { Scrollable } from '@rocket.chat/fuselage'; import { Box } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef } from 'react'; -import type { CustomScrollbarsProps } from '../CustomScrollbars'; import { CustomScrollbars } from '../CustomScrollbars'; type PageScrollableContentProps = { - onScrollContent?: ComponentProps['onScrollContent']; + onScrollContent?: ComponentProps['onScroll']; } & ComponentProps; const PageScrollableContent = forwardRef(function PageScrollableContent( @@ -24,7 +22,7 @@ const PageScrollableContent = forwardRef - + diff --git a/apps/meteor/client/sidebar/RoomList/RoomList.tsx b/apps/meteor/client/sidebar/RoomList/RoomList.tsx index e618663f6ed76..9e9212ccb9b0c 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomList.tsx @@ -8,7 +8,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -121,13 +121,18 @@ const RoomList = (): ReactElement => { return ( - } - /> + + } + /> + ); diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 6d48ccde99940..d51f44bc84b8e 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -393,6 +393,8 @@ "nodemailer": "^6.9.15", "oauth2-server": "3.1.1", "object-path": "^0.11.8", + "overlayscrollbars": "^2.10.0", + "overlayscrollbars-react": "^0.5.6", "path": "^0.12.7", "path-to-regexp": "^6.3.0", "pdfjs-dist": "^2.16.105", diff --git a/yarn.lock b/yarn.lock index 0acf4401d5626..1fd95e329d198 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9227,6 +9227,8 @@ __metadata: oauth2-server: "npm:3.1.1" object-path: "npm:^0.11.8" outdent: "npm:~0.8.0" + overlayscrollbars: "npm:^2.10.0" + overlayscrollbars-react: "npm:^0.5.6" path: "npm:^0.12.7" path-to-regexp: "npm:^6.3.0" pdfjs-dist: "npm:^2.16.105" @@ -29820,6 +29822,23 @@ __metadata: languageName: node linkType: hard +"overlayscrollbars-react@npm:^0.5.6": + version: 0.5.6 + resolution: "overlayscrollbars-react@npm:0.5.6" + peerDependencies: + overlayscrollbars: ^2.0.0 + react: ">=16.8.0" + checksum: 10/473f5af860feab4b5418f9adc8e356fb201e9de61286443ff64002b9c997bc19bf17cf60e314c502c14ca41fa213c12f18111e6fe913be86ad68a15c32e66789 + languageName: node + linkType: hard + +"overlayscrollbars@npm:^2.10.0": + version: 2.10.0 + resolution: "overlayscrollbars@npm:2.10.0" + checksum: 10/d9bc907d722f730f17b2ff6fd678ae6679edd677c431c876bde918838f4a3e08d75bdeec62a9b018d29c0e14c8287277612a2a5cab73afcced4769f1bcb74cfd + languageName: node + linkType: hard + "ow@npm:^0.17.0": version: 0.17.0 resolution: "ow@npm:0.17.0" From f60e6c76faa613bcaea56e5c4b41007444553520 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Mon, 28 Oct 2024 12:38:08 -0300 Subject: [PATCH 02/10] chore: remove `VirtuosoScrollbars` --- .../CustomScrollbars/VirtuosoScrollbars.tsx | 19 ----- .../components/CustomScrollbars/index.ts | 4 +- .../components/GenericTable/GenericTable.tsx | 2 +- .../components/Page/PageScrollableContent.tsx | 2 +- .../client/components/Sidebar/Content.tsx | 2 +- .../CannedResponse/CannedResponseList.tsx | 41 +++++----- .../client/sidebar/RoomList/RoomList.tsx | 2 +- .../FederatedRoomList.tsx | 33 ++++---- .../client/sidebar/search/SearchList.tsx | 21 +++--- .../client/sidebarv2/RoomList/RoomList.tsx | 34 +++++---- .../FederatedRoomList.tsx | 33 ++++---- .../client/sidebarv2/header/SearchList.tsx | 20 ++--- .../history/OutgoingWebhookHistoryPage.tsx | 2 +- .../composer/EmojiPicker/CategoriesResult.tsx | 57 +++++++------- .../composer/EmojiPicker/SearchingResult.tsx | 27 +++---- .../contactHistory/ContactHistoryList.tsx | 27 +++---- .../ContactHistoryMessagesList.tsx | 41 +++++----- .../OutlookEventsList/OutlookEventsList.tsx | 25 ++++--- .../views/room/Sidepanel/RoomSidepanel.tsx | 20 ++--- .../client/views/room/body/RoomBody.tsx | 2 +- .../client/views/room/body/RoomBodyV2.tsx | 2 +- .../Discussions/DiscussionsList.tsx | 29 +++---- .../room/contextualBar/MessageListTab.tsx | 67 +++++++++-------- .../components/MessageSearch.tsx | 75 ++++++++++--------- .../contextualBar/RoomFiles/RoomFiles.tsx | 27 +++---- .../contextualBar/RoomMembers/RoomMembers.tsx | 32 ++++---- .../room/contextualBar/Threads/ThreadList.tsx | 55 +++++++------- .../Threads/components/ThreadMessageList.tsx | 10 +-- .../VideoConfList/VideoConfList.tsx | 39 +++++----- .../contextualBar/channels/TeamsChannels.tsx | 22 +++--- 30 files changed, 384 insertions(+), 388 deletions(-) delete mode 100644 apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx diff --git a/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx deleted file mode 100644 index 06080ede2510a..0000000000000 --- a/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { ComponentProps, Ref } from 'react'; -import React, { forwardRef } from 'react'; - -import CustomScrollbars from './CustomScrollbars'; - -type VirtuosoScrollbarsProps = ComponentProps; - -const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars( - { style, children, ...props }: VirtuosoScrollbarsProps, - ref: Ref, -) { - return ( -
}> - {children} - - ); -}); - -export default VirtuosoScrollbars; diff --git a/apps/meteor/client/components/CustomScrollbars/index.ts b/apps/meteor/client/components/CustomScrollbars/index.ts index 176bb6f81657f..4547cc6733a53 100644 --- a/apps/meteor/client/components/CustomScrollbars/index.ts +++ b/apps/meteor/client/components/CustomScrollbars/index.ts @@ -1,3 +1 @@ -export { default as CustomScrollbars } from './CustomScrollbars'; -export { default as VirtuosoScrollbars } from './VirtuosoScrollbars'; -export * from './CustomScrollbars'; +export { default } from './CustomScrollbars'; diff --git a/apps/meteor/client/components/GenericTable/GenericTable.tsx b/apps/meteor/client/components/GenericTable/GenericTable.tsx index 05173fbe7004b..cb314d3124f84 100644 --- a/apps/meteor/client/components/GenericTable/GenericTable.tsx +++ b/apps/meteor/client/components/GenericTable/GenericTable.tsx @@ -2,7 +2,7 @@ import { Box, Table } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { type ForwardedRef, type ReactNode, forwardRef } from 'react'; -import { CustomScrollbars } from '../CustomScrollbars'; +import CustomScrollbars from '../CustomScrollbars'; type GenericTableProps = { fixed?: boolean; diff --git a/apps/meteor/client/components/Page/PageScrollableContent.tsx b/apps/meteor/client/components/Page/PageScrollableContent.tsx index c31e137114a08..b4c9bf9a52995 100644 --- a/apps/meteor/client/components/Page/PageScrollableContent.tsx +++ b/apps/meteor/client/components/Page/PageScrollableContent.tsx @@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import React, { forwardRef } from 'react'; -import { CustomScrollbars } from '../CustomScrollbars'; +import CustomScrollbars from '../CustomScrollbars'; type PageScrollableContentProps = { onScrollContent?: ComponentProps['onScroll']; diff --git a/apps/meteor/client/components/Sidebar/Content.tsx b/apps/meteor/client/components/Sidebar/Content.tsx index 5e5fa1c15e81e..5972484b80571 100644 --- a/apps/meteor/client/components/Sidebar/Content.tsx +++ b/apps/meteor/client/components/Sidebar/Content.tsx @@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage'; import type { ComponentPropsWithoutRef } from 'react'; import React from 'react'; -import { CustomScrollbars } from '../CustomScrollbars'; +import CustomScrollbars from '../CustomScrollbars'; type ContentProps = ComponentPropsWithoutRef; diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx index 5734cf2e93bf2..8ce20b5f625c0 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx @@ -14,7 +14,7 @@ import { ContextualbarInnerContent, ContextualbarFooter, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import { useRoomToolbox } from '../../../../views/room/contexts/RoomToolboxContext'; import Item from './Item'; import WrapCannedResponse from './WrapCannedResponse'; @@ -92,26 +92,25 @@ const CannedResponseList = ({ {itemCount === 0 && } {itemCount > 0 && cannedItems.length > 0 && ( - loadMoreItems(start, Math.min(25, itemCount - start))} - overscan={25} - data={cannedItems} - components={{ - Scroller: VirtuosoScrollbars, - }} - itemContent={(_index, data): ReactElement => ( - { - onClickItem(data); - }} - onClickUse={onClickUse} - /> - )} - /> + + loadMoreItems(start, Math.min(25, itemCount - start))} + overscan={25} + data={cannedItems} + itemContent={(_index, data): ReactElement => ( + { + onClickItem(data); + }} + onClickUse={onClickUse} + /> + )} + /> + )} diff --git a/apps/meteor/client/sidebar/RoomList/RoomList.tsx b/apps/meteor/client/sidebar/RoomList/RoomList.tsx index 9e9212ccb9b0c..c45039c426deb 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomList.tsx @@ -8,7 +8,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; -import { CustomScrollbars } from '../../components/CustomScrollbars'; +import CustomScrollbars from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx index 1b49e987faf8b..a9b971294eb73 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; import FederatedRoomListEmptyPlaceholder from './FederatedRoomListEmptyPlaceholder'; import FederatedRoomListItem from './FederatedRoomListItem'; @@ -60,21 +60,22 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro const flattenedData = data?.pages.flatMap((page) => page.rooms); return ( - room?.id || index} - overscan={4} - components={{ - // eslint-disable-next-line react/no-multi-comp - Footer: () => (isFetchingNextPage ? : null), - Scroller: VirtuosoScrollbars, - EmptyPlaceholder: FederatedRoomListEmptyPlaceholder, - }} - endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()} - itemContent={(_, room) => ( - onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> - )} - /> + + room?.id || index} + overscan={4} + components={{ + // eslint-disable-next-line react/no-multi-comp + Footer: () => (isFetchingNextPage ? : null), + EmptyPlaceholder: FederatedRoomListEmptyPlaceholder, + }} + endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()} + itemContent={(_, room) => ( + onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> + )} + /> + ); }; diff --git a/apps/meteor/client/sidebar/search/SearchList.tsx b/apps/meteor/client/sidebar/search/SearchList.tsx index dd97678f638ae..8f6dc9401743a 100644 --- a/apps/meteor/client/sidebar/search/SearchList.tsx +++ b/apps/meteor/client/sidebar/search/SearchList.tsx @@ -12,7 +12,7 @@ import type { VirtuosoHandle } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso'; import tinykeys from 'tinykeys'; -import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; +import CustomScrollbars from '../../components/CustomScrollbars'; import { getConfig } from '../../lib/utils/getConfig'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -364,15 +364,16 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps, aria-busy={isLoading} onClick={handleClick} > - room._id} - itemContent={(_, data): ReactElement => } - ref={listRef} - /> + + room._id} + itemContent={(_, data): ReactElement => } + ref={listRef} + /> + ); diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx index 6afa27992fb23..9421c545a4a8b 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx @@ -5,7 +5,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { GroupedVirtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; +import CustomScrollbars from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { useCollapsedGroups } from '../hooks/useCollapsedGroups'; @@ -48,21 +48,23 @@ const RoomList = () => { return ( - ( - handleClick(groupsList[index])} - onKeyDown={(e) => handleKeyDown(e, groupsList[index])} - expanded={!collapsedGroups.includes(groupsList[index])} - /> - )} - {...(roomList.length > 0 && { - itemContent: (index) => roomList[index] && , - })} - components={{ Item: RoomListRowWrapper, List: RoomListWrapper, Scroller: VirtuosoScrollbars }} - /> + + ( + handleClick(groupsList[index])} + onKeyDown={(e) => handleKeyDown(e, groupsList[index])} + expanded={!collapsedGroups.includes(groupsList[index])} + /> + )} + {...(roomList.length > 0 && { + itemContent: (index) => roomList[index] && , + })} + components={{ Item: RoomListRowWrapper, List: RoomListWrapper }} + /> + ); }; diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx index a69cd3aec9b25..628d837d5d6e7 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; import FederatedRoomListEmptyPlaceholder from './FederatedRoomListEmptyPlaceholder'; import FederatedRoomListItem from './FederatedRoomListItem'; @@ -61,21 +61,22 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro const flattenedData = data?.pages.flatMap((page) => page.rooms); return ( - room?.id || index} - overscan={4} - components={{ - // eslint-disable-next-line react/no-multi-comp - Footer: () => (isFetchingNextPage ? : null), - Scroller: VirtuosoScrollbars, - EmptyPlaceholder: FederatedRoomListEmptyPlaceholder, - }} - endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()} - itemContent={(_, room) => ( - onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> - )} - /> + + room?.id || index} + overscan={4} + components={{ + // eslint-disable-next-line react/no-multi-comp + Footer: () => (isFetchingNextPage ? : null), + EmptyPlaceholder: FederatedRoomListEmptyPlaceholder, + }} + endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()} + itemContent={(_, room) => ( + onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> + )} + /> + ); }; diff --git a/apps/meteor/client/sidebarv2/header/SearchList.tsx b/apps/meteor/client/sidebarv2/header/SearchList.tsx index 066b82ce7681e..02d11eb1b25b0 100644 --- a/apps/meteor/client/sidebarv2/header/SearchList.tsx +++ b/apps/meteor/client/sidebarv2/header/SearchList.tsx @@ -4,7 +4,7 @@ import type { MouseEventHandler, ReactElement } from 'react'; import React, { useMemo, useRef } from 'react'; import { Virtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../components/CustomScrollbars'; +import CustomScrollbars from '../../components/CustomScrollbars'; import RoomListWrapper from '../RoomList/RoomListWrapper'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -65,14 +65,16 @@ const SearchList = ({ filterText, onEscSearch, showRecentList }: SearchListProps onClick={handleClick} > {showRecentList && } - room._id} - itemContent={(_, data): ReactElement => } - /> + + room._id} + itemContent={(_, data): ReactElement => } + /> + ); }; diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx index ac05b3bf0ddd7..a73b6836e695a 100644 --- a/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx +++ b/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx @@ -5,7 +5,7 @@ import type { ComponentProps } from 'react'; import React, { useMemo, useState, useEffect } from 'react'; import { sdk } from '../../../../../../app/utils/client/lib/SDKClient'; -import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../../components/CustomScrollbars'; import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination'; import { Page, PageHeader, PageContent } from '../../../../../components/Page'; import HistoryContent from './HistoryContent'; diff --git a/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx index fe609da8640de..60994b996b31a 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx @@ -6,7 +6,7 @@ import type { VirtuosoHandle } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso'; import type { EmojiCategoryPosition, EmojiByCategory } from '../../../../app/emoji/client'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import EmojiCategoryRow from './EmojiCategoryRow'; type CategoriesResultProps = { @@ -34,34 +34,35 @@ const CategoriesResult = forwardRef(funct `} height='full' > - { - if (!wrapper.current) { - return; - } + + { + if (!wrapper.current) { + return; + } - if (isScrolling) { - wrapper.current.classList.add('pointer-none'); - } else { - wrapper.current.classList.remove('pointer-none'); - } - }} - itemContent={(_, data) => ( - - )} - /> + if (isScrolling) { + wrapper.current.classList.add('pointer-none'); + } else { + wrapper.current.classList.remove('pointer-none'); + } + }} + itemContent={(_, data) => ( + + )} + /> + ); }); diff --git a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx index 152d13bae5dea..e17d9e82e7e79 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx @@ -6,7 +6,7 @@ import type { VirtuosoGridHandle } from 'react-virtuoso'; import { VirtuosoGrid } from 'react-virtuoso'; import type { EmojiItem } from '../../../../app/emoji/client'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import EmojiElement from './EmojiElement'; import SearchingResultWrapper from './SearchingResultWrapper'; @@ -29,18 +29,19 @@ const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultPr } return ( - { - const { emoji, image } = searchResults[index] || {}; - return ; - }} - /> + + { + const { emoji, image } = searchResults[index] || {}; + return ; + }} + /> + ); }; diff --git a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx index 5a1cd52eab3ce..531a0aa489943 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/ContactHistoryList.tsx @@ -12,7 +12,7 @@ import { ContextualbarClose, ContextualbarEmptyContent, } from '../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { useRecordList } from '../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../lib/asyncState'; import { useOmnichannelRoom } from '../../room/contexts/RoomContext'; @@ -77,18 +77,19 @@ const ContactHistoryList = ({ setChatId, close }: { setChatId: Dispatch} {!error && totalItemCount > 0 && history.length > 0 && ( - undefined - : (start): unknown => loadMoreItems(start, Math.min(50, totalItemCount - start)) - } - overscan={25} - data={history} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(index, data): ReactElement => } - /> + + undefined + : (start): unknown => loadMoreItems(start, Math.min(50, totalItemCount - start)) + } + overscan={25} + data={history} + itemContent={(index, data): ReactElement => } + /> + )} diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx index 3bf6385a19a0f..3c6bd8617d62d 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx @@ -13,7 +13,7 @@ import { ContextualbarContent, ContextualbarEmptyContent, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import { useRecordList } from '../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../lib/asyncState'; import { isMessageNewDay } from '../../../room/MessageList/lib/isMessageNewDay'; @@ -89,25 +89,26 @@ const ContactHistoryMessagesList = ({ {phase !== AsyncStatePhase.LOADING && totalItemCount === 0 && } {!error && totalItemCount > 0 && history.length > 0 && ( - undefined - : (start): unknown => loadMoreItems(start, Math.min(50, totalItemCount - start)) - } - overscan={25} - data={messages} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(index, data): ReactElement => { - const lastMessage = messages[index - 1]; - const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod); - const isNewDay = isMessageNewDay(data, lastMessage); - return ( - - ); - }} - /> + + undefined + : (start): unknown => loadMoreItems(start, Math.min(50, totalItemCount - start)) + } + overscan={25} + data={messages} + itemContent={(index, data): ReactElement => { + const lastMessage = messages[index - 1]; + const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod); + const isNewDay = isMessageNewDay(data, lastMessage); + return ( + + ); + }} + /> + )} diff --git a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx index 286028e0059d7..8ef3aaf6ac0b8 100644 --- a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx +++ b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx @@ -14,7 +14,7 @@ import { ContextualbarFooter, ContextualbarSkeleton, } from '../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { getErrorMessage } from '../../../lib/errorHandling'; import { useOutlookAuthentication } from '../hooks/useOutlookAuthentication'; import { useMutationOutlookCalendarSync, useOutlookCalendarListForToday } from '../hooks/useOutlookCalendarList'; @@ -100,17 +100,18 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps): Re )} {calendarListResult.isSuccess && calendarListResult.data.length > 0 && ( - } - /> + + } + /> + )} diff --git a/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx b/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx index 6ee16a8502025..8cd55a89fc2a3 100644 --- a/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx +++ b/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx @@ -4,7 +4,7 @@ import { useUserPreference } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; import { Virtuoso } from 'react-virtuoso'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint'; import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManager'; import RoomSidepanelListWrapper from './RoomSidepanelListWrapper'; @@ -50,14 +50,16 @@ const RoomSidepanelWithData = ({ parentRid, openedRoom }: { parentRid: string; o return ( - ( - - )} - /> + + ( + + )} + /> + ); diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index a592bb1fa2c0d..147c4c21f8d5b 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -7,7 +7,7 @@ import React, { memo, useCallback, useMemo, useRef } from 'react'; import { RoomRoles } from '../../../../app/models/client'; import { isTruthy } from '../../../../lib/isTruthy'; -import { CustomScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; import { useReactiveQuery } from '../../../hooks/useReactiveQuery'; import Announcement from '../Announcement'; diff --git a/apps/meteor/client/views/room/body/RoomBodyV2.tsx b/apps/meteor/client/views/room/body/RoomBodyV2.tsx index cfd6cb94cb518..621effdc226bc 100644 --- a/apps/meteor/client/views/room/body/RoomBodyV2.tsx +++ b/apps/meteor/client/views/room/body/RoomBodyV2.tsx @@ -6,7 +6,7 @@ import type { MouseEventHandler, ReactElement } from 'react'; import React, { memo, useCallback, useMemo, useRef } from 'react'; import { isTruthy } from '../../../../lib/isTruthy'; -import { CustomScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; import { BubbleDate } from '../BubbleDate'; import { MessageList } from '../MessageList'; diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx index 9b2c6217e52a7..2bd6007e785ec 100644 --- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx @@ -16,7 +16,7 @@ import { ContextualbarTitle, ContextualbarSection, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import { goToRoomById } from '../../../../lib/utils/goToRoomById'; import DiscussionsListRow from './DiscussionsListRow'; @@ -87,19 +87,20 @@ function DiscussionsList({ {!error && total > 0 && discussions.length > 0 && ( - undefined : (start) => loadMoreItems(start, Math.min(50, total - start))} - overscan={25} - data={discussions} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(_, data) => } - /> + + undefined : (start) => loadMoreItems(start, Math.min(50, total - start))} + overscan={25} + data={discussions} + itemContent={(_, data) => } + /> + )} diff --git a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx index bd6c8da508aff..30315973334ce 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx @@ -17,7 +17,7 @@ import { ContextualbarClose, ContextualbarEmptyContent, } from '../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../components/CustomScrollbars'; import RoomMessage from '../../../components/message/variants/RoomMessage'; import SystemMessage from '../../../components/message/variants/SystemMessage'; import { useFormatDate } from '../../../hooks/useFormatDate'; @@ -67,43 +67,44 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes - { - const previous = queryResult.data[index - 1]; + + { + const previous = queryResult.data[index - 1]; - const newDay = isMessageNewDay(message, previous); + const newDay = isMessageNewDay(message, previous); - const system = MessageTypes.isSystemMessage(message); + const system = MessageTypes.isSystemMessage(message); - const unread = subscription?.tunread?.includes(message._id) ?? false; - const mention = subscription?.tunreadUser?.includes(message._id) ?? false; - const all = subscription?.tunreadGroup?.includes(message._id) ?? false; + const unread = subscription?.tunread?.includes(message._id) ?? false; + const mention = subscription?.tunreadUser?.includes(message._id) ?? false; + const all = subscription?.tunreadGroup?.includes(message._id) ?? false; - return ( - <> - {newDay && {formatDate(message.ts)}} + return ( + <> + {newDay && {formatDate(message.ts)}} - {system ? ( - - ) : ( - - )} - - ); - }} - /> + {system ? ( + + ) : ( + + )} + + ); + }} + /> + diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx index 576502fa357df..9ab8f78e3bcc2 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx @@ -6,7 +6,7 @@ import { Virtuoso } from 'react-virtuoso'; import { MessageTypes } from '../../../../../../app/ui-utils/client'; import { ContextualbarEmptyContent } from '../../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../../components/CustomScrollbars'; import RoomMessage from '../../../../../components/message/variants/RoomMessage'; import SystemMessage from '../../../../../components/message/variants/SystemMessage'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; @@ -41,47 +41,48 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE - { - const previous = messageSearchQuery.data[index - 1]; + + { + const previous = messageSearchQuery.data[index - 1]; - const newDay = isMessageNewDay(message, previous); + const newDay = isMessageNewDay(message, previous); - const system = MessageTypes.isSystemMessage(message); + const system = MessageTypes.isSystemMessage(message); - const unread = subscription?.tunread?.includes(message._id) ?? false; - const mention = subscription?.tunreadUser?.includes(message._id) ?? false; - const all = subscription?.tunreadGroup?.includes(message._id) ?? false; + const unread = subscription?.tunread?.includes(message._id) ?? false; + const mention = subscription?.tunreadUser?.includes(message._id) ?? false; + const all = subscription?.tunreadGroup?.includes(message._id) ?? false; - return ( - - {newDay && {formatDate(message.ts)}} + return ( + + {newDay && {formatDate(message.ts)}} - {system ? ( - - ) : ( - - )} - - ); - }} - endReached={() => { - setLimit((limit) => limit + pageSize); - }} - /> + {system ? ( + + ) : ( + + )} + + ); + }} + endReached={() => { + setLimit((limit) => limit + pageSize); + }} + /> + diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx index e699ee6f6c774..d7dc35b930fbb 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx @@ -14,7 +14,7 @@ import { ContextualbarContent, ContextualbarEmptyContent, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import FileItem from './components/FileItem'; type RoomFilesProps = { @@ -84,18 +84,19 @@ const RoomFiles = ({ {!loading && filesItems.length === 0 && } {!loading && filesItems.length > 0 && ( - loadMoreItems(start, Math.min(50, total - start))} - overscan={50} - data={filesItems} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(_, data) => } - /> + + loadMoreItems(start, Math.min(50, total - start))} + overscan={50} + data={filesItems} + itemContent={(_, data) => } + /> + )} diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx index d14c5d8a692cc..902e5dce54e2b 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx @@ -17,7 +17,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import InfiniteListAnchor from '../../../../components/InfiniteListAnchor'; import RoomMembersRow from './RoomMembersRow'; @@ -129,20 +129,22 @@ const RoomMembers = ({ - }} - itemContent={(index, data): ReactElement => ( - - )} - /> + + }} + itemContent={(index, data): ReactElement => ( + + )} + /> + )} diff --git a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx index e9ec3d61d1e76..d9b7fc342b32a 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx @@ -15,7 +15,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import { useRecordList } from '../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../lib/asyncState'; import type { ThreadsListOptions } from '../../../../lib/lists/ThreadsList'; @@ -152,32 +152,33 @@ const ThreadList = () => { {!error && itemCount > 0 && items.length > 0 && ( - undefined - : (start): void => { - loadMoreItems(start, Math.min(50, itemCount - start)); - } - } - overscan={25} - data={items} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(_index, data: IMessage): ReactElement => ( - - )} - /> + + undefined + : (start): void => { + loadMoreItems(start, Math.min(50, itemCount - start)); + } + } + overscan={25} + data={items} + itemContent={(_index, data: IMessage): ReactElement => ( + + )} + /> + )} diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx index aeb6f8a6e5cb9..e6c9ee9e54fd5 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx @@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'; import { MessageTypes } from '../../../../../../app/ui-utils/client'; import { isTruthy } from '../../../../../../lib/isTruthy'; -import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../../components/CustomScrollbars'; import { BubbleDate } from '../../../BubbleDate'; import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay'; import MessageListProvider from '../../../MessageList/providers/MessageListProvider'; @@ -74,13 +74,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen return (
- { - handleScroll(args); - }} - style={{ scrollBehavior: 'smooth', overflowX: 'hidden' }} - > + {videoConfs.length > 0 && ( - undefined - : (start) => { - loadMoreItems(start, Math.min(50, total - start)); - } - } - overscan={25} - data={videoConfs} - components={{ Scroller: VirtuosoScrollbars }} - itemContent={(_index, data): ReactElement => } - /> + + undefined + : (start) => { + loadMoreItems(start, Math.min(50, total - start)); + } + } + overscan={25} + data={videoConfs} + itemContent={(_index, data): ReactElement => } + /> + )} diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx index 288604727ef67..52757aaec3192 100644 --- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx +++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx @@ -17,7 +17,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import { VirtuosoScrollbars } from '../../../../components/CustomScrollbars'; +import CustomScrollbars from '../../../../components/CustomScrollbars'; import InfiniteListAnchor from '../../../../components/InfiniteListAnchor'; import TeamsChannelItem from './TeamsChannelItem'; @@ -111,15 +111,17 @@ const TeamsChannels = ({ - }} - itemContent={(index, data) => ( - - )} - /> + + }} + itemContent={(index, data) => ( + + )} + /> + )} From d703fec13eaa697214cd469138acd256fca743e4 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 27 Feb 2025 16:10:00 -0300 Subject: [PATCH 03/10] refactor: custom scrollBars --- .../CustomScrollbars/BaseScrollbars.tsx | 31 ++++++++++ .../CustomScrollbars/CustomScrollbars.tsx | 61 ++++++------------- .../VirtualizedScrollbars.tsx | 46 ++++++++++++++ .../components/CustomScrollbars/index.ts | 3 +- 4 files changed, 99 insertions(+), 42 deletions(-) create mode 100644 apps/meteor/client/components/CustomScrollbars/BaseScrollbars.tsx create mode 100644 apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx diff --git a/apps/meteor/client/components/CustomScrollbars/BaseScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/BaseScrollbars.tsx new file mode 100644 index 0000000000000..98012180c403b --- /dev/null +++ b/apps/meteor/client/components/CustomScrollbars/BaseScrollbars.tsx @@ -0,0 +1,31 @@ +import { css } from '@rocket.chat/css-in-js'; +import { Box, Palette } from '@rocket.chat/fuselage'; +import type { ComponentProps } from 'react'; +import { forwardRef, memo } from 'react'; + +import 'overlayscrollbars/styles/overlayscrollbars.css'; + +export const getScrollbarsOptions = (overflowX?: boolean) => + ({ + scrollbars: { autoHide: 'scroll' }, + overflow: { x: overflowX ? 'scroll' : 'hidden' }, + }) as const; + +const BaseScrollbars = forwardRef>(function BaseScrollbars(props, ref) { + return ( + + ); +}); + +export default memo(BaseScrollbars); diff --git a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx index 844ca91bf6284..01e91c1bcceee 100644 --- a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx +++ b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx @@ -1,66 +1,45 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box, Palette } from '@rocket.chat/fuselage'; -import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; import { useOverlayScrollbars } from 'overlayscrollbars-react'; import type { HTMLAttributes, ReactElement } from 'react'; -import { useEffect, useState, useRef, cloneElement, forwardRef, memo } from 'react'; +import { useEffect, useRef, forwardRef, memo } from 'react'; -import 'overlayscrollbars/styles/overlayscrollbars.css'; +import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars'; type CustomScrollbarsProps = { children: ReactElement; - virtualized?: boolean; overflowX?: boolean; } & Omit, 'is'>; -const CustomScrollbars = forwardRef(function Virtualized( - { virtualized = false, overflowX, ...props }, - ref, -) { +const CustomScrollbars = forwardRef(function CustomScrollbars({ overflowX, ...props }, ref) { const rootRef = useRef(null); - const mergedRefs = useMergedRefs(rootRef, ref); - const [scroller, setScroller] = useState(null); + const scrollbarsOptions = getScrollbarsOptions(overflowX); const [initialize, osInstance] = useOverlayScrollbars({ - options: { scrollbars: { autoHide: 'scroll' }, overflow: { x: overflowX ? 'scroll' : 'hidden' } }, - defer: true, + options: scrollbarsOptions, }); useEffect(() => { const { current: root } = rootRef; - if (scroller && root) { - return initialize({ - target: root, - elements: { - viewport: scroller, - }, - }); - } - if (root) { initialize(root); + + const instance = osInstance(); + if (!instance || !ref) { + return; + } + + if (typeof ref === 'function') { + ref(instance.elements().viewport || null); + console.log(instance.elements()); + return; + } + + ref.current = instance.elements().viewport || null; } return () => osInstance()?.destroy(); - }, [scroller, initialize, osInstance]); + }, [initialize, osInstance, ref]); - return ( - - {cloneElement(props.children, virtualized ? { scrollerRef: setScroller } : undefined)} - - ); + return ; }); export default memo(CustomScrollbars); diff --git a/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx new file mode 100644 index 0000000000000..854eb8aa7c7c2 --- /dev/null +++ b/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx @@ -0,0 +1,46 @@ +import { useOverlayScrollbars } from 'overlayscrollbars-react'; +import type { HTMLAttributes, ReactElement } from 'react'; +import { useEffect, useState, useRef, cloneElement, forwardRef, memo } from 'react'; + +import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars'; + +type VirtualizedScrollbarsProps = { + overflowX?: boolean; + children: ReactElement; +} & Omit, 'is'>; + +const VirtualizedScrollbars = forwardRef(function VirtualizedScrollbars( + { overflowX, ...props }, + ref, +) { + const rootRef = useRef(null); + const [scroller, setScroller] = useState(null); + const scrollbarsOptions = getScrollbarsOptions(overflowX); + const [initialize, osInstance] = useOverlayScrollbars({ + options: scrollbarsOptions, + defer: true, + }); + + useEffect(() => { + const { current: root } = rootRef; + + if (scroller && root) { + initialize({ + target: root, + elements: { + viewport: scroller, + }, + }); + } + + if (root) { + initialize(root); + } + + return () => osInstance()?.destroy(); + }, [initialize, osInstance, ref, scroller]); + + return {cloneElement(props.children, { scrollerRef: setScroller })}; +}); + +export default memo(VirtualizedScrollbars); diff --git a/apps/meteor/client/components/CustomScrollbars/index.ts b/apps/meteor/client/components/CustomScrollbars/index.ts index 4547cc6733a53..b153a4a390332 100644 --- a/apps/meteor/client/components/CustomScrollbars/index.ts +++ b/apps/meteor/client/components/CustomScrollbars/index.ts @@ -1 +1,2 @@ -export { default } from './CustomScrollbars'; +export { default as CustomScrollbars } from './CustomScrollbars'; +export { default as VirtualizedScrollbars } from './VirtualizedScrollbars'; From 9812880d161f9ce2770bec156e2902bc6faa1a56 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 27 Feb 2025 16:16:28 -0300 Subject: [PATCH 04/10] chore: apply component changes in files --- .../client/components/GenericTable/GenericTable.tsx | 2 +- .../client/components/Page/PageScrollableContent.tsx | 2 +- apps/meteor/client/components/Sidebar/Content.tsx | 2 +- .../contextualBar/CannedResponse/CannedResponseList.tsx | 6 +++--- apps/meteor/client/sidebar/RoomList/RoomList.tsx | 6 +++--- .../header/MatrixFederationSearch/FederatedRoomList.tsx | 8 ++++---- apps/meteor/client/sidebar/search/SearchList.tsx | 6 +++--- apps/meteor/client/sidebarv2/RoomList/RoomList.tsx | 6 +++--- .../header/MatrixFederationSearch/FederatedRoomList.tsx | 6 +++--- apps/meteor/client/sidebarv2/header/SearchList.tsx | 6 +++--- .../outgoing/history/OutgoingWebhookHistoryPage.tsx | 2 +- .../views/composer/EmojiPicker/CategoriesResult.tsx | 2 +- .../client/views/composer/EmojiPicker/SearchingResult.tsx | 6 +++--- .../MessageList/ContactHistoryMessagesList.tsx | 6 +++--- .../tabs/ContactInfoChannels/ContactInfoChannels.tsx | 6 +++--- .../tabs/ContactInfoHistory/ContactInfoHistory.tsx | 6 +++--- .../ContactInfoHistory/ContactInfoHistoryMessages.tsx | 6 +++--- .../OutlookEventsList/OutlookEventsList.tsx | 6 +++--- apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx | 2 +- apps/meteor/client/views/room/body/RoomBody.tsx | 4 ++-- apps/meteor/client/views/room/body/RoomBodyV2.tsx | 2 +- .../room/contextualBar/Discussions/DiscussionsList.tsx | 6 +++--- .../client/views/room/contextualBar/MessageListTab.tsx | 2 +- .../MessageSearchTab/components/MessageSearch.tsx | 2 +- .../views/room/contextualBar/RoomFiles/RoomFiles.tsx | 6 +++--- .../views/room/contextualBar/RoomMembers/RoomMembers.tsx | 6 +++--- .../views/room/contextualBar/Threads/ThreadList.tsx | 6 +++--- .../Threads/components/ThreadMessageList.tsx | 2 +- .../VideoConference/VideoConfList/VideoConfList.tsx | 6 +++--- .../views/teams/contextualBar/channels/TeamsChannels.tsx | 2 +- 30 files changed, 68 insertions(+), 68 deletions(-) diff --git a/apps/meteor/client/components/GenericTable/GenericTable.tsx b/apps/meteor/client/components/GenericTable/GenericTable.tsx index ce75f0bcd0b73..1f2e52f893442 100644 --- a/apps/meteor/client/components/GenericTable/GenericTable.tsx +++ b/apps/meteor/client/components/GenericTable/GenericTable.tsx @@ -2,7 +2,7 @@ import { Box, Table } from '@rocket.chat/fuselage'; import type { ComponentProps, ForwardedRef, ReactNode } from 'react'; import { forwardRef } from 'react'; -import CustomScrollbars from '../CustomScrollbars'; +import { CustomScrollbars } from '../CustomScrollbars'; type GenericTableProps = { fixed?: boolean; diff --git a/apps/meteor/client/components/Page/PageScrollableContent.tsx b/apps/meteor/client/components/Page/PageScrollableContent.tsx index 3d33ed05c93d0..d64788d334d51 100644 --- a/apps/meteor/client/components/Page/PageScrollableContent.tsx +++ b/apps/meteor/client/components/Page/PageScrollableContent.tsx @@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import { forwardRef } from 'react'; -import CustomScrollbars from '../CustomScrollbars'; +import { CustomScrollbars } from '../CustomScrollbars'; type PageScrollableContentProps = { onScrollContent?: ComponentProps['onScroll']; diff --git a/apps/meteor/client/components/Sidebar/Content.tsx b/apps/meteor/client/components/Sidebar/Content.tsx index eb6492f4a0f95..1f87f7ddc0588 100644 --- a/apps/meteor/client/components/Sidebar/Content.tsx +++ b/apps/meteor/client/components/Sidebar/Content.tsx @@ -1,7 +1,7 @@ import { Box } from '@rocket.chat/fuselage'; import type { ComponentPropsWithoutRef } from 'react'; -import CustomScrollbars from '../CustomScrollbars'; +import { CustomScrollbars } from '../CustomScrollbars'; type ContentProps = ComponentPropsWithoutRef; diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx index 4c7dadd02f249..a212d7ec56f28 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx @@ -16,7 +16,7 @@ import { ContextualbarInnerContent, ContextualbarFooter, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; import { useRoomToolbox } from '../../../../views/room/contexts/RoomToolboxContext'; type CannedResponseListProps = { @@ -92,7 +92,7 @@ const CannedResponseList = ({ {itemCount === 0 && } {itemCount > 0 && cannedItems.length > 0 && ( - + )} /> - + )} diff --git a/apps/meteor/client/sidebar/RoomList/RoomList.tsx b/apps/meteor/client/sidebar/RoomList/RoomList.tsx index 013b3ef93196e..ad3b58886d0f3 100644 --- a/apps/meteor/client/sidebar/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebar/RoomList/RoomList.tsx @@ -11,7 +11,7 @@ import { Virtuoso } from 'react-virtuoso'; import RoomListRow from './RoomListRow'; import RoomListRowWrapper from './RoomListRowWrapper'; import RoomListWrapper from './RoomListWrapper'; -import CustomScrollbars from '../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -121,7 +121,7 @@ const RoomList = (): ReactElement => { return ( - + { computeItemKey={computeItemKey} itemContent={(_, data): ReactElement => } /> - + ); diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx index d11bf0aa98e81..3b838e0e18a80 100644 --- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx +++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx @@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso'; import FederatedRoomListEmptyPlaceholder from './FederatedRoomListEmptyPlaceholder'; import FederatedRoomListItem from './FederatedRoomListItem'; import { useInfiniteFederationSearchPublicRooms } from './useInfiniteFederationSearchPublicRooms'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../components/CustomScrollbars'; import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; type FederatedRoomListProps = { @@ -60,7 +60,7 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro const flattenedData = data?.pages.flatMap((page) => page.rooms); return ( - + room?.id || index} @@ -70,12 +70,12 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro Footer: () => (isFetchingNextPage ? : null), EmptyPlaceholder: FederatedRoomListEmptyPlaceholder, }} - endReached={isLoading || isFetchingNextPage ? () => undefined : () => fetchNextPage()} + endReached={isLoadingMutation || isFetchingNextPage ? () => undefined : () => fetchNextPage()} itemContent={(_, room) => ( onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> )} /> - + ); }; diff --git a/apps/meteor/client/sidebar/search/SearchList.tsx b/apps/meteor/client/sidebar/search/SearchList.tsx index 51921561694b2..8ee16245d4178 100644 --- a/apps/meteor/client/sidebar/search/SearchList.tsx +++ b/apps/meteor/client/sidebar/search/SearchList.tsx @@ -13,7 +13,7 @@ import { Virtuoso } from 'react-virtuoso'; import tinykeys from 'tinykeys'; import Row from './Row'; -import CustomScrollbars from '../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../components/CustomScrollbars'; import { getConfig } from '../../lib/utils/getConfig'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -363,7 +363,7 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps, aria-busy={isLoading} onClick={handleClick} > - + } ref={listRef} /> - + ); diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx index 0a8d69e623d22..7bd883443f0d0 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx @@ -9,7 +9,7 @@ import RoomListCollapser from './RoomListCollapser'; import RoomListRow from './RoomListRow'; import RoomListRowWrapper from './RoomListRowWrapper'; import RoomListWrapper from './RoomListWrapper'; -import CustomScrollbars from '../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../components/CustomScrollbars'; import { useOpenedRoom } from '../../lib/RoomManager'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { useCollapsedGroups } from '../hooks/useCollapsedGroups'; @@ -49,7 +49,7 @@ const RoomList = () => { return ( - + ( @@ -66,7 +66,7 @@ const RoomList = () => { })} components={{ Item: RoomListRowWrapper, List: RoomListWrapper }} /> - + ); }; diff --git a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx index 20c0532ccbb28..dbcb4fa81483e 100644 --- a/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx +++ b/apps/meteor/client/sidebarv2/header/MatrixFederationSearch/FederatedRoomList.tsx @@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso'; import FederatedRoomListEmptyPlaceholder from './FederatedRoomListEmptyPlaceholder'; import FederatedRoomListItem from './FederatedRoomListItem'; import { useInfiniteFederationSearchPublicRooms } from './useInfiniteFederationSearchPublicRooms'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../components/CustomScrollbars'; import { roomCoordinator } from '../../../lib/rooms/roomCoordinator'; type FederatedRoomListProps = { @@ -61,7 +61,7 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro const flattenedData = data?.pages.flatMap((page) => page.rooms); return ( - + room?.id || index} @@ -76,7 +76,7 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro onClickJoin(room)} {...room} disabled={isLoadingMutation} key={room.id} /> )} /> - + ); }; diff --git a/apps/meteor/client/sidebarv2/header/SearchList.tsx b/apps/meteor/client/sidebarv2/header/SearchList.tsx index a94ede26c8657..2f9d09b704ab2 100644 --- a/apps/meteor/client/sidebarv2/header/SearchList.tsx +++ b/apps/meteor/client/sidebarv2/header/SearchList.tsx @@ -4,7 +4,7 @@ import type { MouseEventHandler, ReactElement } from 'react'; import { useMemo, useRef } from 'react'; import { Virtuoso } from 'react-virtuoso'; -import CustomScrollbars from '../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../components/CustomScrollbars'; import RoomListWrapper from '../RoomList/RoomListWrapper'; import { useAvatarTemplate } from '../hooks/useAvatarTemplate'; import { usePreventDefault } from '../hooks/usePreventDefault'; @@ -65,7 +65,7 @@ const SearchList = ({ filterText, onEscSearch, showRecentList }: SearchListProps onClick={handleClick} > {showRecentList && } - + room._id} itemContent={(_, data): ReactElement => } /> - + ); }; diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx index 0dcef26524fee..a14e252bde9af 100644 --- a/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx +++ b/apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx @@ -6,7 +6,7 @@ import { useMemo, useState, useEffect } from 'react'; import HistoryContent from './HistoryContent'; import { sdk } from '../../../../../../app/utils/client/lib/SDKClient'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination'; import { Page, PageHeader, PageContent } from '../../../../../components/Page'; diff --git a/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx index 44717f37e5fd3..61a9ecbed1c8f 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/CategoriesResult.tsx @@ -7,7 +7,7 @@ import { Virtuoso } from 'react-virtuoso'; import EmojiCategoryRow from './EmojiCategoryRow'; import type { EmojiByCategory } from '../../../../app/emoji/client'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../components/CustomScrollbars'; type CategoriesResultProps = { emojiListByCategory: EmojiByCategory[]; diff --git a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx index f06cf27168a88..10866bbd0b544 100644 --- a/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx +++ b/apps/meteor/client/views/composer/EmojiPicker/SearchingResult.tsx @@ -8,7 +8,7 @@ import { VirtuosoGrid } from 'react-virtuoso'; import EmojiElement from './EmojiElement'; import SearchingResultWrapper from './SearchingResultWrapper'; import type { EmojiItem } from '../../../../app/emoji/client'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../components/CustomScrollbars'; /** * the `SearchingResults` is missing the previous loadMore function that was implemented before on the latest version of EmojiPicker using the Blaze Template. It can't be implemented because of the issue with react-virtuoso and the custom scrollbars, since its using virtual list its not gonna be an issue rendering bigger results for search @@ -29,7 +29,7 @@ const SearchingResult = ({ searchResults, handleSelectEmoji }: SearchingResultPr } return ( - + ; }} /> - + ); }; diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx index 786aa73d48dc6..d5e06e412f9ac 100644 --- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx +++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx @@ -29,7 +29,7 @@ import { ContextualbarContent, ContextualbarEmptyContent, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; import { useRecordList } from '../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../lib/asyncState'; import { isMessageNewDay } from '../../../room/MessageList/lib/isMessageNewDay'; @@ -115,7 +115,7 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist {phase !== AsyncStatePhase.LOADING && totalItemCount === 0 && } {!error && totalItemCount > 0 && history.length > 0 && ( - + - + )} diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx index 87e84fb9b1cc9..49b3be9a15b18 100644 --- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx +++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx @@ -7,7 +7,7 @@ import { Virtuoso } from 'react-virtuoso'; import ContactInfoChannelsItem from './ContactInfoChannelsItem'; import { ContextualbarContent, ContextualbarEmptyContent } from '../../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../../components/CustomScrollbars'; type ContactInfoChannelsProps = { contactId: ILivechatContact['_id']; @@ -54,14 +54,14 @@ const ContactInfoChannels = ({ contactId }: ContactInfoChannelsProps) => { {t('Last_contacts')} - + } /> - + )} diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx index d7b22b30077ef..1d04a09c6794e 100644 --- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx +++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx @@ -11,7 +11,7 @@ import { Virtuoso } from 'react-virtuoso'; import ContactInfoHistoryItem from './ContactInfoHistoryItem'; import { ContextualbarContent, ContextualbarEmptyContent } from '../../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../../components/CustomScrollbars'; import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule'; import { useOmnichannelSource } from '../../../hooks/useOmnichannelSource'; import AdvancedContactModal from '../../AdvancedContactModal'; @@ -113,14 +113,14 @@ const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) => - + setChatId(data._id)} {...data} />} /> - + )} diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx index 64ab4a4a9158c..b9660901b1c14 100644 --- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx +++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx @@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next'; import { Virtuoso } from 'react-virtuoso'; import { ContextualbarContent, ContextualbarEmptyContent } from '../../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../../components/CustomScrollbars'; import { useRecordList } from '../../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../../lib/asyncState'; import { isMessageNewDay } from '../../../../room/MessageList/lib/isMessageNewDay'; @@ -98,7 +98,7 @@ const ContactInfoHistoryMessages = ({ chatId, onBack, onOpenRoom }: ContactHisto {phase !== AsyncStatePhase.LOADING && totalItemCount === 0 && } {!error && totalItemCount > 0 && history.length > 0 && ( - + - + )} diff --git a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx index f1a1888dabcea..63acdb3b5a638 100644 --- a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx +++ b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx @@ -14,7 +14,7 @@ import { ContextualbarFooter, ContextualbarSkeleton, } from '../../../components/Contextualbar'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../components/CustomScrollbars'; import { getErrorMessage } from '../../../lib/errorHandling'; import { useOutlookAuthentication } from '../hooks/useOutlookAuthentication'; import { useMutationOutlookCalendarSync, useOutlookCalendarListForToday } from '../hooks/useOutlookCalendarList'; @@ -99,7 +99,7 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps): Re )} {calendarListResult.isSuccess && calendarListResult.data.length > 0 && ( - + } /> - + )} diff --git a/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx b/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx index 0a5899c111b6d..73871f04e7732 100644 --- a/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx +++ b/apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx @@ -8,7 +8,7 @@ import RoomSidepanelListWrapper from './RoomSidepanelListWrapper'; import RoomSidepanelLoading from './RoomSidepanelLoading'; import RoomSidepanelItem from './SidepanelItem'; import { useTeamsListChildrenUpdate } from './hooks/useTeamslistChildren'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../components/CustomScrollbars'; import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint'; import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManager'; diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index aacbdb5ab6aec..efe77deff9bb7 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -8,7 +8,7 @@ import DropTargetOverlay from './DropTargetOverlay'; import JumpToRecentMessageButton from './JumpToRecentMessageButton'; import { RoomRoles } from '../../../../app/models/client'; import { isTruthy } from '../../../../lib/isTruthy'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; import { useReactiveQuery } from '../../../hooks/useReactiveQuery'; import Announcement from '../Announcement'; @@ -16,6 +16,7 @@ import { BubbleDate } from '../BubbleDate'; import { MessageList } from '../MessageList'; import LoadingMessagesIndicator from './LoadingMessagesIndicator'; import RetentionPolicyWarning from './RetentionPolicyWarning'; +import UnreadMessagesIndicator from './UnreadMessagesIndicator'; import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary'; import ComposerContainer from '../composer/ComposerContainer'; import RoomComposer from '../composer/RoomComposer/RoomComposer'; @@ -26,7 +27,6 @@ import { useDateScroll } from '../hooks/useDateScroll'; import { useMessageListNavigation } from '../hooks/useMessageListNavigation'; import { useRetentionPolicy } from '../hooks/useRetentionPolicy'; import RoomForeword from './RoomForeword/RoomForeword'; -import UnreadMessagesIndicator from './UnreadMessagesIndicator'; import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress'; import { useFileUpload } from './hooks/useFileUpload'; import { useGetMore } from './hooks/useGetMore'; diff --git a/apps/meteor/client/views/room/body/RoomBodyV2.tsx b/apps/meteor/client/views/room/body/RoomBodyV2.tsx index ed7dc210c9d4e..6212f96ec6bca 100644 --- a/apps/meteor/client/views/room/body/RoomBodyV2.tsx +++ b/apps/meteor/client/views/room/body/RoomBodyV2.tsx @@ -6,7 +6,7 @@ import type { MouseEvent, ReactElement } from 'react'; import { memo, useCallback, useMemo, useRef } from 'react'; import { isTruthy } from '../../../../lib/isTruthy'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; import { BubbleDate } from '../BubbleDate'; import { MessageList } from '../MessageList'; diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx index 11c3ae2cc5d93..e26709330f395 100644 --- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx @@ -17,7 +17,7 @@ import { ContextualbarTitle, ContextualbarSection, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; import { goToRoomById } from '../../../../lib/utils/goToRoomById'; type DiscussionsListProps = { @@ -87,7 +87,7 @@ function DiscussionsList({ {!error && total > 0 && discussions.length > 0 && ( - + } /> - + )} diff --git a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx index 3c1e71a11a1b8..df0a897a38914 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx @@ -17,7 +17,7 @@ import { ContextualbarClose, ContextualbarEmptyContent, } from '../../../components/Contextualbar'; -import CustomScrollbars from '../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../components/CustomScrollbars'; import RoomMessage from '../../../components/message/variants/RoomMessage'; import SystemMessage from '../../../components/message/variants/SystemMessage'; import { useFormatDate } from '../../../hooks/useFormatDate'; diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx index 66f4c94aed7d3..c60ec4faa4767 100644 --- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx +++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx @@ -6,7 +6,7 @@ import { Virtuoso } from 'react-virtuoso'; import { MessageTypes } from '../../../../../../app/ui-utils/client'; import { ContextualbarEmptyContent } from '../../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; import RoomMessage from '../../../../../components/message/variants/RoomMessage'; import SystemMessage from '../../../../../components/message/variants/SystemMessage'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx index e6cd3df797e06..fb72544006545 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx @@ -15,7 +15,7 @@ import { ContextualbarContent, ContextualbarEmptyContent, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; type RoomFilesProps = { loading: boolean; @@ -84,7 +84,7 @@ const RoomFiles = ({ {!loading && filesItems.length === 0 && } {!loading && filesItems.length > 0 && ( - + } /> - + )} diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx index 169387b14943a..5c6be51b3b842 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx @@ -19,7 +19,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; import InfiniteListAnchor from '../../../../components/InfiniteListAnchor'; export type RoomMemberUser = Pick & { roles?: IRole['_id'][] }; @@ -174,7 +174,7 @@ const RoomMembers = ({ - + )} /> - + )} diff --git a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx index 9d806b59e339f..b6fb8bef518cd 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx @@ -17,7 +17,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../components/CustomScrollbars'; import { useRecordList } from '../../../../hooks/lists/useRecordList'; import { AsyncStatePhase } from '../../../../lib/asyncState'; import type { ThreadsListOptions } from '../../../../lib/lists/ThreadsList'; @@ -152,7 +152,7 @@ const ThreadList = () => { {!error && itemCount > 0 && items.length > 0 && ( - + { /> )} /> - + )} diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx index 67b89053c44ba..8c1be447b989f 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'; import { ThreadMessageItem } from './ThreadMessageItem'; import { MessageTypes } from '../../../../../../app/ui-utils/client'; import { isTruthy } from '../../../../../../lib/isTruthy'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; import { BubbleDate } from '../../../BubbleDate'; import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay'; import MessageListProvider from '../../../MessageList/providers/MessageListProvider'; diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx index e8c797c874298..d75af6c28082d 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx +++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx @@ -14,7 +14,7 @@ import { ContextualbarContent, ContextualbarEmptyContent, } from '../../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../../components/CustomScrollbars'; +import { VirtualizedScrollbars } from '../../../../../components/CustomScrollbars'; import { getErrorMessage } from '../../../../../lib/errorHandling'; type VideoConfListProps = { @@ -68,7 +68,7 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa )} {videoConfs.length > 0 && ( - + } /> - + )} diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx index 7beb685ff46b1..6e4868494d0c6 100644 --- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx +++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx @@ -18,7 +18,7 @@ import { ContextualbarEmptyContent, ContextualbarSection, } from '../../../../components/Contextualbar'; -import CustomScrollbars from '../../../../components/CustomScrollbars'; +import { CustomScrollbars } from '../../../../components/CustomScrollbars'; import InfiniteListAnchor from '../../../../components/InfiniteListAnchor'; type TeamsChannelsProps = { From 4412649a9b513f59ebe706a6b09b9815a2176d6a Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 10:18:33 -0300 Subject: [PATCH 05/10] fix: replace onScroll handler --- .../components/CustomScrollbars/CustomScrollbars.tsx | 10 +++++++--- .../CustomScrollbars/VirtualizedScrollbars.tsx | 6 +----- .../meteor/client/components/CustomScrollbars/index.ts | 3 +++ .../client/components/Page/PageScrollableContent.tsx | 9 +++++---- .../Page/PageScrollableContentWithShadow.tsx | 7 ++++--- .../hooks/useLegacyThreadMessageListScrolling.ts | 7 +++++-- 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx index 01e91c1bcceee..231983cb95d2a 100644 --- a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx +++ b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx @@ -2,18 +2,23 @@ import { useOverlayScrollbars } from 'overlayscrollbars-react'; import type { HTMLAttributes, ReactElement } from 'react'; import { useEffect, useRef, forwardRef, memo } from 'react'; +import type { OverlayScrollbars } from '.'; import BaseScrollbars, { getScrollbarsOptions } from './BaseScrollbars'; type CustomScrollbarsProps = { children: ReactElement; overflowX?: boolean; -} & Omit, 'is'>; + onScroll?: (args: OverlayScrollbars) => void; +} & Omit, 'is' | 'onScroll'>; -const CustomScrollbars = forwardRef(function CustomScrollbars({ overflowX, ...props }, ref) { +const CustomScrollbars = forwardRef(function CustomScrollbars({ overflowX, onScroll, ...props }, ref) { const rootRef = useRef(null); const scrollbarsOptions = getScrollbarsOptions(overflowX); const [initialize, osInstance] = useOverlayScrollbars({ options: scrollbarsOptions, + events: { + scroll: (args) => onScroll?.(args), + }, }); useEffect(() => { @@ -29,7 +34,6 @@ const CustomScrollbars = forwardRef(function if (typeof ref === 'function') { ref(instance.elements().viewport || null); - console.log(instance.elements()); return; } diff --git a/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx index 854eb8aa7c7c2..26298ed208571 100644 --- a/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx +++ b/apps/meteor/client/components/CustomScrollbars/VirtualizedScrollbars.tsx @@ -33,14 +33,10 @@ const VirtualizedScrollbars = forwardRef osInstance()?.destroy(); }, [initialize, osInstance, ref, scroller]); - return {cloneElement(props.children, { scrollerRef: setScroller })}; + return {cloneElement(props.children, { scrollerRef: setScroller })}; }); export default memo(VirtualizedScrollbars); diff --git a/apps/meteor/client/components/CustomScrollbars/index.ts b/apps/meteor/client/components/CustomScrollbars/index.ts index b153a4a390332..9c0814c8ff81e 100644 --- a/apps/meteor/client/components/CustomScrollbars/index.ts +++ b/apps/meteor/client/components/CustomScrollbars/index.ts @@ -1,2 +1,5 @@ +import { OverlayScrollbars } from 'overlayscrollbars'; + +export { OverlayScrollbars }; export { default as CustomScrollbars } from './CustomScrollbars'; export { default as VirtualizedScrollbars } from './VirtualizedScrollbars'; diff --git a/apps/meteor/client/components/Page/PageScrollableContent.tsx b/apps/meteor/client/components/Page/PageScrollableContent.tsx index d64788d334d51..7440c4027f974 100644 --- a/apps/meteor/client/components/Page/PageScrollableContent.tsx +++ b/apps/meteor/client/components/Page/PageScrollableContent.tsx @@ -2,14 +2,15 @@ import { Box } from '@rocket.chat/fuselage'; import type { ComponentProps } from 'react'; import { forwardRef } from 'react'; +import type { OverlayScrollbars } from '../CustomScrollbars'; import { CustomScrollbars } from '../CustomScrollbars'; type PageScrollableContentProps = { - onScrollContent?: ComponentProps['onScroll']; -} & ComponentProps; + onScroll?: (args: OverlayScrollbars) => void; +} & Omit, 'onScroll'>; const PageScrollableContent = forwardRef(function PageScrollableContent( - { onScrollContent, borderBlockEndColor, ...props }, + { onScroll, borderBlockEndColor, ...props }, ref, ) { return ( @@ -22,7 +23,7 @@ const PageScrollableContent = forwardRef - + diff --git a/apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx b/apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx index e27bc5612684e..2cb3d8931629d 100644 --- a/apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx +++ b/apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx @@ -6,13 +6,14 @@ import PageScrollableContent from './PageScrollableContent'; type PageScrollableContentWithShadowProps = ComponentPropsWithoutRef; -const PageScrollableContentWithShadow = ({ onScrollContent, ...props }: PageScrollableContentWithShadowProps) => { +const PageScrollableContentWithShadow = ({ onScroll, ...props }: PageScrollableContentWithShadowProps) => { const [, setBorder] = useContext(PageContext); return ( { + onScroll={(args) => { + const top = args.elements().viewport.scrollTop; setBorder(!!top); - onScrollContent?.({ top, ...args }); + onScroll?.(args); }} {...props} /> diff --git a/apps/meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts b/apps/meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts index 99e3a3ce2b8dc..e7b6dabfe7d69 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts +++ b/apps/meteor/client/views/room/contextualBar/Threads/hooks/useLegacyThreadMessageListScrolling.ts @@ -1,10 +1,10 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { isEditedMessage } from '@rocket.chat/core-typings'; import { useUser } from '@rocket.chat/ui-contexts'; -import type { ScrollValues } from 'rc-scrollbars'; import { useCallback, useEffect, useRef } from 'react'; import { callbacks } from '../../../../../../lib/callbacks'; +import type { OverlayScrollbars } from '../../../../../components/CustomScrollbars'; import { useRoom } from '../../../contexts/RoomContext'; export const useLegacyThreadMessageListScrolling = (mainMessage: IMessage) => { @@ -13,7 +13,10 @@ export const useLegacyThreadMessageListScrolling = (mainMessage: IMessage) => { const atBottomRef = useRef(true); - const onScroll = useCallback(({ scrollHeight, scrollTop, clientHeight }: ScrollValues) => { + const onScroll = useCallback(({ elements }: OverlayScrollbars) => { + const { + viewport: { scrollTop, scrollHeight, clientHeight }, + } = elements(); atBottomRef.current = scrollTop >= scrollHeight - clientHeight; }, []); From c781d1daf9625554cb434585b8971ea6a71d620a Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 10:18:58 -0300 Subject: [PATCH 06/10] fix: replace scroll wrapper attribute --- apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts b/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts index bbe8abb515f5d..67777b346718b 100644 --- a/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts +++ b/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts @@ -166,7 +166,7 @@ class RoomHistoryManagerClass extends Emitter { room.oldestTs = messages[messages.length - 1].ts; } - const wrapper = await waitForElement('.messages-box .wrapper .rc-scrollbars-view'); + const wrapper = await waitForElement('.messages-box .wrapper [data-overlayscrollbars-viewport]'); if (wrapper) { previousHeight = wrapper.scrollHeight; From e3537ff5ffb02979e7ae6eeb96ff39b25fb03c9b Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 10:20:18 -0300 Subject: [PATCH 07/10] chore: remove rc-scrollbars from meteor app --- apps/meteor/app/theme/client/imports/general/base.css | 9 --------- apps/meteor/package.json | 1 - yarn.lock | 1 - 3 files changed, 11 deletions(-) diff --git a/apps/meteor/app/theme/client/imports/general/base.css b/apps/meteor/app/theme/client/imports/general/base.css index 0f1f90c913558..f39cc67227f25 100644 --- a/apps/meteor/app/theme/client/imports/general/base.css +++ b/apps/meteor/app/theme/client/imports/general/base.css @@ -111,15 +111,6 @@ button { height: auto !important /* 1 */; } } - - .rc-scrollbars-container { - overflow: visible !important; /* 1 */ - height: auto !important; /* 1 */ - } - - .rc-scrollbars-view { - position: relative !important; /* 1 */ - } } .gallery-item { diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 62b2e184515c0..5e3ee97490cb1 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -405,7 +405,6 @@ "psl": "^1.10.0", "query-string": "^7.1.3", "queue-fifo": "^0.2.6", - "rc-scrollbars": "^1.1.6", "re-resizable": "^6.10.1", "react": "~18.3.1", "react-aria": "~3.37.0", diff --git a/yarn.lock b/yarn.lock index 69032fcd614d2..27196abe16dfb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8789,7 +8789,6 @@ __metadata: query-string: "npm:^7.1.3" queue-fifo: "npm:^0.2.6" raw-loader: "npm:~4.0.2" - rc-scrollbars: "npm:^1.1.6" re-resizable: "npm:^6.10.1" react: "npm:~18.3.1" react-aria: "npm:~3.37.0" From c148a28ea3959d5fa33d2c957590676f241d9a4f Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 10:27:24 -0300 Subject: [PATCH 08/10] chore: bump overlayscrollbars pkg --- apps/meteor/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 5e3ee97490cb1..581eac53acedd 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -392,7 +392,7 @@ "node-rsa": "^1.1.1", "nodemailer": "^6.9.16", "object-path": "^0.11.8", - "overlayscrollbars": "^2.10.0", + "overlayscrollbars": "^2.11.1", "overlayscrollbars-react": "^0.5.6", "path": "^0.12.7", "path-to-regexp": "^6.3.0", diff --git a/yarn.lock b/yarn.lock index 27196abe16dfb..9bb05c41a13bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8763,7 +8763,7 @@ __metadata: nyc: "npm:^17.1.0" object-path: "npm:^0.11.8" outdent: "npm:~0.8.0" - overlayscrollbars: "npm:^2.10.0" + overlayscrollbars: "npm:^2.11.1" overlayscrollbars-react: "npm:^0.5.6" path: "npm:^0.12.7" path-to-regexp: "npm:^6.3.0" @@ -28578,10 +28578,10 @@ __metadata: languageName: node linkType: hard -"overlayscrollbars@npm:^2.10.0": - version: 2.10.0 - resolution: "overlayscrollbars@npm:2.10.0" - checksum: 10/d9bc907d722f730f17b2ff6fd678ae6679edd677c431c876bde918838f4a3e08d75bdeec62a9b018d29c0e14c8287277612a2a5cab73afcced4769f1bcb74cfd +"overlayscrollbars@npm:^2.11.1": + version: 2.11.1 + resolution: "overlayscrollbars@npm:2.11.1" + checksum: 10/c9eac9be2a76d0906683165b9fae6cf0a44cc1cdfdedc131ed09f76c5d50535d8515a33d3e3507f07fbfcfbfa82605cd32b12d14548c033555b7fa5f6e831974 languageName: node linkType: hard From 1e2775bb2d7abc582e94e316cc5b929881919149 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 11:03:33 -0300 Subject: [PATCH 09/10] chore: changeset --- .changeset/weak-turtles-exercise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-turtles-exercise.md diff --git a/.changeset/weak-turtles-exercise.md b/.changeset/weak-turtles-exercise.md new file mode 100644 index 0000000000000..13fde2d31cc8d --- /dev/null +++ b/.changeset/weak-turtles-exercise.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': minor +--- + +Replaces rc-scrollbars in favor of overlayscrollbars fixing some visual and a11y issues when using RTL languages From ac3d193161494894df60b04ed6a756a108300d24 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 28 Feb 2025 12:57:52 -0300 Subject: [PATCH 10/10] fix: `ContactInfoHistory` scrollbars parent --- .../contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx index 1d04a09c6794e..a2b47f938387f 100644 --- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx +++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx @@ -112,7 +112,7 @@ const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) => {t('Showing_current_of_total', { current: data?.history.length, total: data?.total })} - +