mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-12-23 10:05:02 +03:00
fix(mobile): change how slider height is calculated (#8049)
This commit is contained in:
parent
87da792c4c
commit
e1310b65cd
1
.github/workflows/build-test.yml
vendored
1
.github/workflows/build-test.yml
vendored
@ -601,6 +601,7 @@ jobs:
|
||||
- lint
|
||||
- check-yarn-binary
|
||||
- e2e-test
|
||||
- e2e-mobile-test
|
||||
- e2e-migration-test
|
||||
- unit-test
|
||||
- server-test
|
||||
|
@ -2,7 +2,7 @@ import { useI18n } from '@affine/i18n';
|
||||
import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import clsx from 'clsx';
|
||||
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useContext, useMemo, useState } from 'react';
|
||||
|
||||
import { observeResize } from '../../../utils';
|
||||
import { Button } from '../../button';
|
||||
@ -33,9 +33,29 @@ export const MobileMenu = ({
|
||||
const [sliderHeight, setSliderHeight] = useState(0);
|
||||
const { setOpen: pSetOpen } = useContext(MobileMenuContext);
|
||||
const finalOpen = rootOptions?.open ?? open;
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const activeIndex = subMenus.length;
|
||||
|
||||
// dynamic height for slider
|
||||
const onSliderRef = useMemo(() => {
|
||||
let unsub: (() => void) | null = null;
|
||||
|
||||
return (sliderDiv: HTMLDivElement | null) => {
|
||||
unsub?.();
|
||||
|
||||
if (!sliderDiv || !finalOpen) return;
|
||||
|
||||
const active = sliderDiv.querySelector(
|
||||
`.${styles.menuContent}[data-index="${activeIndex}"]`
|
||||
);
|
||||
if (!active) return;
|
||||
|
||||
// for the situation that content is loaded asynchronously
|
||||
unsub = observeResize(active, entry => {
|
||||
setSliderHeight(entry.borderBoxSize[0].blockSize);
|
||||
});
|
||||
};
|
||||
}, [activeIndex, finalOpen]);
|
||||
|
||||
const onOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (!open) {
|
||||
@ -57,31 +77,6 @@ export const MobileMenu = ({
|
||||
[onOpenChange, open]
|
||||
);
|
||||
|
||||
// dynamic height for slider
|
||||
useEffect(() => {
|
||||
if (!finalOpen) return;
|
||||
let observer: () => void;
|
||||
const t = setTimeout(() => {
|
||||
const slider = sliderRef.current;
|
||||
if (!slider) return;
|
||||
|
||||
const active = slider.querySelector(
|
||||
`.${styles.menuContent}[data-index="${activeIndex}"]`
|
||||
);
|
||||
if (!active) return;
|
||||
|
||||
// for the situation that content is loaded asynchronously
|
||||
observer = observeResize(active, entry => {
|
||||
setSliderHeight(entry.borderBoxSize[0].blockSize);
|
||||
});
|
||||
}, 0);
|
||||
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
observer?.();
|
||||
};
|
||||
}, [activeIndex, finalOpen]);
|
||||
|
||||
const t = useI18n();
|
||||
|
||||
/**
|
||||
@ -122,7 +117,7 @@ export const MobileMenu = ({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={sliderRef}
|
||||
ref={onSliderRef}
|
||||
className={styles.slider}
|
||||
style={{
|
||||
transform: `translateX(-${100 * activeIndex}%)`,
|
||||
|
@ -23,9 +23,11 @@ const config: PlaywrightTestConfig = {
|
||||
},
|
||||
},
|
||||
],
|
||||
expect: {
|
||||
timeout: process.env.CI ? 15_000 : 5_000,
|
||||
},
|
||||
use: {
|
||||
baseURL: 'http://localhost:8080/',
|
||||
actionTimeout: 10 * 1000,
|
||||
locale: 'en-US',
|
||||
// Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
|
||||
// You can open traces locally(`npx playwright show-trace trace.zip`)
|
||||
|
Loading…
Reference in New Issue
Block a user