admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Unselect record table records on table body click (#8306)

Browse Source 
We have previously fixed the unselection of table records on click
outside. However, the ref was mispositioned as it selected the full
height table. In the case of low record numbers, we also want the
unselection to happen on table body click
This commit is contained in:
Charles Bochet
2024-11-04 17:44:50 +01:00
committed by GitHub
parent 695991881f
commit 52e5f7daeb
9 changed files with 98 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
View File

@ -1,9 +1,9 @@
import { RefObject } from 'react';
import {
boxesIntersect,
useSelectionContainer,
} from '@air/react-drag-to-select';
import { useTheme } from '@emotion/react';
import { RefObject } from 'react';
import { RGBA } from 'twenty-ui';
import { useDragSelect } from '../hooks/useDragSelect';
@ -11,13 +11,15 @@ import { useDragSelect } from '../hooks/useDragSelect';
type DragSelectProps = {
dragSelectable: RefObject<HTMLElement>;
onDragSelectionChange: (id: string, selected: boolean) => void;
onDragSelectionStart?: () => void;
onDragSelectionStart?: (event: MouseEvent) => void;
onDragSelectionEnd?: (event: MouseEvent) => void;
};
export const DragSelect = ({
dragSelectable,
onDragSelectionChange,
onDragSelectionStart,
onDragSelectionEnd,
}: DragSelectProps) => {
const theme = useTheme();
const { isDragSelectionStartEnabled } = useDragSelect();
@ -37,6 +39,7 @@ export const DragSelect = ({
return true;
},
onSelectionStart: onDragSelectionStart,
onSelectionEnd: onDragSelectionEnd,
onSelectionChange: (box) => {
const scrollAwareBox = {
...box,

7
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
View File

@ -1,7 +1,7 @@
import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState';
import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { lockedListenerIdState } from '@/ui/utilities/pointer-event/states/lockedListenerIdState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@ -22,6 +22,9 @@ export const useClickOustideListenerStates = (componentId: string) => {
clickOutsideListenerIsActivatedComponentState,
scopeId,
),
lockedListenerIdState,
getClickOutsideListenerMouseDownHappenedState: extractComponentState(
clickOutsideListenerMouseDownHappenedComponentState,
scopeId,
),
};
};

15
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts
View File

@ -7,17 +7,14 @@ import {
useListenClickOutsideV2,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { toSpliced } from '~/utils/array/toSpliced';
import { isDefined } from '~/utils/isDefined';
export const useClickOutsideListener = (componentId: string) => {
// TODO: improve typing
const scopeId = getScopeIdFromComponentId(componentId) ?? '';
const {
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerCallbacksState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(componentId);
const useListenClickOutside = <T extends Element>({
@ -53,8 +50,15 @@ export const useClickOutsideListener = (componentId: string) => {
({ set }) =>
(activated: boolean) => {
set(getClickOutsideListenerIsActivatedState, activated);
if (!activated) {
set(getClickOutsideListenerMouseDownHappenedState, false);
}
},
[getClickOutsideListenerIsActivatedState],
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
],
);
const registerOnClickOutsideCallback = useRecoilCallback(
@ -148,7 +152,6 @@ export const useClickOutsideListener = (componentId: string) => {
};
return {
scopeId,
useListenClickOutside,
toggleClickOutsideListener,
useRegisterClickOutsideListenerCallback,

30
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts
View File

@ -28,6 +28,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
const {
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
} = useClickOustideListenerStates(listenerId);
const handleMouseDown = useRecoilCallback(
@ -37,6 +38,8 @@ export const useListenClickOutsideV2 = <T extends Element>({
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
set(getClickOutsideListenerMouseDownHappenedState, true);
const isListening = clickOutsideListenerIsActivated && enabled;
if (!isListening) {
@ -92,21 +95,32 @@ export const useListenClickOutsideV2 = <T extends Element>({
}
},
[
getClickOutsideListenerIsActivatedState,
enabled,
mode,
refs,
getClickOutsideListenerIsMouseDownInsideState,
enabled,
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
],
);
const handleClickOutside = useRecoilCallback(
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
.getValue();
const hasMouseDownHappened = snapshot
.getLoadable(getClickOutsideListenerMouseDownHappenedState)
.getValue();
if (mode === ClickOutsideMode.compareHTMLRef) {
const clickedElement = event.target as HTMLElement;
let isClickedOnExcluded = false;
@ -132,6 +146,8 @@ export const useListenClickOutsideV2 = <T extends Element>({
.some((ref) => ref.current?.contains(event.target as Node));
if (
isListening &&
hasMouseDownHappened &&
!clickedOnAtLeastOneRef &&
!isMouseDownInside &&
!isClickedOnExcluded
@ -171,13 +187,21 @@ export const useListenClickOutsideV2 = <T extends Element>({
return true;
});
if (!clickedOnAtLeastOneRef && !isMouseDownInside) {
if (
!clickedOnAtLeastOneRef &&
!isMouseDownInside &&
isListening &&
hasMouseDownHappened
) {
callback(event);
}
}
},
[
getClickOutsideListenerIsActivatedState,
enabled,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,
mode,
refs,
excludeClassNames,

7
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const clickOutsideListenerMouseDownHappenedComponentState =
createComponentState<boolean>({
key: 'clickOutsideListenerMouseDownHappenedComponentState',
defaultValue: false,
});

6
packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts
View File

@ -1,6 +0,0 @@
import { createState } from 'twenty-ui';
export const lockedListenerIdState = createState<string | null>({
key: 'lockedListenerIdState',
defaultValue: null,
});