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

[FEAT-2496] Add Customize fields button in new column menu (#2683)

Browse Source 
* feat: add customize-fields btn in new column menu

* fix: refactor onClick

* Add separator

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Umar Abid
2023-12-01 21:48:38 +05:00
committed by GitHub
parent 9dc997e9ac
commit 5720312249
2 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
View File

@ -39,6 +39,7 @@ export const MenuItem = ({
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
if (!onClick) return;
event.preventDefault();
event.stopPropagation();

48
front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -1,9 +1,12 @@
import { useCallback } from 'react';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { IconPlus, IconSettings } from '@/ui/display/icon';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
@ -31,21 +34,34 @@ export const RecordTableHeaderPlusButtonContent = () => {
[handleColumnVisibilityChange, closeDropdown],
);
const StyledMenuItemLink = styled(Link)`
text-decoration: none;
width: 100%;
`;
return (
<DropdownMenuItemsContainer>
{hiddenTableColumns.map((column) => (
<MenuItem
key={column.fieldMetadataId}
iconButtons={[
{
Icon: IconPlus,
onClick: () => handleAddColumn(column),
},
]}
LeftIcon={icons[column.iconName]}
text={column.label}
/>
))}
</DropdownMenuItemsContainer>
<>
<DropdownMenuItemsContainer>
{hiddenTableColumns.map((column) => (
<MenuItem
key={column.fieldMetadataId}
iconButtons={[
{
Icon: IconPlus,
onClick: () => handleAddColumn(column),
},
]}
LeftIcon={icons[column.iconName]}
text={column.label}
/>
))}
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer>
<StyledMenuItemLink to="/settings/objects">
<MenuItem LeftIcon={IconSettings} text="Customize fields" />
</StyledMenuItemLink>
</DropdownMenuItemsContainer>
</>
);
};