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

Lucas/t 352 i dont want another input cell to open when i click outside (#163)

Browse Source 
* Added logic to handle global edit mode

* Added recoil global edit mode state into generic editable components

* Fix lint

* Added tests
This commit is contained in:
Lucas Bordeau
2023-05-31 16:33:11 +02:00
committed by GitHub
parent c61beb1066
commit 723ea462e8
10 changed files with 294 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/modules/ui/common/hooks/useListenClickOutsideArrayOfRef.ts
View File

@ -3,10 +3,10 @@ import { isDefined } from '../../../utils/type-guards/isDefined';
export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
arrayOfRef: Array<React.RefObject<T>>,
outsideClickCallback: (event?: MouseEvent) => void,
outsideClickCallback: (event?: MouseEvent | TouchEvent) => void,
) {
useEffect(() => {
function handleClickOutside(event: any) {
function handleClickOutside(event: MouseEvent | TouchEvent) {
const clickedOnAtLeastOneRef = arrayOfRef
.filter((ref) => !!ref.current)
.some((ref) => ref.current?.contains(event.target as Node));
@ -21,13 +21,13 @@ export function useListenClickOutsideArrayOfRef<T extends HTMLElement>(
);
if (hasAtLeastOneRefDefined) {
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('touchstart', handleClickOutside);
document.addEventListener('mouseup', handleClickOutside);
document.addEventListener('touchend', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('touchstart', handleClickOutside);
document.removeEventListener('mouseup', handleClickOutside);
document.removeEventListener('touchend', handleClickOutside);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrayOfRef, outsideClickCallback]);

6
front/src/modules/ui/tables/states/isSomeInputInEditModeState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const isSomeInputInEditModeState = atom<boolean>({
key: 'ui/table/is-in-edit-mode',
default: false,
});