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