diff --git a/ts/components/GlobalModalContainer.tsx b/ts/components/GlobalModalContainer.tsx index 1096939f0..3d75f5bce 100644 --- a/ts/components/GlobalModalContainer.tsx +++ b/ts/components/GlobalModalContainer.tsx @@ -37,6 +37,9 @@ export type PropsType = { // SignalConnectionsModal isSignalConnectionsVisible: boolean; toggleSignalConnectionsModal: () => unknown; + // StickerPackPreviewModal + stickerPackPreviewId?: string; + renderStickerPreviewModal: () => JSX.Element | null; // StoriesSettings isStoriesSettingsVisible: boolean; renderStoriesSettings: () => JSX.Element; @@ -72,6 +75,9 @@ export function GlobalModalContainer({ // SignalConnectionsModal isSignalConnectionsVisible, toggleSignalConnectionsModal, + // StickerPackPreviewModal + stickerPackPreviewId, + renderStickerPreviewModal, // StoriesSettings isStoriesSettingsVisible, renderStoriesSettings, @@ -158,5 +164,9 @@ export function GlobalModalContainer({ return renderStoriesSettings(); } + if (stickerPackPreviewId) { + return renderStickerPreviewModal(); + } + return null; } diff --git a/ts/components/stickers/StickerManager.tsx b/ts/components/stickers/StickerManager.tsx index feea1dcd6..5032c33db 100644 --- a/ts/components/stickers/StickerManager.tsx +++ b/ts/components/stickers/StickerManager.tsx @@ -68,7 +68,7 @@ export const StickerManager = React.memo(function StickerManagerInner({ unknown; + readonly closeStickerPackPreview: () => unknown; readonly downloadStickerPack: ( packId: string, packKey: string, @@ -76,7 +76,7 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner( props: Props ) { const { - onClose, + closeStickerPackPreview, pack, i18n, downloadStickerPack, @@ -119,9 +119,9 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner( React.useEffect(() => { if (!pack) { - onClose(); + closeStickerPackPreview(); } - }, [pack, onClose]); + }, [pack, closeStickerPackPreview]); const isInstalled = Boolean(pack && pack.status === 'installed'); const handleToggleInstall = React.useCallback(() => { @@ -132,16 +132,16 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner( setConfirmingUninstall(true); } else if (pack.status === 'ephemeral') { downloadStickerPack(pack.id, pack.key, { finalStatus: 'installed' }); - onClose(); + closeStickerPackPreview(); } else { installStickerPack(pack.id, pack.key); - onClose(); + closeStickerPackPreview(); } }, [ downloadStickerPack, installStickerPack, isInstalled, - onClose, + closeStickerPackPreview, pack, setConfirmingUninstall, ]); @@ -152,13 +152,13 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner( } uninstallStickerPack(pack.id, pack.key); setConfirmingUninstall(false); - // onClose is called by + // closeStickerPackPreview is called by 's onClose }, [uninstallStickerPack, setConfirmingUninstall, pack]); React.useEffect(() => { const handler = ({ key }: KeyboardEvent) => { if (key === 'Escape') { - onClose(); + closeStickerPackPreview(); } }; @@ -167,15 +167,15 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner( return () => { document.removeEventListener('keydown', handler); }; - }, [onClose]); + }, [closeStickerPackPreview]); const handleClickToClose = React.useCallback( (e: React.MouseEvent) => { if (e.target === e.currentTarget) { - onClose(); + closeStickerPackPreview(); } }, - [onClose] + [closeStickerPackPreview] ); return root @@ -192,7 +192,7 @@ export const StickerPreviewModal = React.memo(function StickerPreviewModalInner(