mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-16 17:46:18 +08:00
fix(core): page mode switch sometimes not working (#5306)
Should not pass inline object without memo into `InternalLottie`. https://github.com/toeverything/AFFiNE/blob/cdc96876b0a764ccf4f8ae9b7877ba8ae6774acb/packages/frontend/component/src/components/internal-lottie/index.tsx#L77 In the detail page when during syncing on the cloud, the detail page will be re-rendered constantly because of `useCurrentSyncEngineStatus` hook, which will then cause `PageSwitchItem` to re-render and forcing the internal lottie state to reset. As a result the click event may not be captured somehow.
This commit is contained in:
+20
-20
@@ -45,21 +45,30 @@ const HoverAnimateController = ({
|
||||
);
|
||||
};
|
||||
|
||||
const pageLottieOptions = {
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
animationData: pageHover,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio: 'xMidYMid slice',
|
||||
},
|
||||
};
|
||||
|
||||
const edgelessLottieOptions = {
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
animationData: edgelessHover,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio: 'xMidYMid slice',
|
||||
},
|
||||
};
|
||||
|
||||
export const PageSwitchItem = (
|
||||
props: Omit<HoverAnimateControllerProps, 'children'>
|
||||
) => {
|
||||
return (
|
||||
<HoverAnimateController {...props}>
|
||||
<InternalLottie
|
||||
options={{
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
animationData: pageHover,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio: 'xMidYMid slice',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<InternalLottie options={pageLottieOptions} />
|
||||
</HoverAnimateController>
|
||||
);
|
||||
};
|
||||
@@ -69,16 +78,7 @@ export const EdgelessSwitchItem = (
|
||||
) => {
|
||||
return (
|
||||
<HoverAnimateController {...props}>
|
||||
<InternalLottie
|
||||
options={{
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
animationData: edgelessHover,
|
||||
rendererSettings: {
|
||||
preserveAspectRatio: 'xMidYMid slice',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<InternalLottie options={edgelessLottieOptions} />
|
||||
</HoverAnimateController>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user