mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-15 05:37:32 +00:00
feat(core): prevent the floating sidebar from showing immediately after the sidebar is closed (#8531)
close PD-1763 https://github.com/user-attachments/assets/a8346098-5f87-4297-bdb6-885f5486ce78
This commit is contained in:
@@ -36,6 +36,11 @@ export class AppSidebar extends Entity {
|
||||
*/
|
||||
hovering$ = new LiveData<boolean>(false);
|
||||
|
||||
/**
|
||||
* prevent it from setting hovering once when the sidebar is closed
|
||||
*/
|
||||
preventHovering$ = new LiveData<boolean>(false);
|
||||
|
||||
/**
|
||||
* small screen mode, will disable hover effect
|
||||
*/
|
||||
@@ -63,6 +68,10 @@ export class AppSidebar extends Entity {
|
||||
this.hovering$.next(hoverFloating);
|
||||
};
|
||||
|
||||
setPreventHovering = (preventHovering: boolean) => {
|
||||
this.preventHovering$.next(preventHovering);
|
||||
};
|
||||
|
||||
setResizing = (resizing: boolean) => {
|
||||
this.resizing$.next(resizing);
|
||||
};
|
||||
|
||||
@@ -16,15 +16,30 @@ export const SidebarSwitch = ({
|
||||
}) => {
|
||||
const appSidebarService = useService(AppSidebarService).sidebar;
|
||||
const open = useLiveData(appSidebarService.open$);
|
||||
const preventHovering = useLiveData(appSidebarService.preventHovering$);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const switchRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
if (open || preventHovering) {
|
||||
return;
|
||||
}
|
||||
appSidebarService.setHovering(true);
|
||||
}, [appSidebarService]);
|
||||
}, [appSidebarService, open, preventHovering]);
|
||||
|
||||
const handleClickSwitch = useCallback(() => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
if (open) {
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
appSidebarService.setPreventHovering(false);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
appSidebarService.setPreventHovering(true);
|
||||
appSidebarService.toggleSidebar();
|
||||
}, [appSidebarService]);
|
||||
}, [appSidebarService, open]);
|
||||
|
||||
const t = useI18n();
|
||||
const tooltipContent = open
|
||||
|
||||
Reference in New Issue
Block a user