diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte index 8583b9f8ac..6e73952b18 100644 --- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte +++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte @@ -247,7 +247,7 @@ > { it('should unnest arrays', () => { expect(cleanClass('class1', ['class2', 'class3'])).toBe('class1 class2 class3'); }); + + it('should unnest doubly nested arrays', () => { + expect(cleanClass('class1', [['class2a', 'class2b'], 'class3'])).toBe('class1 class2a class2b class3'); + }); }); describe('isDefined', () => { diff --git a/web/src/lib/index.ts b/web/src/lib/index.ts index 10f3deaadc..121087fdd3 100644 --- a/web/src/lib/index.ts +++ b/web/src/lib/index.ts @@ -3,8 +3,7 @@ import { twMerge } from 'tailwind-merge'; export const cleanClass = (...classNames: unknown[]) => { return twMerge( - classNames - .flatMap((className) => (Array.isArray(className) ? className : [className])) + flattenClass(classNames) .filter((className) => { if (!className || typeof className === 'boolean') { return false; @@ -16,6 +15,9 @@ export const cleanClass = (...classNames: unknown[]) => { ); }; +const flattenClass = (classNames: unknown[]): unknown[] => + classNames.flatMap((className) => (Array.isArray(className) ? flattenClass(className) : [className])); + export const isDefined = (value: T): value is NonNullable => value !== null && value !== undefined; export const getHeatmapRange = () => {