Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-18 23:07:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): handle menu ref better (#8051)

Browse Source
This commit is contained in:
pengx17
2024-09-03 01:59:45 +00:00
parent 392fef663e
commit 197996de31
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/component/src/ui/menu/mobile/root.tsx
View File

@@ -2,7 +2,7 @@ import { useI18n } from '@affine/i18n';
import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc'; import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
import { Slot } from '@radix-ui/react-slot'; import { Slot } from '@radix-ui/react-slot';
import clsx from 'clsx'; import clsx from 'clsx';
import { useCallback, useContext, useMemo, useState } from 'react'; import { useCallback, useContext, useEffect, useState } from 'react';
import { observeResize } from '../../../utils'; import { observeResize } from '../../../utils';
import { Button } from '../../button'; import { Button } from '../../button';
@@ -31,30 +31,28 @@ export const MobileMenu = ({
const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]); const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [sliderHeight, setSliderHeight] = useState(0); const [sliderHeight, setSliderHeight] = useState(0);
const [sliderElement, setSliderElement] = useState<HTMLDivElement | null>(
null
);
const { setOpen: pSetOpen } = useContext(MobileMenuContext); const { setOpen: pSetOpen } = useContext(MobileMenuContext);
const finalOpen = rootOptions?.open ?? open; const finalOpen = rootOptions?.open ?? open;
const activeIndex = subMenus.length; const activeIndex = subMenus.length;
// dynamic height for slider // dynamic height for slider
const onSliderRef = useMemo(() => { useEffect(() => {
let unsub: (() => void) | null = null; if (sliderElement && finalOpen) {
const active = sliderElement.querySelector(
return (sliderDiv: HTMLDivElement | null) => {
unsub?.();
if (!sliderDiv || !finalOpen) return;
const active = sliderDiv.querySelector(
`.${styles.menuContent}[data-index="${activeIndex}"]` `.${styles.menuContent}[data-index="${activeIndex}"]`
); );
if (!active) return; if (!active) return;
// for the situation that content is loaded asynchronously // for the situation that content is loaded asynchronously
unsub = observeResize(active, entry => { return observeResize(active, entry => {
setSliderHeight(entry.borderBoxSize[0].blockSize); setSliderHeight(entry.borderBoxSize[0].blockSize);
}); });
}; }
}, [activeIndex, finalOpen]); return;
}, [activeIndex, finalOpen, sliderElement]);
const onOpenChange = useCallback( const onOpenChange = useCallback(
(open: boolean) => { (open: boolean) => {
@@ -117,7 +115,7 @@ export const MobileMenu = ({
}} }}
> >
<div <div
ref={onSliderRef} ref={setSliderElement}
className={styles.slider} className={styles.slider}
style={{ style={{
transform: `translateX(-${100 * activeIndex}%)`, transform: `translateX(-${100 * activeIndex}%)`,