From f5aee7c360af3f455bf9171bb4ab7056249c2c53 Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Wed, 31 May 2023 15:06:13 +0800 Subject: [PATCH] fix: unify sidebar switch (#2616) --- .../affine/sidebar-switch/icons.tsx | 26 -------- .../affine/sidebar-switch/index.tsx | 65 ------------------- .../components/affine/sidebar-switch/style.ts | 13 ---- .../blocksuite/workspace-header/header.tsx | 34 ++-------- .../app-sidebar/sidebar-header/index.tsx | 23 +++---- .../sidebar-header/sidebar-switch.tsx | 31 +++++++++ tests/parallels/layout.spec.ts | 2 +- 7 files changed, 46 insertions(+), 148 deletions(-) delete mode 100644 apps/web/src/components/affine/sidebar-switch/icons.tsx delete mode 100644 apps/web/src/components/affine/sidebar-switch/index.tsx delete mode 100644 apps/web/src/components/affine/sidebar-switch/style.ts create mode 100644 packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx diff --git a/apps/web/src/components/affine/sidebar-switch/icons.tsx b/apps/web/src/components/affine/sidebar-switch/icons.tsx deleted file mode 100644 index 622e30d3de..0000000000 --- a/apps/web/src/components/affine/sidebar-switch/icons.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export const SidebarSwitchIcon = () => { - return ( - - - - - ); -}; diff --git a/apps/web/src/components/affine/sidebar-switch/index.tsx b/apps/web/src/components/affine/sidebar-switch/index.tsx deleted file mode 100644 index af6988e301..0000000000 --- a/apps/web/src/components/affine/sidebar-switch/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Tooltip } from '@affine/component'; -import { appSidebarOpenAtom } from '@affine/component/app-sidebar'; -import { getEnvironment } from '@affine/env'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { useAtom } from 'jotai'; -import { useCallback, useEffect, useState } from 'react'; - -import { SidebarSwitchIcon } from './icons'; -import { StyledSidebarSwitch } from './style'; -type SidebarSwitchProps = { - visible?: boolean; - tooltipContent?: string; -}; - -// fixme: the following code is not correct, SSR will fail because hydrate will not match the client side render -// in `StyledSidebarSwitch` a component -export const SidebarSwitch = ({ - visible = true, - tooltipContent, - ...props -}: SidebarSwitchProps) => { - const [open, setOpen] = useAtom(appSidebarOpenAtom); - const [tooltipVisible, setTooltipVisible] = useState(false); - const t = useAFFiNEI18N(); - const checkIsMac = () => { - const env = getEnvironment(); - return env.isBrowser && env.isMacOs; - }; - const [isMac, setIsMac] = useState(false); - const collapseKeyboardShortcuts = isMac ? ' ⌘+/' : ' Ctrl+/'; - - useEffect(() => { - setIsMac(checkIsMac()); - }, []); - - tooltipContent = - tooltipContent || (open ? t['Collapse sidebar']() : t['Expand sidebar']()); - - return ( - - { - setOpen(open => !open); - setTooltipVisible(false); - }, [setOpen])} - onMouseEnter={useCallback(() => { - setTooltipVisible(true); - }, [])} - onMouseLeave={useCallback(() => { - setTooltipVisible(false); - }, [])} - > - - - - ); -}; diff --git a/apps/web/src/components/affine/sidebar-switch/style.ts b/apps/web/src/components/affine/sidebar-switch/style.ts deleted file mode 100644 index c9a9749dc4..0000000000 --- a/apps/web/src/components/affine/sidebar-switch/style.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { IconButton, styled } from '@affine/component'; - -export const StyledSidebarSwitch = styled(IconButton, { - shouldForwardProp(propName: PropertyKey) { - return propName !== 'visible'; - }, -})<{ visible: boolean }>(({ visible }) => { - return { - opacity: visible ? 1 : 0, - WebkitAppRegion: visible ? 'no-drag' : 'drag', - transition: 'all 0.2s ease-in-out', - }; -}); diff --git a/apps/web/src/components/blocksuite/workspace-header/header.tsx b/apps/web/src/components/blocksuite/workspace-header/header.tsx index 33e1d227b3..6630fb1504 100644 --- a/apps/web/src/components/blocksuite/workspace-header/header.tsx +++ b/apps/web/src/components/blocksuite/workspace-header/header.tsx @@ -3,7 +3,7 @@ import { appSidebarFloatingAtom, appSidebarOpenAtom, } from '@affine/component/app-sidebar'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { SidebarSwitch } from '@affine/component/app-sidebar/sidebar-header'; import { WorkspaceFlavour } from '@affine/workspace/type'; import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons'; import type { Page } from '@blocksuite/store'; @@ -11,15 +11,7 @@ import { affinePluginsAtom } from '@toeverything/plugin-infra/manager'; import type { PluginUIAdapter } from '@toeverything/plugin-infra/type'; import { useAtom, useAtomValue } from 'jotai'; import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; -import { - forwardRef, - lazy, - memo, - Suspense, - useEffect, - useMemo, - useState, -} from 'react'; +import { forwardRef, memo, useEffect, useMemo, useState } from 'react'; import { guideDownloadClientTipAtom } from '../../../atoms/guide'; import { contentLayoutAtom } from '../../../atoms/layout'; @@ -35,12 +27,6 @@ import UserAvatar from './header-right-items/user-avatar'; import * as styles from './styles.css'; import { OSWarningMessage, shouldShowWarning } from './utils'; -const SidebarSwitch = lazy(() => - import('../../affine/sidebar-switch').then(module => ({ - default: module.SidebarSwitch, - })) -); - export type BaseHeaderProps< Workspace extends AffineOfficialWorkspace = AffineOfficialWorkspace > = { @@ -205,8 +191,6 @@ export const Header = forwardRef< setShowGuideDownloadClientTip(shouldShowGuideDownloadClientTip); }, [shouldShowGuideDownloadClientTip]); const open = useAtomValue(appSidebarOpenAtom); - const t = useAFFiNEI18N(); - const appSidebarFloating = useAtomValue(appSidebarFloatingAtom); const mode = useCurrentMode(); @@ -237,16 +221,10 @@ export const Header = forwardRef< data-testid="editor-header-items" data-is-edgeless={mode === 'edgeless'} > - -
- - {props.leftSlot} -
- +
+ {!open && } + {props.leftSlot} +
{props.children}
diff --git a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx index 8b461c9a9d..4c873664c9 100644 --- a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx +++ b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx @@ -1,15 +1,12 @@ import { getEnvironment } from '@affine/env/config'; -import { - ArrowLeftSmallIcon, - ArrowRightSmallIcon, - SidebarIcon, -} from '@blocksuite/icons'; -import { useAtom } from 'jotai'; +import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons'; +import { useAtomValue } from 'jotai'; import { IconButton } from '../../..'; import type { History } from '..'; -import { navHeaderStyle, sidebarButtonStyle } from '../index.css'; +import { navHeaderStyle } from '../index.css'; import { appSidebarOpenAtom } from '../index.jotai'; +import { SidebarSwitch } from './sidebar-switch'; export type SidebarHeaderProps = { router?: { @@ -20,7 +17,7 @@ export type SidebarHeaderProps = { }; export const SidebarHeader = (props: SidebarHeaderProps) => { - const [open, setOpen] = useAtom(appSidebarOpenAtom); + const open = useAtomValue(appSidebarOpenAtom); const environment = getEnvironment(); return (
@@ -57,13 +54,9 @@ export const SidebarHeader = (props: SidebarHeaderProps) => { {!environment.isMacOs &&
} )} - setOpen(open => !open)} - > - - + {open && }
); }; + +export * from './sidebar-switch'; diff --git a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx new file mode 100644 index 0000000000..28fa672f39 --- /dev/null +++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx @@ -0,0 +1,31 @@ +import { IconButton, Tooltip } from '@affine/component'; +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { SidebarIcon } from '@blocksuite/icons'; +import { useAtom } from 'jotai'; + +import { sidebarButtonStyle } from '../index.css'; +import { appSidebarOpenAtom } from '../index.jotai'; + +export const SidebarSwitch = () => { + const [open, setOpen] = useAtom(appSidebarOpenAtom); + const t = useAFFiNEI18N(); + const tooltipContent = open ? t['Collapse sidebar']() : t['Expand sidebar'](); + const collapseKeyboardShortcuts = + environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/'; + + return ( + + setOpen(open => !open)} + > + + + + ); +}; diff --git a/tests/parallels/layout.spec.ts b/tests/parallels/layout.spec.ts index 02635a9c1c..096b00a809 100644 --- a/tests/parallels/layout.spec.ts +++ b/tests/parallels/layout.spec.ts @@ -19,7 +19,7 @@ test('Expand Sidebar', async ({ page }) => { const sliderBarArea = page.getByTestId('sliderBar-inner'); await expect(sliderBarArea).not.toBeInViewport(); - await page.getByTestId('sliderBar-arrowButton-expand').click(); + await page.getByTestId('app-sidebar-arrow-button-expand').click(); await expect(sliderBarArea).toBeInViewport(); });