From f009371e0655bf215b5782f12f48cc950227fb33 Mon Sep 17 00:00:00 2001 From: EYHN Date: Wed, 11 Sep 2024 03:42:13 +0000 Subject: [PATCH] fix(core): fix menu shaking (#8187) --- .../src/ui/menu/desktop/controller.ts | 95 ------------------- .../component/src/ui/menu/desktop/root.tsx | 25 +---- .../component/src/ui/menu/desktop/sub.tsx | 28 +----- .../workspace-list/index.css.ts | 1 - 4 files changed, 3 insertions(+), 146 deletions(-) delete mode 100644 packages/frontend/component/src/ui/menu/desktop/controller.ts diff --git a/packages/frontend/component/src/ui/menu/desktop/controller.ts b/packages/frontend/component/src/ui/menu/desktop/controller.ts deleted file mode 100644 index d96f615595..0000000000 --- a/packages/frontend/component/src/ui/menu/desktop/controller.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { useCallback, useState } from 'react'; - -import { useRefEffect } from '../../../hooks'; - -export const useMenuContentController = ({ - onOpenChange, - side, - defaultOpen, - sideOffset, - open: controlledOpen, -}: { - defaultOpen?: boolean; - side?: 'top' | 'bottom' | 'left' | 'right'; - onOpenChange?: (open: boolean) => void; - open?: boolean; - sideOffset?: number; -} = {}) => { - const [open, setOpen] = useState(defaultOpen ?? false); - const actualOpen = controlledOpen ?? open; - const contentSide = side ?? 'bottom'; - const [contentOffset, setContentOffset] = useState(0); - - const handleOpenChange = useCallback( - (open: boolean) => { - setOpen(open); - onOpenChange?.(open); - }, - [onOpenChange] - ); - const contentRef = useRefEffect( - contentElement => { - if (!actualOpen) return; - - const wrapperElement = contentElement.parentNode as HTMLDivElement; - - const updateContentOffset = () => { - if (!contentElement) return; - const contentRect = wrapperElement.getBoundingClientRect(); - if (contentSide === 'bottom') { - setContentOffset(prev => { - const viewportHeight = window.innerHeight; - const newOffset = Math.min( - viewportHeight - (contentRect.bottom - prev), - 0 - ); - return newOffset; - }); - } else if (contentSide === 'top') { - setContentOffset(prev => { - const newOffset = Math.min(contentRect.top + prev, 0); - return newOffset; - }); - } else if (contentSide === 'left') { - setContentOffset(prev => { - const newOffset = Math.min(contentRect.left + prev, 0); - return newOffset; - }); - } else if (contentSide === 'right') { - setContentOffset(prev => { - const viewportWidth = window.innerWidth; - const newOffset = Math.min( - viewportWidth - (contentRect.right - prev), - 0 - ); - return newOffset; - }); - } - }; - let animationFrame: number = 0; - const requestUpdateContentOffset = () => { - cancelAnimationFrame(animationFrame); - animationFrame = requestAnimationFrame(updateContentOffset); - }; - - const observer = new ResizeObserver(requestUpdateContentOffset); - observer.observe(wrapperElement); - window.addEventListener('resize', requestUpdateContentOffset); - requestUpdateContentOffset(); - return () => { - observer.disconnect(); - window.removeEventListener('resize', requestUpdateContentOffset); - cancelAnimationFrame(animationFrame); - }; - }, - [actualOpen, contentSide] - ); - - return { - handleOpenChange, - contentSide, - contentOffset: (sideOffset ?? 0) + contentOffset, - contentRef, - open: actualOpen, - }; -}; diff --git a/packages/frontend/component/src/ui/menu/desktop/root.tsx b/packages/frontend/component/src/ui/menu/desktop/root.tsx index e7be21cd9f..16a605fad3 100644 --- a/packages/frontend/component/src/ui/menu/desktop/root.tsx +++ b/packages/frontend/component/src/ui/menu/desktop/root.tsx @@ -4,7 +4,6 @@ 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 = ({ @@ -12,36 +11,18 @@ export const DesktopMenu = ({ 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 ( {items} diff --git a/packages/frontend/component/src/ui/menu/desktop/sub.tsx b/packages/frontend/component/src/ui/menu/desktop/sub.tsx index 5bcd0e8263..57a2e7e3c2 100644 --- a/packages/frontend/component/src/ui/menu/desktop/sub.tsx +++ b/packages/frontend/component/src/ui/menu/desktop/sub.tsx @@ -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 } = {}, @@ -32,35 +25,18 @@ export const DesktopMenuSub = ({ suffixIcon: , }); - const { handleOpenChange, contentOffset, contentRef, open } = - useMenuContentController({ - defaultOpen, - open: rootOpen, - onOpenChange, - side: 'right', - sideOffset: (sideOffset ?? 0) + 12, - }); - return ( - + {children} clsx(styles.menuContent, subContentClassName), [subContentClassName] )} style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }} - avoidCollisions={false} {...otherSubContentOptions} > {items} diff --git a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts index 3d8aa7fb9e..31487708ba 100644 --- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts +++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts @@ -26,7 +26,6 @@ export const workspaceTypeIcon = style({ color: cssVar('iconSecondary'), }); export const scrollbar = style({ - transform: 'translateX(8px)', width: '4px', }); export const workspaceCard = style({