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

refacto(twenty-front): improve DropdownMenuHeader api (#10961)

Browse Source
This commit is contained in:
Antoine Moreaux
2025-03-18 08:19:22 +01:00
committed by GitHub
parent 03f4f73da4
commit 606098fef6
29 changed files with 194 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
View File

@ -1,13 +1,6 @@
import styled from '@emotion/styled';
import { ComponentProps, MouseEvent, ReactElement } from 'react';
import { Avatar, AvatarProps, IconComponent } from 'twenty-ui';
import { DropdownMenuHeaderStartIcon } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon';
import { isDefined } from 'twenty-shared';
import { useTheme } from '@emotion/react';
import {
Dropdown,
DropdownProps,
} from '@/ui/layout/dropdown/components/Dropdown';
import { ComponentProps, MouseEvent } from 'react';
import { IconComponent } from 'twenty-ui';
const StyledHeader = styled.li`
align-items: center;
@ -37,7 +30,7 @@ const StyledChildrenWrapper = styled.span`
text-overflow: ellipsis;
`;
const StyledEndIcon = styled.div`
const StyledEndComponent = styled.div`
display: inline-flex;
color: ${({ theme }) => theme.font.color.tertiary};
padding: ${({ theme }) => theme.spacing(1)};
@ -53,50 +46,24 @@ const StyledEndIcon = styled.div`
type DropdownMenuHeaderProps = ComponentProps<'li'> & {
EndIcon?: IconComponent;
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
onStartIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
testId?: string;
className?: string;
DropdownOnEndIcon?: ReactElement<DropdownProps, typeof Dropdown>;
} & (
| { StartIcon?: IconComponent }
| { StartAvatar?: ReactElement<AvatarProps, typeof Avatar> }
);
StartComponent?: React.ReactNode;
EndComponent?: React.ReactNode;
};
export const DropdownMenuHeader = ({
children,
EndIcon,
onStartIconClick,
StartComponent,
onClick,
testId,
className,
...props
EndComponent,
}: DropdownMenuHeaderProps) => {
const theme = useTheme();
return (
<StyledHeader data-testid={testId} className={className} onClick={onClick}>
{'StartIcon' in props && isDefined(props.StartIcon) && (
<DropdownMenuHeaderStartIcon
onClick={onStartIconClick}
StartIcon={props.StartIcon}
/>
)}
{!('StartIcon' in props) &&
'StartAvatar' in props &&
isDefined(props.StartAvatar) && (
<DropdownMenuHeaderStartIcon
onClick={onStartIconClick}
StartAvatar={props.StartAvatar}
/>
)}
{StartComponent && StartComponent}
<StyledChildrenWrapper>{children}</StyledChildrenWrapper>
{'DropdownOnEndIcon' in props && (
<StyledEndIcon>{props.DropdownOnEndIcon}</StyledEndIcon>
)}
{!('DropdownOnEndIcon' in props) && EndIcon && (
<StyledEndIcon>
<EndIcon size={theme.icon.size.md} />
</StyledEndIcon>
)}
{EndComponent && <StyledEndComponent>{EndComponent}</StyledEndComponent>}
</StyledHeader>
);
};

16
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon.tsx → packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx
View File

@ -25,13 +25,13 @@ const StyledAvatarWrapper = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
`;
export const DropdownMenuHeaderStartIcon = ({
export const DropdownMenuHeaderLeftComponent = ({
onClick,
...props
}: { onClick?: (event: MouseEvent<HTMLButtonElement>) => void } & (
| { StartIcon: IconComponent }
| { Icon: IconComponent }
| {
StartAvatar: ReactElement<AvatarProps, typeof Avatar>;
Avatar: ReactElement<AvatarProps, typeof Avatar>;
}
| Record<never, never>
)) => {
@ -39,25 +39,25 @@ export const DropdownMenuHeaderStartIcon = ({
return (
<>
{'StartIcon' in props &&
{'Icon' in props &&
(onClick ? (
<LightIconButton
Icon={props.StartIcon}
Icon={props.Icon}
accent="tertiary"
size="small"
onClick={onClick}
/>
) : (
<StyledNonClickableStartIcon>
<props.StartIcon
<props.Icon
size={theme.icon.size.sm}
color={theme.font.color.tertiary}
/>
</StyledNonClickableStartIcon>
))}
{'StartAvatar' in props && (
<StyledAvatarWrapper>{props.StartAvatar}</StyledAvatarWrapper>
{'Avatar' in props && (
<StyledAvatarWrapper>{props.Avatar}</StyledAvatarWrapper>
)}
</>
);

34
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx
View File

@ -1,34 +0,0 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { IconComponent, IconDotsVertical, LightIconButton } from 'twenty-ui';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Placement } from '@floating-ui/react';
import { ReactNode } from 'react';
export type DropdownMenuHeaderWithDropdownMenuProps = {
EndIcon?: IconComponent;
dropdownPlacement?: Placement;
dropdownComponents: ReactNode;
dropdownId: string;
};
export const DropdownMenuHeaderWithDropdownMenu = (
props: DropdownMenuHeaderWithDropdownMenuProps,
) => {
return (
<div className="hoverable-buttons">
<Dropdown
clickableComponent={
<LightIconButton
Icon={props.EndIcon ?? IconDotsVertical}
size="small"
accent="tertiary"
/>
}
dropdownPlacement={props.dropdownPlacement ?? 'bottom-end'}
dropdownComponents={props.dropdownComponents}
dropdownId={props.dropdownId}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
/>
</div>
);
};

7
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -22,6 +22,7 @@ import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const meta: Meta<typeof Dropdown> = {
title: 'UI/Layout/Dropdown/Dropdown',
@ -219,7 +220,11 @@ export const WithHeaders: Story = {
args: {
dropdownComponents: (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft}>
<DropdownMenuHeader
StartComponent={
<DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />
}
>
Header
</DropdownMenuHeader>
<StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>

18
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
View File

@ -13,6 +13,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const meta: Meta<typeof DropdownMenuHeader> = {
title: 'UI/Layout/Dropdown/DropdownMenuHeader',
@ -31,21 +32,14 @@ export const Text: Story = {
};
export const StartIcon: Story = {
args: {
StartIcon: IconChevronLeft,
StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
children: 'Start Icon',
},
};
export const EndIcon: Story = {
args: {
EndIcon: IconChevronRight,
children: 'End Icon',
},
};
export const StartAndEndIcon: Story = {
args: {
StartIcon: IconChevronLeft,
StartComponent: <DropdownMenuHeaderLeftComponent Icon={IconChevronLeft} />,
EndIcon: IconChevronRight,
children: 'Start and End Icon',
},
@ -53,7 +47,7 @@ export const StartAndEndIcon: Story = {
export const StartAvatar: Story = {
args: {
StartAvatar: (
StartComponent: (
<Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
),
children: 'Avatar',
@ -63,10 +57,10 @@ export const StartAvatar: Story = {
export const ContextDropdownAndAvatar: Story = {
args: {
children: 'Context Dropdown',
StartAvatar: (
StartComponent: (
<Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
),
DropdownOnEndIcon: (
EndComponent: (
<Dropdown
dropdownId={'story-dropdown-id-context-menu'}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx
View File

@ -34,7 +34,7 @@ export const MultiWorkspaceDropdownButton = () => {
dropdownHotkeyScope={{
scope: NavigationDrawerHotKeyScope.MultiWorkspaceDropdownButton,
}}
dropdownOffset={{ y: 0, x: 0 }}
dropdownOffset={{ y: -35, x: -5 }}
clickableComponent={
<MultiWorkspaceDropdownClickableComponent
isDropdownOpen={isDropdownOpen}

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx
View File

@ -14,7 +14,7 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
export const MultiWorkspaceDropdownClickableComponent = ({
isDropdownOpen,
}: {
isDropdownOpen: boolean;
isDropdownOpen?: boolean;
}) => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const theme = useTheme();

15
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
View File

@ -36,6 +36,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import styled from '@emotion/styled';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
const StyledDescription = styled.div`
color: ${({ theme }) => theme.font.color.light};
@ -91,13 +92,17 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
return (
<>
<DropdownMenuHeader
StartAvatar={
<Avatar
placeholder={currentWorkspace?.displayName || ''}
avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
StartComponent={
<DropdownMenuHeaderLeftComponent
Avatar={
<Avatar
placeholder={currentWorkspace?.displayName || ''}
avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
/>
}
/>
}
DropdownOnEndIcon={
EndComponent={
<Dropdown
clickableComponent={
<LightIconButton

9
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
View File

@ -5,6 +5,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
import { useSetRecoilState } from 'recoil';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const MultiWorkspaceDropdownThemesComponents = () => {
const { t } = useLingui();
@ -18,8 +19,12 @@ export const MultiWorkspaceDropdownThemesComponents = () => {
return (
<DropdownMenuItemsContainer>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => setMultiWorkspaceDropdownState('default')}
Icon={IconChevronLeft}
/>
}
>
{t`Theme`}
</DropdownMenuHeader>

9
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
View File

@ -18,6 +18,7 @@ import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/s
import { useState } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@ -37,8 +38,12 @@ export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
return (
<DropdownMenuItemsContainer>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onStartIconClick={() => setMultiWorkspaceDropdownState('default')}
StartComponent={
<DropdownMenuHeaderLeftComponent
onClick={() => setMultiWorkspaceDropdownState('default')}
Icon={IconChevronLeft}
/>
}
>
{t`Other workspaces`}
</DropdownMenuHeader>