chore: simplifying styling and width computing

opendatasoft · Dec 13, 2024 · 742a511 · 742a511
1 parent 8df9038
commit 742a511
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 46 deletions.
diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
@@ -11,7 +11,6 @@
     export let emptyStateLabel: string | undefined;
 
     let hoveredRow: number | null;
-    export let isHorizontallyScrolled: boolean;
 </script>
 
 <tbody
@@ -36,7 +35,6 @@
                 {columns}
                 {rowProps}
                 {record}
-                {isHorizontallyScrolled}
                 setHovered={() => {
                     hoveredRow = rowIndex;
                 }}

diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -9,25 +9,22 @@
     import NumberFormat from 'components/Format/NumberFormat.svelte';
     import URLFormat from 'components/Format/URLFormat.svelte';
     import { DATA_FORMAT } from '../constants';
-    import { locale, stickyColumnsOffset, lastStickyColumn } from '../store';
+    import { isHorizontallyScrolled, locale, stickyColumnsOffset } from '../store';
     import type { Column } from '../types';
     import { isColumnOfType, getStickyClasses } from '../utils';
 
     export let rawValue: unknown;
     export let column: Column;
-    export let isHorizontallyScrolled: boolean;
 
     $: ({ dataFormat } = column);
     $: offset = $stickyColumnsOffset.get(column.key);
-    $: stickyClasses = getStickyClasses(
-        $stickyColumnsOffset.has(column.key),
-        column.key === $lastStickyColumn,
-        isHorizontallyScrolled
-    );
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
-<td style={isNil(offset) ? '' : `--sticky-offset: ${offset}px;`} class={stickyClasses}>
+<td
+    style={isNil(offset) ? '' : `--sticky-offset: ${offset}px;`}
+    class={getStickyClasses(column, $isHorizontallyScrolled)}
+>
     <div class={`table-data--${dataFormat}`}>
         {#if isValidRawValue(rawValue)}
             {#if isColumnOfType(column, DATA_FORMAT.boolean)}

diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte
@@ -2,7 +2,6 @@
     import type { Column } from '../types';
     import Th from './Th.svelte';
 
-    export let isHorizontallyScrolled: boolean;
     export let columns: Column[];
     export let extraButtonColumn = false;
 </script>
@@ -13,7 +12,7 @@
             <th />
         {/if}
         {#each columns as column (column.key)}
-            <Th {column} dataFormat={column.dataFormat} {isHorizontallyScrolled} />
+            <Th {column} dataFormat={column.dataFormat} />
         {/each}
     </tr>
 </thead>

diff --git a/packages/visualizations/src/components/Table/Headers/Th.svelte b/packages/visualizations/src/components/Table/Headers/Th.svelte
@@ -1,29 +1,23 @@
 <script lang="ts">
     import type { Column, DataFormat } from '../types';
-    import { stickyColumnsWidth, stickyColumnsOffset, lastStickyColumn } from '../store';
+    import { stickyColumnsWidth, stickyColumnsOffset, isHorizontallyScrolled } from '../store';
     import { getStickyClasses } from '../utils';
     import SortButton from './SortButton.svelte';
 
     export let column: Column;
     export let dataFormat: DataFormat;
-    export let isHorizontallyScrolled: boolean;
 
     let clientWidth: number;
 
     // Only updates columns that have been initialized after a reset in Table.svelte
     $: if ($stickyColumnsWidth.has(column.key)) {
         stickyColumnsWidth.updateColumn(column.key, clientWidth);
     }
-    $: stickyClasses = getStickyClasses(
-        $stickyColumnsWidth.has(column.key),
-        column.key === $lastStickyColumn,
-        isHorizontallyScrolled
-    );
 </script>
 
 <th
     style={`--sticky-offset: ${$stickyColumnsOffset.get(column.key)}px`}
-    class={`table-header--${dataFormat} ${stickyClasses}`}
+    class={`table-header--${dataFormat} ${getStickyClasses(column, $isHorizontallyScrolled)}`}
     bind:clientWidth
 >
     {#if column.onClick}

diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
@@ -8,7 +8,6 @@
     export let record: Record<string, unknown>;
     export let isHovered = false;
     export let setHovered: () => void;
-    export let isHorizontallyScrolled: boolean;
 
     $: ({ onClick, onMouseEnter, onMouseLeave, actionAriaLabel } = rowProps || {});
     $: handleMouseEnter = (e: HoverEvent<HTMLTableRowElement>) => {
@@ -48,7 +47,7 @@
         </td>
     {/if}
     {#each columns as column}
-        <Cell rawValue={record[column.key]} {column} {isHorizontallyScrolled} />
+        <Cell rawValue={record[column.key]} {column} />
     {/each}
 </tr>
 

diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
@@ -4,7 +4,7 @@
     import type { Column, RowProps } from './types';
     import Headers from './Headers';
     import Body from './Body.svelte';
-    import { stickyColumnsWidth } from './store';
+    import { stickyColumnsWidth, isHorizontallyScrolled } from './store';
 
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
@@ -15,22 +15,14 @@
 
     const tableId = `table-${generateId()}`;
 
-    let isHorizontallyScrolled = false;
     let scrollBox: HTMLDivElement;
     let sortedStickyColumns: Column[] = [];
 
     function handleScroll() {
-        isHorizontallyScrolled =
+        $isHorizontallyScrolled =
             document.dir === 'rtl' ? scrollBox?.scrollLeft < 0 : scrollBox?.scrollLeft > 0;
     }
 
-    $: sortedStickyColumns = [...columns].sort((colA, colB) => {
-        if (Boolean(colA?.sticky) === Boolean(colB?.sticky)) {
-            return 0;
-        }
-        return colA?.sticky ? -1 : 1;
-    });
-
     // resets scroll when changing columns parameters
     $: if (columns && scrollBox) {
         scrollBox.scrollLeft = 0;
@@ -41,28 +33,23 @@
             return colA?.sticky ? -1 : 1;
         });
         stickyColumnsWidth.reset();
-        sortedStickyColumns
-            .filter((col) => col?.sticky)
-            .forEach((col) => {
+        sortedStickyColumns.forEach((col) => {
+            if (col?.sticky) {
                 stickyColumnsWidth.updateColumn(col.key, 0);
-            });
+            }
+        });
     }
 </script>
 
 <div class="scrollbox" bind:this={scrollBox} on:scroll={handleScroll}>
     <table aria-describedby={description ? tableId : undefined}>
-        <Headers
-            columns={sortedStickyColumns}
-            {isHorizontallyScrolled}
-            extraButtonColumn={Boolean(rowProps?.onClick)}
-        />
+        <Headers columns={sortedStickyColumns} extraButtonColumn={Boolean(rowProps?.onClick)} />
         <Body
             {records}
             columns={sortedStickyColumns}
             {rowProps}
             {emptyStateLabel}
             {loadingRowsNumber}
-            {isHorizontallyScrolled}
         />
     </table>
 </div>

diff --git a/packages/visualizations/src/components/Table/store.ts b/packages/visualizations/src/components/Table/store.ts
@@ -36,3 +36,5 @@ export const stickyColumnsOffset = derived(stickyColumnsWidth, ($widths) => {
 export const lastStickyColumn = derived(stickyColumnsWidth, ($widths) =>
     [...$widths.keys()].at(-1)
 );
+
+export const isHorizontallyScrolled = writable(false);
diff --git a/packages/visualizations/src/components/Table/utils.ts b/packages/visualizations/src/components/Table/utils.ts
@@ -1,9 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { get } from 'svelte/store';
 import type { DataFormat, Column, ColumnOfType } from './types';
+import { lastStickyColumn } from './store';
 
-export const getStickyClasses = (sticky: boolean, lastSticky: boolean, scrolled: boolean) =>
-    `${sticky && 'sticky'} 
-    ${lastSticky && 'isLastSticky'} 
-    ${scrolled && 'isHorizontallyScrolled'}`;
+export const getStickyClasses = (column: Column, scrolled: boolean) => `
+    ${column.sticky && 'sticky'} 
+    ${column.key === get(lastStickyColumn) && 'isLastSticky'} 
+    ${scrolled && 'isHorizontallyScrolled'}
+`;
 
 export function isColumnOfType<K extends DataFormat>(
     column: Column,