Merge pull request #118 from ieedan/fix-command-menu

fix: `hooks/use-boolean` add function bindings
ieedan · Feb 21, 2025 · 870d7ff · 870d7ff
2 parents 0ca273d + 322b825
commit 870d7ff
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 16 deletions.
diff --git a/src/lib/components/docs/command/command.svelte b/src/lib/components/docs/command/command.svelte
@@ -4,13 +4,11 @@
 	import { goto } from '$app/navigation';
 	import { commandContext } from '$lib/context';
 	import { map } from '$lib/map';
+
+	const commandState = commandContext.get();
 </script>
 
-<Modal
-	bind:open={() => commandContext.get(), (val) => commandContext.set(val)}
-	class="p-0"
-	hideClose
->
+<Modal bind:open={commandState.current} class="p-0" hideClose>
 	<Command.Root>
 		<Command.Input placeholder="Search for extras..." />
 		<Command.List class="min-h-[300px]">
@@ -21,7 +19,7 @@
 						<Command.Item
 							onclick={async () => {
 								await goto(route.href);
-								commandContext.set(false);
+								commandState.setFalse();
 							}}
 						>
 							{route.name}

diff --git a/src/lib/components/search-button.svelte b/src/lib/components/search-button.svelte
@@ -10,14 +10,14 @@
 	};
 
 	let { class: className }: Props = $props();
+
+	const commandState = commandContext.get();
 </script>
 
 <Button
 	variant="outline"
 	class={cn('flex w-full place-items-center justify-between px-2', className)}
-	onclick={() => {
-		commandContext.set(true);
-	}}
+	onclick={commandState.setTrue}
 >
 	<span class="flex place-items-center gap-2 text-muted-foreground">
 		<Search class="inline size-4" />

diff --git a/src/lib/context.ts b/src/lib/context.ts
@@ -1,3 +1,4 @@
 import { Context } from 'runed';
+import type { UseBoolean } from './hooks/use-boolean.svelte';
 
-export const commandContext = new Context<boolean>('command-menu-context');
+export const commandContext = new Context<UseBoolean>('command-menu-context');
diff --git a/src/lib/hooks/use-boolean.svelte.ts b/src/lib/hooks/use-boolean.svelte.ts
@@ -22,6 +22,10 @@ export class UseBoolean {
 
 	constructor(defaultValue = false) {
 		this.#current = defaultValue;
+
+		this.toggle = this.toggle.bind(this);
+		this.setTrue = this.setTrue.bind(this);
+		this.setFalse = this.setFalse.bind(this);
 	}
 
 	/** Toggles the current state */
@@ -36,7 +40,7 @@ export class UseBoolean {
 
 	/** Sets the current state to false */
 	setFalse() {
-		this.#current = true;
+		this.#current = false;
 	}
 
 	get current() {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -19,10 +19,11 @@
 	import SearchButton from '$lib/components/search-button.svelte';
 	import { LightSwitch } from '$lib/components/ui/light-switch';
 	import { dev } from '$app/environment';
+	import { UseBoolean } from '$lib/hooks/use-boolean.svelte';
 
 	let { children } = $props();
 
-	commandContext.set(false);
+	const commandState = commandContext.set(new UseBoolean(false));
 
 	const getCurrentDoc = (
 		url: URL
@@ -50,9 +51,7 @@
 	use:shortcut={{
 		ctrl: true,
 		key: 'k',
-		callback: () => {
-			commandContext.set(true);
-		}
+		callback: commandState.setTrue
 	}}
 />
 

diff --git a/src/routes/hooks/use-boolean/+page.svelte b/src/routes/hooks/use-boolean/+page.svelte
@@ -29,7 +29,7 @@
 		code={`\<script lang="ts"\>
     import { UseBoolean } from '$lib/hooks/use-boolean.svelte';
 
-    const enabled = new UseBoolean();
+    const enabled = new UseBoolean(true);
 \<\/script\>
 
 <button onclick={enabled.setFalse}>