From 1f31fa90d42fe3414b8352cef6a674053595d876 Mon Sep 17 00:00:00 2001 From: Johannes Homeier Date: Tue, 7 Nov 2023 10:48:04 +0100 Subject: [PATCH] refactor(composables): move addClass to class utils --- libs/composables/class/src/add-class.spec.ts | 35 ------------------ libs/composables/class/src/add-class.ts | 14 ------- .../class/src/modifier-group.composable.ts | 2 +- .../class/src/modifier.composable.ts | 2 +- libs/composables/class/src/public-api.ts | 1 - .../class/src/utils/class.utils.spec.ts | 37 ++++++++++++++++++- .../class/src/utils/class.utils.ts | 16 ++++++++ 7 files changed, 54 insertions(+), 53 deletions(-) delete mode 100644 libs/composables/class/src/add-class.spec.ts delete mode 100644 libs/composables/class/src/add-class.ts diff --git a/libs/composables/class/src/add-class.spec.ts b/libs/composables/class/src/add-class.spec.ts deleted file mode 100644 index ed1e2aa..0000000 --- a/libs/composables/class/src/add-class.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { addClass } from './add-class'; - -@Component({ - template: '' -}) -class TestComponent { - constructor() { - addClass('test'); - } -} - -describe('addClass', () => { - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ TestComponent ] - }).compileComponents(); - - fixture = TestBed.createComponent(TestComponent); - - fixture.detectChanges(); - }); - - it('should be a function', () => { - expect(typeof addClass).toEqual('function'); - }); - - it('should add the class', () => { - expect(fixture.debugElement.classes['test']).toBeTruthy(); - }); -}); diff --git a/libs/composables/class/src/add-class.ts b/libs/composables/class/src/add-class.ts deleted file mode 100644 index 612e686..0000000 --- a/libs/composables/class/src/add-class.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ElementRef, inject, Renderer2 } from '@angular/core'; - -/** - * Adds the class to the host element. - * This function uses {@link inject} and has to be called in the injection context of a component or directive. - * - * @param clazz - The class to add. - */ -export const addClass = (clazz: string) => { - const element = inject(ElementRef).nativeElement; - const renderer = inject(Renderer2); - - renderer.addClass(element, clazz); -}; diff --git a/libs/composables/class/src/modifier-group.composable.ts b/libs/composables/class/src/modifier-group.composable.ts index 117675d..8e86bae 100644 --- a/libs/composables/class/src/modifier-group.composable.ts +++ b/libs/composables/class/src/modifier-group.composable.ts @@ -1,6 +1,6 @@ import { computed, inject, Signal, signal } from '@angular/core'; -import { addClass } from './add-class'; +import { addClass } from './utils/class.utils'; import { bindClasses } from './classes.composable'; import { BASE_CLASS } from './provide-base-class'; diff --git a/libs/composables/class/src/modifier.composable.ts b/libs/composables/class/src/modifier.composable.ts index 5363c3e..c84a992 100644 --- a/libs/composables/class/src/modifier.composable.ts +++ b/libs/composables/class/src/modifier.composable.ts @@ -1,6 +1,6 @@ import { inject, Signal, signal, WritableSignal } from '@angular/core'; -import { addClass } from './add-class'; +import { addClass } from './utils/class.utils'; import { bindClass } from './class.composable'; import { BASE_CLASS } from './provide-base-class'; diff --git a/libs/composables/class/src/public-api.ts b/libs/composables/class/src/public-api.ts index 8489716..274bc9c 100644 --- a/libs/composables/class/src/public-api.ts +++ b/libs/composables/class/src/public-api.ts @@ -1,4 +1,3 @@ -export * from './add-class'; export * from './class.composable'; export * from './classes.composable'; export * from './modifier.composable'; diff --git a/libs/composables/class/src/utils/class.utils.spec.ts b/libs/composables/class/src/utils/class.utils.spec.ts index 0ca2698..5ba5e15 100644 --- a/libs/composables/class/src/utils/class.utils.spec.ts +++ b/libs/composables/class/src/utils/class.utils.spec.ts @@ -1,4 +1,6 @@ -import { splitClasses } from './class.utils'; +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { addClass, splitClasses } from './class.utils'; describe('class utils', () => { @@ -29,4 +31,37 @@ describe('class utils', () => { }); }); }); + + describe('addClass', () => { + + @Component({ + template: '' + }) + class TestComponent { + constructor() { + addClass('test'); + } + } + + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }).compileComponents(); + + fixture = TestBed.createComponent(TestComponent); + + fixture.detectChanges(); + }); + + it('should be a function', () => { + expect(typeof addClass).toEqual('function'); + }); + + it('should add the class', () => { + expect(fixture.debugElement.classes['test']).toBeTruthy(); + }); + }); + }); diff --git a/libs/composables/class/src/utils/class.utils.ts b/libs/composables/class/src/utils/class.utils.ts index bd27100..ff9c54b 100644 --- a/libs/composables/class/src/utils/class.utils.ts +++ b/libs/composables/class/src/utils/class.utils.ts @@ -1,5 +1,8 @@ +import { ElementRef, inject, Renderer2 } from '@angular/core'; + const CLASS_SEPARATOR_REGEX = /\s+/; + /** * Splits the given classes into an array of classes. * @@ -12,3 +15,16 @@ export const splitClasses = (classes: string | string[] | null | undefined) => { return classes ? classes.split(CLASS_SEPARATOR_REGEX) : []; }; + +/** + * Adds the class to the host element. + * This function uses {@link inject} and has to be called in the injection context of a component or directive. + * + * @param clazz - The class to add. + */ +export const addClass = (clazz: string) => { + const element = inject(ElementRef).nativeElement; + const renderer = inject(Renderer2); + + renderer.addClass(element, clazz); +};