improve examples and add docs for UseAutoScroll

ieedan · Jan 8, 2025 · 3614e56 · 3614e56
1 parent b8a5d46
commit 3614e56
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/src/lib/map.ts b/src/lib/map.ts
@@ -121,6 +121,16 @@ const map: Record<string, Route[]> = {
 			source: 'src/lib/actions/shortcut.svelte.ts'
 		}
 	],
+	Hooks: [
+		{
+			name: 'UseAutoScroll',
+			description:
+				'A hook to enable the creation of containers that automatically scroll to the bottom of their content.',
+			href: '/hooks/use-auto-scroll',
+			specifier: 'hooks/use-auto-scroll.svelte',
+			source: 'src/lib/hooks/use-auto-scroll.svelte.ts'
+		}
+	],
 	Utils: [
 		{
 			name: 'Context Provider',

diff --git a/src/routes/components/chat/basic.svelte b/src/routes/components/chat/basic.svelte
@@ -5,17 +5,11 @@
 	import { Info, Paperclip, Phone, Send, VideoIcon } from 'lucide-svelte';
 	import { Input } from '$lib/components/ui/input';
 	import * as data from './data';
-	import { formatShortTime } from './utils';
+	import { formatShortTime, initials } from './utils';
 
 	let message = $state('');
 
 	const messages = $state(data.messages);
-
-	const getInitials = (name: string) =>
-		name
-			.split(' ')
-			.map((n) => n[0])
-			.join('');
 </script>
 
 <div class="w-full border border-border">
@@ -24,7 +18,7 @@
 			<Avatar.Root>
 				<Avatar.Image src={data.friend.img} alt={data.friend.username} />
 				<Avatar.Fallback>
-					{getInitials(data.friend.name)}
+					{initials(data.friend.name)}
 				</Avatar.Fallback>
 			</Avatar.Root>
 			<div class="flex flex-col">
@@ -52,7 +46,7 @@
 				<Chat.BubbleAvatar>
 					<Chat.BubbleAvatarImage src={sender?.img} alt={sender?.username} />
 					<Chat.BubbleAvatarFallback>
-						{getInitials(sender?.name ?? '')}
+						{initials(sender?.name ?? '')}
 					</Chat.BubbleAvatarFallback>
 				</Chat.BubbleAvatar>
 				<Chat.BubbleMessage class="flex flex-col gap-1">
@@ -67,7 +61,7 @@
 			<Chat.BubbleAvatar>
 				<Chat.BubbleAvatarImage src={data.friend.img} alt={data.friend.username} />
 				<Chat.BubbleAvatarFallback>
-					{getInitials(data.friend.name)}
+					{initials(data.friend.name)}
 				</Chat.BubbleAvatarFallback>
 			</Chat.BubbleAvatar>
 			<Chat.BubbleMessage typing />
@@ -77,7 +71,7 @@
 		onsubmit={(e) => {
 			e.preventDefault();
 
-			messages.push({ message, senderId: '123456', sentAt: formatShortTime(new Date()) });
+			messages.push({ message, senderId: data.user.id, sentAt: formatShortTime(new Date()) });
 
 			message = '';
 		}}

diff --git a/src/routes/components/chat/data.ts b/src/routes/components/chat/data.ts
@@ -54,7 +54,7 @@ export const messages: Message[] = [
 	},
 	{
 		senderId: '654321',
-		message: 'Looking forward to using it in our next project!',
+		message: 'Looking forward to using it in my next project!',
 		sentAt: formatShortTime(new Date(baseTime.getTime() + 23 * 60000))
 	}
 ];

diff --git a/src/routes/components/chat/utils.ts b/src/routes/components/chat/utils.ts
@@ -5,3 +5,9 @@ export const formatShortTime = (date: Date) => {
 		hour12: true
 	});
 };
+
+export const initials = (name: string) =>
+	name
+		.split(' ')
+		.map((n) => n[0])
+		.join('');
diff --git a/src/routes/hooks/use-auto-scroll/+page.svelte b/src/routes/hooks/use-auto-scroll/+page.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Subheading } from '$lib/components/docs';
+	import Installation from '$lib/components/installation.svelte';
+	import { Code } from '$lib/components/ui/code';
+</script>
+
+<Installation specifier={'hooks/use-auto-scroll.svelte'} />
+<Subheading>Usage</Subheading>
+<p>Create a container that automatically scrolls to the bottom.</p>
+<Code
+	lang="svelte"
+	highlight={[2, 6, 10, 13, 14]}
+	code={`\<script lang="ts"\>
+    import { UseAutoScroll } from '$lib/hooks/use-auto-scroll.svelte';
+
+    let { children } = $props();
+
+    const autoScroll = new UseAutoScroll();
+\<\/script\>
+
+<div>
+    <div bind:this={autoScroll.ref}>
+        {@render children?.()}
+    </div>
+    {#if !autoScroll.isAtBottom}
+        <button onclick={() => autoScroll.scrollToBottom()}>
+            Scroll To Bottom
+        </button>
+    {/if}
+</div>`}
+/>