From 31cccafb40ca8be0f922af029466e0e1c603f7d8 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Fri, 28 Apr 2023 15:02:47 -0500 Subject: [PATCH] fix: sidebar regression (#2195) --- .../src/components/root-app-sidebar/index.tsx | 8 +++--- .../src/components/app-sidebar/index.css.ts | 3 ++- .../src/components/app-sidebar/index.jotai.ts | 5 +++- .../components/app-sidebar/index.stories.tsx | 6 ++--- .../src/components/app-sidebar/index.tsx | 27 ++++++++++++++----- .../app-sidebar/resize-indicator/index.css.ts | 5 ++-- .../app-sidebar/resize-indicator/index.tsx | 21 ++++++++------- tests/parallels/quick-search.spec.ts | 5 ++-- 8 files changed, 50 insertions(+), 30 deletions(-) diff --git a/apps/web/src/components/root-app-sidebar/index.tsx b/apps/web/src/components/root-app-sidebar/index.tsx index 32ffa42b0c..5269ba875d 100644 --- a/apps/web/src/components/root-app-sidebar/index.tsx +++ b/apps/web/src/components/root-app-sidebar/index.tsx @@ -17,7 +17,7 @@ import { import type { Page } from '@blocksuite/store'; import { useAtomValue } from 'jotai'; import type { ReactElement, UIEvent } from 'react'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import type { AllWorkspace } from '../../shared'; import ChangeLog from '../pure/workspace-slider-bar/changeLog'; @@ -75,15 +75,15 @@ export const RootAppSidebar = ({ }, [createPage, openPage]); const sidebarOpen = useAtomValue(appSidebarOpenAtom); useEffect(() => { - if (environment.isDesktop) { + if (environment.isDesktop && typeof sidebarOpen === 'boolean') { window.apis?.onSidebarVisibilityChange(sidebarOpen); } }, [sidebarOpen]); - const ref = useRef(null); + const [ref, setRef] = useState(null); return ( <>
Add Page
; export const Default: StoryFn = () => { const [open, setOpen] = useAtom(appSidebarOpenAtom); - const ref = useRef(null); + const [ref, setRef] = useState(null); return ( <>
{ flexDirection: 'row', }} > - } ref={ref}> + } ref={setRef}> Test diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx index 866d8f0c51..7d7398eca3 100644 --- a/packages/component/src/components/app-sidebar/index.tsx +++ b/packages/component/src/components/app-sidebar/index.tsx @@ -8,10 +8,11 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'; import { useAtom, useAtomValue } from 'jotai'; import type { PropsWithChildren, ReactElement } from 'react'; import type { ReactNode } from 'react'; -import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'; +import { forwardRef, useCallback, useEffect } from 'react'; import { IconButton } from '../../ui/button/IconButton'; import { + floatingMaxWidth, navBodyStyle, navFooterStyle, navHeaderStyle, @@ -30,24 +31,38 @@ export type AppSidebarProps = PropsWithChildren<{ export const AppSidebar = forwardRef( function AppSidebar(props, forwardedRef): ReactElement { - const ref = useRef(null); const [open, setOpen] = useAtom(appSidebarOpenAtom); const appSidebarWidth = useAtomValue(appSidebarWidthAtom); + const initialRender = open === undefined; const handleSidebarOpen = useCallback(() => { setOpen(open => !open); }, [setOpen]); - useImperativeHandle(forwardedRef, () => ref.current as HTMLElement); + useEffect(() => { + if (open === undefined) { + // give the initial value, + // so that the sidebar can be closed on mobile by default + const { matches } = window.matchMedia( + `(min-width: ${floatingMaxWidth}px)` + ); + + setOpen(matches); + } + }, [open, setOpen]); const environment = getEnvironment(); const isMacosDesktop = environment.isDesktop && environment.isMacOs; + if (initialRender) { + // avoid the UI flash + return
; + } return ( <>