c982bcdb52
# Introduce focus stack to handle hotkeys This PR introduces a focus stack to track the order in which the elements are focused: - Each focused element has a unique focus id - When an element is focused, it is pushed on top of the stack - When an element loses focus, we remove it from the stack This focus stack is then used to determine which hotkeys are available. The previous implementation lead to many regressions because of race conditions, of wrong order of open and close operations and by overwriting previous states. This implementation should be way more robust than the previous one. The new api can be incrementally implemented since it preserves backwards compatibility by writing to the old hotkey scopes states. For now, it has been implemented on the modal components. To test this PR, verify that the shortcuts still work correctly, especially for the modal components.
106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import { ModalHotkeyScope } from '@/ui/layout/modal/components/types/ModalHotkeyScope';
|
|
import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
|
|
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
|
|
import { useRemoveFocusIdFromFocusStack } from '@/ui/utilities/focus/hooks/useRemoveFocusIdFromFocusStack';
|
|
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
|
|
import { useRecoilCallback } from 'recoil';
|
|
|
|
export const useModal = () => {
|
|
const pushFocusItem = usePushFocusItemToFocusStack();
|
|
const removeFocusId = useRemoveFocusIdFromFocusStack();
|
|
|
|
const closeModal = useRecoilCallback(
|
|
({ set, snapshot }) =>
|
|
(modalId: string) => {
|
|
const isModalOpen = snapshot
|
|
.getLoadable(
|
|
isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
|
|
)
|
|
.getValue();
|
|
|
|
if (!isModalOpen) {
|
|
return;
|
|
}
|
|
|
|
removeFocusId({
|
|
focusId: modalId,
|
|
memoizeKey: modalId,
|
|
});
|
|
|
|
set(
|
|
isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
|
|
false,
|
|
);
|
|
},
|
|
[removeFocusId],
|
|
);
|
|
|
|
const openModal = useRecoilCallback(
|
|
({ set, snapshot }) =>
|
|
(modalId: string) => {
|
|
const isModalOpened = snapshot
|
|
.getLoadable(
|
|
isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
|
|
)
|
|
.getValue();
|
|
|
|
if (isModalOpened) {
|
|
return;
|
|
}
|
|
|
|
set(
|
|
isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
|
|
true,
|
|
);
|
|
|
|
pushFocusItem({
|
|
focusId: modalId,
|
|
component: {
|
|
type: FocusComponentType.MODAL,
|
|
instanceId: modalId,
|
|
},
|
|
globalHotkeysConfig: {
|
|
enableGlobalHotkeysWithModifiers: false,
|
|
enableGlobalHotkeysConflictingWithKeyboard: false,
|
|
},
|
|
// TODO: Remove this once we've migrated hotkey scopes to the new api
|
|
hotkeyScope: {
|
|
scope: ModalHotkeyScope.ModalFocus,
|
|
customScopes: {
|
|
goto: false,
|
|
commandMenu: false,
|
|
commandMenuOpen: false,
|
|
keyboardShortcutMenu: false,
|
|
},
|
|
},
|
|
memoizeKey: modalId,
|
|
});
|
|
},
|
|
[pushFocusItem],
|
|
);
|
|
|
|
const toggleModal = useRecoilCallback(
|
|
({ snapshot }) =>
|
|
(modalId: string) => {
|
|
const isModalOpen = snapshot
|
|
.getLoadable(
|
|
isModalOpenedComponentState.atomFamily({ instanceId: modalId }),
|
|
)
|
|
.getValue();
|
|
|
|
if (isModalOpen) {
|
|
closeModal(modalId);
|
|
} else {
|
|
openModal(modalId);
|
|
}
|
|
},
|
|
[closeModal, openModal],
|
|
);
|
|
|
|
return {
|
|
closeModal,
|
|
openModal,
|
|
toggleModal,
|
|
};
|
|
};
|