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

1880 Refactored Dropdown components (#1884)

Browse Source 
* 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
This commit is contained in:
bosiraphael
2023-10-05 18:11:54 +02:00
committed by GitHub
parent b8282e6789
commit 922f8eca0e
23 changed files with 213 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/modules/ui/board/components/BoardOptionsDropdown.tsx
View File

@ -1,6 +1,6 @@
import { useResetRecoilState } from 'recoil';
import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
@ -23,8 +23,8 @@ export const BoardOptionsDropdown = ({
const resetViewEditMode = useResetRecoilState(viewEditModeState);
return (
<DropdownButton
buttonComponents={<BoardOptionsDropdownButton />}
<ViewBarDropdownButton
buttonComponent={<BoardOptionsDropdownButton />}
dropdownComponents={
<BoardOptionsDropdownContent
customHotkeyScope={customHotkeyScope}

8
front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx
View File

@ -1,20 +1,20 @@
import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
export const BoardOptionsDropdownButton = () => {
const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownId: BoardOptionsDropdownKey,
});
const handleClick = () => {
toggleDropdownButton();
toggleDropdown();
};
return (
<StyledHeaderDropdownButton
isUnfolded={isDropdownButtonOpen}
isUnfolded={isDropdownOpen}
onClick={handleClick}
>
Options

8
front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx
View File

@ -16,7 +16,7 @@ import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSe
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
import {
IconChevronLeft,
IconLayoutKanban,
@ -144,7 +144,7 @@ export const BoardOptionsDropdownContent = ({
const { handleFieldVisibilityChange } = useBoardCardFields();
const { closeDropdownButton } = useDropdownButton({
const { closeDropdown } = useDropdown({
dropdownId: BoardOptionsDropdownKey,
});
@ -152,7 +152,7 @@ export const BoardOptionsDropdownContent = ({
Key.Escape,
() => {
resetViewEditMode();
closeDropdownButton();
closeDropdown();
},
customHotkeyScope.scope,
);
@ -163,7 +163,7 @@ export const BoardOptionsDropdownContent = ({
handleStageSubmit();
handleViewNameSubmit();
resetViewEditMode();
closeDropdownButton();
closeDropdown();
},
customHotkeyScope.scope,
);