Merge pull request #38 from appwrite/feat-trim-text-tooltip

feat: created trim component

src/lib/components/index.ts

@@ -33,5 +33,6 @@ export { default as Code } from './code.svelte';
 export { default as Json } from './json.svelte';
 export { default as CustomId } from './customId.svelte';
 export { default as Secret } from './secret.svelte';
+export { default as Trim } from './trim.svelte';
 export { default as Tabs } from './tabs.svelte';
 export { default as Tab } from './tab.svelte';

src/lib/components/tabs.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+    import { throttle } from '$lib/helpers/functions';
+
     let showLeft = false;
     let showRight = false;
     let tabsList: HTMLUListElement;
 
-    const slide = (direction: 'left' | 'right') => {
+    function slide(direction: 'left' | 'right') {
         let scrollCompleted = 0;
         let slideVar = setInterval(() => {
             if (direction == 'left') {
@@ -16,30 +18,16 @@
                 clearInterval(slideVar);
             }
         }, 10);
-    };
+    }
 
-    //TODO: implement this directly into onScroll
-    const throttle = (fn: () => void, delay: number) => {
-        let timeout = false;
-        return () => {
-            if (!timeout) {
-                timeout = true;
-                fn.apply(this);
-                setTimeout(() => {
-                    timeout = false;
-                }, delay);
-            }
-        };
-    };
-
-    const onScroll = () => {
+    function onScroll() {
         if (!tabsList) {
             return;
         }
         const { offsetWidth, scrollLeft, scrollWidth } = tabsList;
         showLeft = scrollLeft > 10;
         showRight = scrollLeft < scrollWidth - offsetWidth - 10;
-    };
+    }
 </script>
 
 <svelte:window on:resize={throttle(onScroll, 25)} />

src/lib/components/trim.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+    import { throttle } from '$lib/helpers/functions';
+    import { onMount } from 'svelte';
+
+    let showTooltip = false;
+    let container: HTMLSpanElement | null;
+
+    onMount(onResize);
+
+    function onResize() {
+        showTooltip = container.offsetWidth < container.scrollWidth;
+    }
+</script>
+
+<svelte:window on:resize={throttle(onResize, 250)} />
+
+<span class="text u-trim" bind:this={container}>
+    {#if showTooltip}
+        <span
+            use:tooltip={{
+                content: container.innerText
+            }}>
+            <slot />
+        </span>
+    {:else}
+        <span><slot /></span>
+    {/if}
+</span>

src/lib/elements/table/cellText.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+    import { Trim } from '$lib/components';
     export let title: string;
     export let showOverflow = false;
-    let data: HTMLSpanElement;
 </script>
 
 <div class="table-col " class:u-overflow-visible={showOverflow} data-title={title} role="cell">
-    <span bind:this={data} class="text u-trim" title={data?.innerText}><slot /></span>
+    <Trim><slot /></Trim>
 </div>

src/lib/helpers/functions.ts

@@ -0,0 +1,12 @@
+export const throttle = (fn: () => void, delay: number) => {
+    let timeout = false;
+    return () => {
+        if (!timeout) {
+            timeout = true;
+            fn.apply(this);
+            setTimeout(() => {
+                timeout = false;
+            }, delay);
+        }
+    };
+};