fix directory picker: value exported, make use of svelte:window, chan…

…ges classes to fix possible conflicts
appwrite · Nov 26, 2024 · 41e89b3 · 41e89b3
1 parent 04ff0b8
commit 41e89b3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte
@@ -9,19 +9,20 @@
     export let directories: Directory[];
     export let level = 0;
     export let containerWidth: number | undefined;
+    export let value: string;
     let radioInputs: HTMLInputElement[] = [];
 
     let thumbnailStates = directories.map(() => ({
         loading: true,
         error: false
     }));
 
-    function handleThumbnailLoad(index) {
+    function handleThumbnailLoad(index: number) {
         thumbnailStates[index].loading = false;
         thumbnailStates[index].error = false;
     }
 
-    function handleThumbnailError(index) {
+    function handleThumbnailError(index: number) {
         thumbnailStates[index].loading = false;
         thumbnailStates[index].error = true;
     }
@@ -39,7 +40,7 @@
     {@const hasChildren = !!children?.length}
     {@const thumb = thumbnailUrl}
 
-    <div class="container">
+    <div class="directory-item-container">
         <button
             class="folder"
             style={paddingLeftStyle}
@@ -55,7 +56,8 @@
                 <Radio
                     group="directory"
                     name="directory"
-                    size="small"
+                    size="s"
+                    bind:value
                     bind:radioInput={radioInputs[i]}
                 />
                 <div
@@ -68,10 +70,13 @@
                 <div class="meta">
                     <span
                         class="title"
-                        style={containerWidth &&
-                            `max-width: ${containerWidth - 100 - level * 40}px`}>{title}</span
+                        style={containerWidth
+                            ? `max-width: ${containerWidth - 100 - level * 40}px`
+                            : ''}>{title}</span
                     >
-                    <span class="fileCount">({fileCount} files)</span>
+                    {#if fileCount !== undefined}
+                        <span class="fileCount">({fileCount} files)</span>
+                    {/if}
                 </div>
             </div>
             <div class="thumbnail-container">
@@ -103,7 +108,7 @@
 {/each}
 
 <style>
-    .container {
+    .directory-item-container {
         width: 100%;
     }
     .folder {

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte b/v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createTreeView } from '@melt-ui/svelte';
-    import { setContext } from 'svelte';
+    import { onMount, setContext } from 'svelte';
 
     import type { Directory } from './index.js';
     import DirectoryItem from './DirectoryItem.svelte';
@@ -17,19 +17,13 @@
 
     export let directories: Directory[];
     export let isLoading = true;
+    export let value: string;
     let rootContainer: HTMLDivElement;
     let containerWidth: number | undefined;
-    monitorResize();
 
-    function monitorResize() {
-        window.addEventListener('resize', updateWidth);
-
-        return {
-            destroy() {
-                window.removeEventListener('resize', updateWidth);
-            }
-        };
-    }
+    onMount(() => {
+        updateWidth();
+    });
 
     function updateWidth() {
         containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
@@ -38,14 +32,20 @@
     $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
 </script>
 
-<div class="container" class:isLoading {...$tree} bind:this={rootContainer}>
-    {#if isLoading}<div class="loading-container">
+<svelte:window on:resize={updateWidth} />
+
+<div class="directory-container" class:isLoading {...$tree} bind:this={rootContainer}>
+    {#if isLoading}
+        <div class="loading-container">
             <Spinner /><span>Loading directory data...</span>
-        </div>{:else}<DirectoryItem {directories} {containerWidth} />{/if}
+        </div>
+    {:else}
+        <DirectoryItem {directories} {containerWidth} bind:value />
+    {/if}
 </div>
 
 <style>
-    .container {
+    .directory-container {
         width: 560px;
         max-width: 100%;
         height: 316px;

diff --git a/v2/pink-sb/src/lib/DirectoryPicker/index.ts b/v2/pink-sb/src/lib/DirectoryPicker/index.ts
@@ -2,8 +2,8 @@ export type Directory = {
     id: string;
     title: string;
     fullPath: string;
-    fileCount: number;
     thumbnailUrl: string;
+    fileCount?: number | undefined;
     children?: Directory[];
 };