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

Fix issue 2151: Dropdown menu of header table does not close after hide column (#2177)

Browse Source 
* Fix issue 2151: Dropdown menu of header table does not close after hide column

* Remove dropdown scope

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
David Pham
2023-10-21 17:07:50 +07:00
committed by GitHub
parent 6d8effabbf
commit 9e9eca22a4
2 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
View File

@ -32,6 +32,7 @@ export const ColumnHeadWithDropdown = ({
primaryColumnKey={primaryColumnKey} primaryColumnKey={primaryColumnKey}
/> />
} }
dropdownOffset={{ x: -1 }}
dropdownPlacement="bottom-start" dropdownPlacement="bottom-start"
dropdownHotkeyScope={{ scope: column.key + '-header' }} dropdownHotkeyScope={{ scope: column.key + '-header' }}
/> />

47
front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
View File

@ -1,11 +1,9 @@
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata'; import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/display/icon'; import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/display/icon';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
import { useTableColumns } from '../hooks/useTableColumns'; import { useTableColumns } from '../hooks/useTableColumns';
import { ColumnDefinition } from '../types/ColumnDefinition'; import { ColumnDefinition } from '../types/ColumnDefinition';
@ -25,9 +23,7 @@ export const DataTableColumnDropdownMenu = ({
const { handleColumnVisibilityChange, handleMoveTableColumn } = const { handleColumnVisibilityChange, handleMoveTableColumn } =
useTableColumns(); useTableColumns();
const { closeDropdown } = useDropdown({ const { closeDropdown } = useDropdown();
dropdownScopeId: ColumnHeadDropdownId,
});
const handleColumnMoveLeft = () => { const handleColumnMoveLeft = () => {
closeDropdown(); closeDropdown();
@ -46,34 +42,33 @@ export const DataTableColumnDropdownMenu = ({
}; };
const handleColumnVisibility = () => { const handleColumnVisibility = () => {
closeDropdown();
handleColumnVisibilityChange(column); handleColumnVisibilityChange(column);
}; };
return column.key === primaryColumnKey ? ( return column.key === primaryColumnKey ? (
<></> <></>
) : ( ) : (
<DropdownMenu> <DropdownMenuItemsContainer>
<DropdownMenuItemsContainer> {!isFirstColumn && (
{!isFirstColumn && (
<MenuItem
LeftIcon={IconArrowLeft}
onClick={handleColumnMoveLeft}
text="Move left"
/>
)}
{!isLastColumn && (
<MenuItem
LeftIcon={IconArrowRight}
onClick={handleColumnMoveRight}
text="Move right"
/>
)}
<MenuItem <MenuItem
LeftIcon={IconEyeOff} LeftIcon={IconArrowLeft}
onClick={handleColumnVisibility} onClick={handleColumnMoveLeft}
text="Hide" text="Move left"
/> />
</DropdownMenuItemsContainer> )}
</DropdownMenu> {!isLastColumn && (
<MenuItem
LeftIcon={IconArrowRight}
onClick={handleColumnMoveRight}
text="Move right"
/>
)}
<MenuItem
LeftIcon={IconEyeOff}
onClick={handleColumnVisibility}
text="Hide"
/>
</DropdownMenuItemsContainer>
); );
}; };