Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

editor: only auto close a popup if it is fully opened

Browse Source
This commit is contained in:
Abdullah Atta
2023-02-06 13:17:26 +05:00
committed by Abdullah Atta
parent 4c21d781c4
commit 1f29273561
2 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/editor/src/components/popup-presenter/index.tsx
View File

@@ -28,7 +28,6 @@ import {
useToolbarStore useToolbarStore
} from "../../toolbar/stores/toolbar-store"; } from "../../toolbar/stores/toolbar-store";
import React from "react"; import React from "react";
import { usePopupRenderer } from "./popuprenderer";
import { ResponsivePresenter, ResponsivePresenterProps } from "../responsive"; import { ResponsivePresenter, ResponsivePresenterProps } from "../responsive";
import { ThemeProvider } from "../theme-provider"; import { ThemeProvider } from "../theme-provider";
@@ -241,15 +240,14 @@ export type PopupWrapperProps = UsePopupHandlerOptions & {
export function PopupWrapper(props: PropsWithChildren<PopupWrapperProps>) { export function PopupWrapper(props: PropsWithChildren<PopupWrapperProps>) {
const { id, position, children, autoCloseOnUnmount, ...presenterProps } = const { id, position, children, autoCloseOnUnmount, ...presenterProps } =
props; props;
const PopupRenderer = usePopupRenderer();
const { closePopup, isPopupOpen } = usePopupHandler(props); const { closePopup, isPopupOpen } = usePopupHandler(props);
useEffect(() => { useEffect(() => {
if (!autoCloseOnUnmount) return; if (!autoCloseOnUnmount) return;
return () => { return () => {
PopupRenderer?.closePopup(id); closePopup(id);
}; };
}, [autoCloseOnUnmount, id, PopupRenderer]); }, [autoCloseOnUnmount, id, closePopup]);
return ( return (
<PopupPresenter <PopupPresenter
@@ -282,30 +280,31 @@ type UsePopupHandlerOptions = {
}; };
export function usePopupHandler(options: UsePopupHandlerOptions) { export function usePopupHandler(options: UsePopupHandlerOptions) {
const { isOpen, id, onClosed, group } = options; const { isOpen, id, onClosed, group } = options;
const isPopupOpen = useToolbarStore((store) => !!store.openedPopups[id]); const openedPopups = useToolbarStore((store) => store.openedPopups);
const openPopup = useToolbarStore((store) => store.openPopup); const openPopup = useToolbarStore((store) => store.openPopup);
const closePopup = useToolbarStore((store) => store.closePopup); const closePopup = useToolbarStore((store) => store.closePopup);
const closePopupGroup = useToolbarStore((store) => store.closePopupGroup); const closePopupGroup = useToolbarStore((store) => store.closePopupGroup);
const isPopupOpen = typeof openedPopups[id] === "object";
const isPopupDefined = typeof openedPopups[id] !== "undefined";
useEffect(() => { useEffect(() => {
if (isOpen) openPopup({ id, group }); if (isOpen) openPopup({ id, group });
else closePopup(id); else closePopup(id);
}, [isOpen, id, group, openPopup, closePopup]); }, [isOpen, closePopup, openPopup, id, group]);
useEffect(() => { useEffect(() => {
if (!isPopupOpen) onClosed?.(); // we don't want to close the popup just when it is about to open.
}, [isPopupOpen]); if (!isPopupOpen && isPopupDefined) onClosed?.();
}, [isPopupOpen, isPopupDefined]);
useEffect(() => { useEffect(() => {
// if another popup in the same group is open, close it.
if (isPopupOpen) { if (isPopupOpen) {
closePopupGroup(group, [id]); closePopupGroup(group, [id]);
} }
}, [onClosed, isPopupOpen, closePopupGroup, id, group]); }, [onClosed, isPopupOpen, closePopupGroup, id, group]);
useEffect(() => {
if (!isOpen) closePopup(id);
}, [isOpen, id, group, closePopup]);
return { isPopupOpen, closePopup }; return { isPopupOpen, closePopup };
} }

2
packages/editor/src/toolbar/stores/toolbar-store.ts
View File

@@ -32,7 +32,7 @@ interface ToolbarState {
isKeyboardOpen: boolean; isKeyboardOpen: boolean;
setIsKeyboardOpen: (isKeyboardOpen: boolean) => void; setIsKeyboardOpen: (isKeyboardOpen: boolean) => void;
isMobile: boolean; isMobile: boolean;
openedPopups: Record<string, PopupRef | false>; openedPopups: Record<string, PopupRef | false | undefined>;
setIsMobile: (isMobile: boolean) => void; setIsMobile: (isMobile: boolean) => void;
toolbarLocation: ToolbarLocation; toolbarLocation: ToolbarLocation;
setToolbarLocation: (location: ToolbarLocation) => void; setToolbarLocation: (location: ToolbarLocation) => void;