Skip to content

Commit

Permalink
fix(core): fix menu shaking (toeverything#8187)
Browse files Browse the repository at this point in the history
  • Loading branch information
EYHN committed Sep 11, 2024
1 parent 7a546ff commit f009371
Show file tree
Hide file tree
Showing 4 changed files with 3 additions and 146 deletions.
95 changes: 0 additions & 95 deletions packages/frontend/component/src/ui/menu/desktop/controller.ts

This file was deleted.

25 changes: 1 addition & 24 deletions packages/frontend/component/src/ui/menu/desktop/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,25 @@ import React from 'react';

import type { MenuProps } from '../menu.types';
import * as styles from '../styles.css';
import { useMenuContentController } from './controller';
import * as desktopStyles from './styles.css';

export const DesktopMenu = ({
children,
items,
noPortal,
portalOptions,
rootOptions: {
onOpenChange,
defaultOpen,
modal,
open: rootOpen,
...rootOptions
} = {},
rootOptions: { defaultOpen, modal, ...rootOptions } = {},
contentOptions: {
className = '',
style: contentStyle = {},
side,
sideOffset,
...otherContentOptions
} = {},
}: MenuProps) => {
const { handleOpenChange, contentSide, contentOffset, contentRef, open } =
useMenuContentController({
open: rootOpen,
defaultOpen,
onOpenChange,
side,
sideOffset: (sideOffset ?? 0) + 5,
});
const ContentWrapper = noPortal ? React.Fragment : DropdownMenu.Portal;
return (
<DropdownMenu.Root
onOpenChange={handleOpenChange}
defaultOpen={defaultOpen}
modal={modal ?? false}
open={open}
{...rootOptions}
>
<DropdownMenu.Trigger
Expand All @@ -62,11 +43,7 @@ export const DesktopMenu = ({
className
)}
align="start"
ref={contentRef}
side={contentSide}
style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
avoidCollisions={false}
sideOffset={contentOffset}
{...otherContentOptions}
>
{items}
Expand Down
28 changes: 2 additions & 26 deletions packages/frontend/component/src/ui/menu/desktop/sub.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,15 @@ import { useMemo } from 'react';
import type { MenuSubProps } from '../menu.types';
import * as styles from '../styles.css';
import { useMenuItem } from '../use-menu-item';
import { useMenuContentController } from './controller';

export const DesktopMenuSub = ({
children: propsChildren,
items,
portalOptions,
subOptions: {
defaultOpen,
onOpenChange,
open: rootOpen,
...otherSubOptions
} = {},
subOptions: { defaultOpen, ...otherSubOptions } = {},
triggerOptions,
subContentOptions: {
className: subContentClassName = '',
sideOffset,
style: contentStyle,
...otherSubContentOptions
} = {},
Expand All @@ -32,35 +25,18 @@ export const DesktopMenuSub = ({
suffixIcon: <ArrowRightSmallIcon />,
});

const { handleOpenChange, contentOffset, contentRef, open } =
useMenuContentController({
defaultOpen,
open: rootOpen,
onOpenChange,
side: 'right',
sideOffset: (sideOffset ?? 0) + 12,
});

return (
<DropdownMenu.Sub
defaultOpen={defaultOpen}
onOpenChange={handleOpenChange}
open={open}
{...otherSubOptions}
>
<DropdownMenu.Sub defaultOpen={defaultOpen} {...otherSubOptions}>
<DropdownMenu.SubTrigger className={className} {...otherProps}>
{children}
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal {...portalOptions}>
<DropdownMenu.SubContent
sideOffset={contentOffset}
ref={contentRef}
className={useMemo(
() => clsx(styles.menuContent, subContentClassName),
[subContentClassName]
)}
style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
avoidCollisions={false}
{...otherSubContentOptions}
>
{items}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export const workspaceTypeIcon = style({
color: cssVar('iconSecondary'),
});
export const scrollbar = style({
transform: 'translateX(8px)',
width: '4px',
});
export const workspaceCard = style({
Expand Down

0 comments on commit f009371

Please sign in to comment.