wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rewrites utils as ts

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-31 14:02:13 -07:00
parent d622258413
commit a5b93e5f53
Failed to extract signature
4 changed files with 65 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/@types/global.ts
View file

@ -48,10 +48,3 @@ export interface ScrollerStep {
*/
foregroundProps?: object;
}
/** Datum type for data that goes into the Table component */
type TableDatum = {
[key: string]: unknown;
searchStr?: string;
};
export type TableData = TableDatum[];

4
src/components/Table/Table.stories.svelte
View file

@ -30,7 +30,7 @@
}}
/>
<!-- <Story
<Story
name="Metadata"
args={{
width: 'normal',
@ -131,4 +131,4 @@
title: 'The Richest Women in the World',
source: 'Source: Forbes',
}}
/> -->
/>

82
src/components/Table/Table.svelte
View file

@ -1,5 +1,5 @@
<!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
<script lang="ts">
<script lang="ts" generics="T">
/** Import local helpers */
import Block from '../Block/Block.svelte';
import Pagination from './components/Pagination.svelte';
@ -8,12 +8,9 @@
import SearchInput from '../SearchInput/SearchInput.svelte';
import { filterArray, paginateArray, getOptions } from './utils';
// Types
import type { TableData } from '../@types/global';
interface Props {
/** Data for the table as an array of objects. */
data: TableData;
interface Props<T extends Record<string, unknown>> {
/** Data for the table as an array. */
data: T[];
/** A title that runs above the table. */
title?: string;
@ -65,7 +62,7 @@
dek,
notes,
source,
includedFields,
includedFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
truncated = false,
truncateLength = 5,
paginated = false,
@ -75,35 +72,35 @@
filterField,
filterLabel,
sortable = false,
sortField,
sortableFields,
sortField = Object.keys(data[0])[0],
sortableFields = Object.keys(data[0]).filter((f) => f !== 'searchStr'),
sortDirection = $bindable('ascending'),
fieldFormatters = {},
width = 'normal',
id = '',
class: cls = '',
}: Props = $props();
}: Props<Record<string, unknown>> = $props();
/** Derived variables */
let includedFieldsDerived = $derived.by(() => {
if (includedFields) return includedFields;
if (data.length > 0)
return Object.keys(data[0]).filter((f) => f !== 'searchStr');
return [];
});
// let includedFieldsDerived = $derived.by(() => {
// if (includedFields) return includedFields;
// if (data.length > 0)
// return Object.keys(data[0]).filter((f) => f !== 'searchStr');
// return [];
// });
let sortableFieldsDerived = $derived.by(() => {
if (sortableFields) return sortableFields;
if (data.length > 0)
return Object.keys(data[0]).filter((f) => f !== 'searchStr');
return [];
});
// let sortableFieldsDerived = $derived.by(() => {
// if (sortableFields) return sortableFields;
// if (data.length > 0)
// return Object.keys(data[0]).filter((f) => f !== 'searchStr');
// return [];
// });
let sortFieldDerived = $derived.by(() => {
if (sortField) return sortField;
if (data.length > 0) return Object.keys(data[0])[0];
return '';
});
// let sortFieldDerived = $derived.by(() => {
// if (sortField) return sortField;
// if (data.length > 0) return Object.keys(data[0])[0];
// return '';
// });
/** Set truncate, filtering and pagination configuration */
let showAll = $state(false);
@ -178,20 +175,12 @@
return sortedData;
});
// $effect(() => {
// console.log('includedFieldsDerived', includedFieldsDerived);
// console.log('sortableFieldsDerived', sortableFieldsDerived);
// console.log('sortFieldDerived', sortFieldDerived);
// console.log('sortedData', sortedData);
// console.log('currentPageData', currentPageData);
// });
/** Add the `searchStr` field to data */
let searchableData = $derived.by(() => {
return data.map((d) => {
return {
...d,
searchStr: includedFieldsDerived
searchStr: includedFields
.map((field) => d[field])
.join(' ')
.toLowerCase(),
@ -243,12 +232,11 @@
>
<thead class="table--thead">
<tr>
{#each includedFieldsDerived as field}
{#each includedFields as field}
<th
scope="col"
class="table--thead--th h4 pl-0 py-2 pr-2"
class:sortable={sortable &&
sortableFieldsDerived.includes(field)}
class:sortable={sortable && sortableFields.includes(field)}
class:sort-ascending={sortable &&
sortField === field &&
sortDirection === 'ascending'}
@ -259,7 +247,7 @@
onclick={handleSort}
>
{field}
{#if sortable && sortableFieldsDerived.includes(field)}
{#if sortable && sortableFields.includes(field)}
<div class="table--thead--sortarrow fml-1 avoid-clicks">
<SortArrow {sortDirection} active={sortField === field} />
</div>
@ -271,7 +259,7 @@
<tbody class="table--tbody">
{#each currentPageData as item, idx}
<tr data-row-index={idx}>
{#each includedFieldsDerived as field}
{#each includedFields as field}
<td
class="body-note pl-0 py-2 pr-2"
data-row-index={idx}
@ -285,7 +273,7 @@
{/each}
{#if searchable && searchText && currentPageData.length === 0}
<tr>
<td class="no-results" colspan={includedFieldsDerived.length}>
<td class="no-results" colspan={includedFields.length}>
No results found for "{searchText}"
</td>
</tr>
@ -295,7 +283,7 @@
<tfoot class="table--tfoot">
{#if notes}
<tr>
<td class="" colspan={includedFieldsDerived.length}>
<td class="" colspan={includedFields.length}>
<div class="fmt-2">
{@html notes}
</div>
@ -304,7 +292,7 @@
{/if}
{#if source}
<tr>
<td class="" colspan={includedFieldsDerived.length}>
<td class="" colspan={includedFields.length}>
<div class="fmt-1">
{@html source}
</div>
@ -343,10 +331,10 @@
<style lang="scss">
@use '../../scss/mixins' as mixins;
section.table {
.table {
overflow-x: auto;
}
section.table table {
.table table {
background-color: transparent;
border-collapse: separate;
border-spacing: 0;

52
src/components/Table/utils.ts
View file

@ -1,56 +1,60 @@
import type { TableData } from '../@types/global';
export function filterArray(
data: TableData,
export function filterArray<T extends { searchStr: string }>(
data: T[],
searchText: string,
filterField: string | undefined,
filterValue: string
filterField: keyof T,
filterValue: T[keyof T]
) {
if (searchText) {
data = data.filter((item) => {
return item.searchStr?.includes(searchText.toLowerCase());
return item.searchStr.includes(searchText.toLowerCase());
});
}
if (filterField && filterValue) {
if (filterValue) {
data = data.filter((item) => {
return item[filterField] === filterValue;
});
}
return data;
}
export function paginateArray(
array: TableData,
export function paginateArray<T>(
array: T[],
pageSize: number,
pageNumber: number
) {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
function uniqueAttr(array: TableData, attr: string) {
/**
* We specify the output type here by adding `string` to the union because we want to explicitly define the output array as accepting strings.
*
* This is to get rid of the type error from `attrList.unshift('All')`
*/
function uniqueAttr<T>(array: T[], attr: keyof T): (T[keyof T] | string)[] {
return array.map((e) => e[attr]).filter(unique);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function unique(value: any, index: number, array: TableData) {
console.log('unique', value, index, array);
function unique<T>(value: T, index: number, array: T[]) {
return array.indexOf(value) === index;
}
export function getOptions(data: TableData, attr: string) {
export function getOptions<T>(data: T[], attr: keyof T) {
// Get all the unique values in the provided field. Sort it.
const attrList = uniqueAttr(data, attr).sort((a, b) => {
// Throw errors if a and b are not strings.
// a and b should be strings since they are keys of T.
if (typeof a !== 'string' || typeof b !== 'string') {
throw new Error(`Expected string, got ${typeof a} and ${typeof b}`);
}
// @TODO - check if a and b need to be typed and sorted for non-strings
const attrList = uniqueAttr(data, attr).sort((a: string, b: string) =>
a.localeCompare(b)
);
return a.localeCompare(b);
});
console.log('attrList', attrList);
// Tack 'All' as the front as the first option.
// Tack 'All' at the start of `attrList`, making it the first option.
attrList.unshift('All');
// Convert the list into Option typed objects ready for our Select component
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return attrList.map((a: any) => ({ text: a, value: a }));
return attrList.map((a) => ({ text: a, value: a }));
}