1ab51d41aa
# Replace hotkey scopes by focus stack (Part 2 - Record Table, Rows and Cells) This PR is the second part of a refactoring aiming to deprecate the hotkey scopes api in favor of the new focus stack api which is more robust. Part 1: https://github.com/twentyhq/twenty/pull/12673 The record table shortcuts are no longer centralized in the record table, they now split and the focused element is in charge of applying the desired shortcuts. (For instance: The rows are in charge of the row navigation and the cells of the cells navigation). ## Video QA: https://github.com/user-attachments/assets/f0bb9eed-8a2a-4b6d-a82f-1998e929f122 ## Bugfixes: ### Fix record table click outside not working after opening and closing a cell Introduced by https://github.com/twentyhq/twenty/pull/11644 #### Before https://github.com/user-attachments/assets/d28deda8-15e9-4ffe-b60a-e8b54625f8e5 #### After https://github.com/user-attachments/assets/3f7e1ffc-15d9-4336-aeb0-bebd8ae0cbe0 ### Fix ObjectFilterDropdownFilterInput hotkeys Introduced by https://github.com/twentyhq/twenty/pull/12673 #### Before https://github.com/user-attachments/assets/ab2039bd-ebe1-49ba-8377-a6b300664469 #### After https://github.com/user-attachments/assets/90597453-dab2-426b-a134-0a24b0de0a6b
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { useCloseDropdownFromOutside } from '@/ui/layout/dropdown/hooks/useCloseDropdownFromOutside';
|
|
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
|
|
import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
|
|
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
|
|
import { useRecoilCallback } from 'recoil';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
|
|
export const useCloseAnyOpenDropdown = () => {
|
|
const { closeDropdownFromOutside } = useCloseDropdownFromOutside();
|
|
|
|
const { removeFocusItemFromFocusStackById } =
|
|
useRemoveFocusItemFromFocusStackById();
|
|
|
|
const closeAnyOpenDropdown = useRecoilCallback(
|
|
({ snapshot, set }) =>
|
|
() => {
|
|
const previousDropdownFocusId = snapshot
|
|
.getLoadable(previousDropdownFocusIdState)
|
|
.getValue();
|
|
|
|
const activeDropdownFocusId = snapshot
|
|
.getLoadable(activeDropdownFocusIdState)
|
|
.getValue();
|
|
|
|
const thereIsNoDropdownOpen =
|
|
!isDefined(activeDropdownFocusId) &&
|
|
!isDefined(previousDropdownFocusId);
|
|
|
|
if (thereIsNoDropdownOpen) {
|
|
return;
|
|
}
|
|
|
|
const thereIsOneNestedDropdownOpen = isDefined(previousDropdownFocusId);
|
|
|
|
if (isDefined(activeDropdownFocusId)) {
|
|
closeDropdownFromOutside(activeDropdownFocusId);
|
|
removeFocusItemFromFocusStackById({
|
|
focusId: activeDropdownFocusId,
|
|
});
|
|
}
|
|
|
|
if (thereIsOneNestedDropdownOpen) {
|
|
closeDropdownFromOutside(previousDropdownFocusId);
|
|
removeFocusItemFromFocusStackById({
|
|
focusId: previousDropdownFocusId,
|
|
});
|
|
}
|
|
|
|
set(previousDropdownFocusIdState, null);
|
|
set(activeDropdownFocusIdState, null);
|
|
},
|
|
[closeDropdownFromOutside, removeFocusItemFromFocusStackById],
|
|
);
|
|
|
|
return { closeAnyOpenDropdown };
|
|
};
|