From 0aa66ca7ba3ab2341336b84f27f1ec365a4485f1 Mon Sep 17 00:00:00 2001 From: Chandragupt Date: Tue, 21 Jan 2025 00:50:16 +0530 Subject: [PATCH 1/3] fixed scrolling inside the table with scrollbar --- .../record-table/components/RecordTable.tsx | 19 +++++++++++++++---- .../scroll/components/ScrollWrapper.tsx | 19 ++++++++++++++++++- .../scroll/contexts/ScrollWrapperContexts.tsx | 2 ++ 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index a0787d1cec6c..e3109c73c484 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -20,7 +20,8 @@ import { hasPendingRecordComponentSelector } from '@/object-record/record-table/ import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useRef } from 'react'; +import { useContext, useRef } from 'react'; +import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; const StyledTable = styled.table` border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -71,6 +72,10 @@ export const RecordTable = () => { recordTableId, }); + const { isScrollHandlerDragging } = useContext( + RecordTableWithWrappersScrollWrapperContext, + ); + if (!isNonEmptyString(objectNameSingular)) { return <>; } @@ -100,10 +105,16 @@ export const RecordTable = () => { { - resetTableRowSelection(); - toggleClickOutsideListener(false); + if (!isScrollHandlerDragging) { + resetTableRowSelection(); + toggleClickOutsideListener(false); + } + }} + onDragSelectionChange={(recordId, isSelected) => { + if (!isScrollHandlerDragging) { + setRowSelected(recordId, isSelected); + } }} - onDragSelectionChange={setRowSelected} onDragSelectionEnd={() => { toggleClickOutsideListener(true); }} diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index 9709422b0301..e7d93cee4d22 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { OverlayScrollbars } from 'overlayscrollbars'; import { useOverlayScrollbars } from 'overlayscrollbars-react'; -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { ContextProviderName, @@ -96,6 +96,7 @@ export const ScrollWrapper = ({ }: ScrollWrapperProps) => { const scrollableRef = useRef(null); const Context = getContextByProviderName(contextProviderName); + const [isScrollHandlerDragging, setIsScrollHandlerDragging] = useState(false); const setScrollTop = useSetRecoilComponentStateV2( scrollWrapperScrollTopComponentState, @@ -126,6 +127,19 @@ export const ScrollWrapper = ({ componentInstanceId, ); + const handleMouseDown = (e: React.MouseEvent) => { + const target = e.target as HTMLElement; + const isTargetScrollbarHandle: boolean = + target.classList.contains(`os-scrollbar-handle`); + if (isTargetScrollbarHandle) { + setIsScrollHandlerDragging(true); + } + }; + + const handleMouseUp = (_: React.MouseEvent) => { + setIsScrollHandlerDragging(false); + }; + const [initialize, instance] = useOverlayScrollbars({ options: { scrollbars: { @@ -196,6 +210,7 @@ export const ScrollWrapper = ({ value={{ ref: scrollableRef, id: contextProviderName, + isScrollHandlerDragging, }} > {children} diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx index 4d5a34a45705..042ddb9ffe6e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx @@ -3,6 +3,7 @@ import { createContext, RefObject } from 'react'; type ScrollWrapperContextValue = { ref: RefObject; id: string; + isScrollHandlerDragging: boolean; }; export type ContextProviderName = @@ -26,6 +27,7 @@ const createScrollWrapperContext = (id: string) => createContext({ ref: { current: null }, id, + isScrollHandlerDragging: false, }); export const EventListScrollWrapperContext = From 6a67bb127213cacb0a940610e4a4f4684028ac9c Mon Sep 17 00:00:00 2001 From: Chandragupt Date: Tue, 21 Jan 2025 22:53:24 +0530 Subject: [PATCH 2/3] fixed scrolling inside the table with scrollbar (data-select-disable) --- .../record-table/components/RecordTable.tsx | 19 +++----------- .../scroll/components/ScrollWrapper.tsx | 26 ++++++------------- .../scroll/contexts/ScrollWrapperContexts.tsx | 2 -- 3 files changed, 12 insertions(+), 35 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index e3109c73c484..a0787d1cec6c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -20,8 +20,7 @@ import { hasPendingRecordComponentSelector } from '@/object-record/record-table/ import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useContext, useRef } from 'react'; -import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; +import { useRef } from 'react'; const StyledTable = styled.table` border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -72,10 +71,6 @@ export const RecordTable = () => { recordTableId, }); - const { isScrollHandlerDragging } = useContext( - RecordTableWithWrappersScrollWrapperContext, - ); - if (!isNonEmptyString(objectNameSingular)) { return <>; } @@ -105,16 +100,10 @@ export const RecordTable = () => { { - if (!isScrollHandlerDragging) { - resetTableRowSelection(); - toggleClickOutsideListener(false); - } - }} - onDragSelectionChange={(recordId, isSelected) => { - if (!isScrollHandlerDragging) { - setRowSelected(recordId, isSelected); - } + resetTableRowSelection(); + toggleClickOutsideListener(false); }} + onDragSelectionChange={setRowSelected} onDragSelectionEnd={() => { toggleClickOutsideListener(true); }} diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index e7d93cee4d22..f404fa3b4c80 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { OverlayScrollbars } from 'overlayscrollbars'; import { useOverlayScrollbars } from 'overlayscrollbars-react'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef } from 'react'; import { ContextProviderName, @@ -96,7 +96,6 @@ export const ScrollWrapper = ({ }: ScrollWrapperProps) => { const scrollableRef = useRef(null); const Context = getContextByProviderName(contextProviderName); - const [isScrollHandlerDragging, setIsScrollHandlerDragging] = useState(false); const setScrollTop = useSetRecoilComponentStateV2( scrollWrapperScrollTopComponentState, @@ -127,19 +126,6 @@ export const ScrollWrapper = ({ componentInstanceId, ); - const handleMouseDown = (e: React.MouseEvent) => { - const target = e.target as HTMLElement; - const isTargetScrollbarHandle: boolean = - target.classList.contains(`os-scrollbar-handle`); - if (isTargetScrollbarHandle) { - setIsScrollHandlerDragging(true); - } - }; - - const handleMouseUp = (_: React.MouseEvent) => { - setIsScrollHandlerDragging(false); - }; - const [initialize, instance] = useOverlayScrollbars({ options: { scrollbars: { @@ -189,6 +175,13 @@ export const ScrollWrapper = ({ const currentRef = scrollableRef.current; if (currentRef !== null) { initialize(currentRef); + // Add data-select-disable to scrollbars + const scrollbars = currentRef.querySelectorAll('.os-scrollbar'); + scrollbars.forEach((scrollbar) => { + if (scrollbar instanceof HTMLElement) { + scrollbar.dataset.selectDisable = 'true'; + } + }); } return () => { // Reset vertical scroll component-specific Recoil state @@ -210,7 +203,6 @@ export const ScrollWrapper = ({ value={{ ref: scrollableRef, id: contextProviderName, - isScrollHandlerDragging, }} > {children} diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx index 042ddb9ffe6e..4d5a34a45705 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx @@ -3,7 +3,6 @@ import { createContext, RefObject } from 'react'; type ScrollWrapperContextValue = { ref: RefObject; id: string; - isScrollHandlerDragging: boolean; }; export type ContextProviderName = @@ -27,7 +26,6 @@ const createScrollWrapperContext = (id: string) => createContext({ ref: { current: null }, id, - isScrollHandlerDragging: false, }); export const EventListScrollWrapperContext = From 3eb10eae05233f9789c20b694ed4c6f1b2f4d76c Mon Sep 17 00:00:00 2001 From: ehconitin Date: Thu, 23 Jan 2025 20:22:45 +0530 Subject: [PATCH 3/3] fix --- .../scroll/components/ScrollWrapper.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index f404fa3b4c80..0e7af457fe1a 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -139,7 +139,18 @@ export const ScrollWrapper = ({ }, events: { updated: (osInstance) => { - const { scrollOffsetElement: target } = osInstance.elements(); + const { + scrollOffsetElement: target, + scrollbarVertical, + scrollbarHorizontal, + } = osInstance.elements(); + + if (scrollbarVertical !== null) { + scrollbarVertical.track.dataset.selectDisable = 'true'; + } + if (scrollbarHorizontal !== null) { + scrollbarHorizontal.track.dataset.selectDisable = 'true'; + } setScrollBottom( target.scrollHeight - target.clientHeight - target.scrollTop, ); @@ -175,13 +186,6 @@ export const ScrollWrapper = ({ const currentRef = scrollableRef.current; if (currentRef !== null) { initialize(currentRef); - // Add data-select-disable to scrollbars - const scrollbars = currentRef.querySelectorAll('.os-scrollbar'); - scrollbars.forEach((scrollbar) => { - if (scrollbar instanceof HTMLElement) { - scrollbar.dataset.selectDisable = 'true'; - } - }); } return () => { // Reset vertical scroll component-specific Recoil state