fix: modal escape event (#92)

immich-app · Jan 22, 2025 · 44b69dc · 44b69dc
1 parent da91676
commit 44b69dc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
@@ -13,7 +13,7 @@
 	import { type Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
 
-	type Props = Dialog.RootProps & {
+	type Props = {
 		title: string;
 		size?: ModalSize;
 		class?: string;
@@ -26,11 +26,10 @@
 	let {
 		title,
 		size = 'medium',
-		open = $bindable(true),
+		open = true,
 		onClose,
 		class: className,
 		children,
-		...restProps
 	}: Props = $props();
 
 	const modalStyles = tv({
@@ -51,14 +50,14 @@
 	const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
 	const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
 
-	const handleClose = () => {
-		open = false;
-		onClose?.();
-		restProps?.onOpenChange?.(false);
+	const onChange = (value: boolean) => {
+		if (!value) {
+			onClose?.();
+		}
 	};
 </script>
 
-<Dialog.Root bind:open {...restProps}>
+<Dialog.Root {open} onOpenChange={onChange}>
 	<Dialog.Portal>
 		<Dialog.Overlay class="absolute left-0 top-0 flex h-dvh w-screen backdrop-blur" />
 		<Dialog.Content
@@ -71,7 +70,9 @@
 					<CardHeader class="border-0 py-2">
 						<div class="flex items-center justify-between">
 							<CardTitle>{title}</CardTitle>
-							<CloseButton size="large" onclick={handleClose} />
+							<Dialog.Close>
+								<CloseButton size="large" onclick={() => onChange(false)} />
+							</Dialog.Close>
 						</div>
 					</CardHeader>
 

diff --git a/src/routes/components/modal/BasicExample.svelte b/src/routes/components/modal/BasicExample.svelte
@@ -7,8 +7,10 @@
 
 <Button onclick={() => (open = true)}>Open</Button>
 
-<Modal title="Modal Title" bind:open>
-	<ModalBody>
-		<Lorem />
-	</ModalBody>
-</Modal>
+{#if open}
+	<Modal title="Modal Title" onClose={() => (open = false)}>
+		<ModalBody>
+			<Lorem />
+		</ModalBody>
+	</Modal>
+{/if}
diff --git a/src/routes/components/modal/SizeExample.svelte b/src/routes/components/modal/SizeExample.svelte
@@ -30,21 +30,23 @@
 	<Button onclick={() => handleOpen('full')}>Full</Button>
 </HStack>
 
-<Modal title="Modal Title" {size} bind:open>
-	<ModalBody>
-		<Stack gap={4}>
-			<Text><Lorem /></Text>
-			<Text><Lorem /></Text>
-			<Text><Lorem /></Text>
-			<Text><Lorem /></Text>
-			<Text><Lorem /></Text>
-			<Text><Lorem /></Text>
-		</Stack>
-	</ModalBody>
-	<ModalFooter>
-		<div class="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
-			<Button onclick={handleClose} shape="round">Button 1</Button>
-			<Button onclick={handleClose} shape="round" color="secondary">Button 2</Button>
-		</div>
-	</ModalFooter>
-</Modal>
+{#if open}
+	<Modal title="Modal Title" {size} onClose={() => (open = false)}>
+		<ModalBody>
+			<Stack gap={4}>
+				<Text><Lorem /></Text>
+				<Text><Lorem /></Text>
+				<Text><Lorem /></Text>
+				<Text><Lorem /></Text>
+				<Text><Lorem /></Text>
+				<Text><Lorem /></Text>
+			</Stack>
+		</ModalBody>
+		<ModalFooter>
+			<div class="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+				<Button onclick={handleClose} shape="round">Button 1</Button>
+				<Button onclick={handleClose} shape="round" color="secondary">Button 2</Button>
+			</div>
+		</ModalFooter>
+	</Modal>
+{/if}