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 showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => { const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
if (!onClick) return;
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();

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

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