Files
twenty_crm/front/src/modules/ui/dropdown/hooks/useDropdown.ts
bosiraphael 922f8eca0e 1880 Refactored Dropdown components (#1884)
* updated DropdownButton props

* refactoring in progress

* working but layout is wrong

* fixed bug

* wip on ColumnHeadWithDropdown

* fix bug

* fix bug

* remove unused styled component

* fix z-index bug

* add an optional argument to DropdownMenu to control the offset of the menu

* add an optional argument to DropdownMenu to control the offset of the menu

* modify files after PR comments

* clean the way the offset is handled

* fix lint
2023-10-05 18:11:54 +02:00

58 lines
1.8 KiB
TypeScript

import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownButtonHotkeyScopeScopedFamilyState';
import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
export const useDropdown = ({ dropdownId }: { dropdownId: string }) => {
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const [isDropdownButtonOpen, setIsDropdownButtonOpen] =
useRecoilScopedFamilyState(
isDropdownButtonOpenScopedFamilyState,
dropdownId,
DropdownRecoilScopeContext,
);
const [dropdownButtonHotkeyScope] = useRecoilScopedFamilyState(
dropdownButtonHotkeyScopeScopedFamilyState,
dropdownId,
DropdownRecoilScopeContext,
);
const closeDropdownButton = () => {
goBackToPreviousHotkeyScope();
setIsDropdownButtonOpen(false);
};
const openDropdownButton = () => {
setIsDropdownButtonOpen(true);
if (dropdownButtonHotkeyScope) {
setHotkeyScopeAndMemorizePreviousScope(
dropdownButtonHotkeyScope.scope,
dropdownButtonHotkeyScope.customScopes,
);
}
};
const toggleDropdownButton = () => {
if (isDropdownButtonOpen) {
closeDropdownButton();
} else {
openDropdownButton();
}
};
return {
isDropdownOpen: isDropdownButtonOpen,
closeDropdown: closeDropdownButton,
toggleDropdown: toggleDropdownButton,
openDropdown: openDropdownButton,
};
};