Adds global configuration option (#54)

* Adds global configuration option * Update ngx-tippy.directive.spec.ts * Add default config to NgxTippyGroupComponent & NgxTippySingletonComponent. * Added injection token to documentation. --------- Co-authored-by: Rigó József Karsa <[email protected]>
farengeyt451 · Feb 5, 2024 · d8fe721 · d8fe721
1 parent afcb428
commit d8fe721
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 11 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/pages/props/props.component.html b/projects/ngx-tippy-demo/src/app/pages/props/props.component.html
@@ -118,4 +118,19 @@ <h1 class="tui-text_h3 tui-space_top-0">Applying properties</h1>
     </table>
   </div>
 
+  <h6
+    id="default_props"
+    class="tui-text_h6"
+  >
+    Default props
+  </h6>
+
+  <p class="tui-text_body-m-2">You may also provide default prop values at a provider scope level via the <em>NGX_TIPPY_CONFIG</em> injection token:</p>
+
+  <t-demo-code
+    *tuiLet="snippets.props_default as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
 </div>
diff --git a/projects/ngx-tippy-demo/src/app/pages/props/snippets.ts b/projects/ngx-tippy-demo/src/app/pages/props/snippets.ts
@@ -30,6 +30,23 @@ export class PropsComponent {
   };
 }`;
 
+const PROPS_DEFAULT = `import { NGX_TIPPY_CONFIG } from 'ngx-tippy-wrapper';
+
+@Component({
+  providers: [
+    {
+      provide: NGX_TIPPY_CONFIG,
+      useValue: {
+        delay: [0, 500],
+        theme: 'light',
+        arrow: false,
+      },
+    }
+  ]
+})
+export class DemoComponent {
+}`;
+
 export const SNIPPETS = {
   props_template: {
     snippet: PROPS_TEMPLATE_SN,
@@ -43,4 +60,8 @@ export const SNIPPETS = {
     snippet: PROPS_COMPONENT_2_SN,
     languages: ['typescript'],
   },
+  props_default: {
+    snippet: PROPS_DEFAULT,
+    languages: ['typescript'],
+  },
 };
diff --git a/projects/ngx-tippy-wrapper/src/fixtures/components/wrapper.component.ts b/projects/ngx-tippy-wrapper/src/fixtures/components/wrapper.component.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, NgModule, Provider, Type, ViewChild, ViewContainerRef } from '@angular/core';
 import { NgxTippyDirective } from '../../lib/ngx-tippy.directive';
 import { NgxTippyContent, NgxTippyProps } from '../../lib/ngx-tippy.interfaces';
 import { genericStyles } from '../styles/generic-styles';
@@ -42,9 +42,10 @@ export class WrapperComponent {
   public createInnerComponent(
     template: string,
     properties: TemplateTooltipComponent = {},
-    styles: string[] = genericStyles
+    styles: string[] = genericStyles,
+    providers: Provider[] = [],
   ) {
-    @Component({ template, styles })
+    @Component({ template, styles, providers })
     class TemplateComponent {
       public className!: string;
       public tippyName!: string;

diff --git a/projects/ngx-tippy-wrapper/src/lib/components/ngx-tippy-group.component.ts b/projects/ngx-tippy-wrapper/src/lib/components/ngx-tippy-group.component.ts
@@ -2,7 +2,7 @@ import { isPlatformServer } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular/core';
 import tippy from 'tippy.js';
 import { NgxTippyMessagesDict, NgxTippyProps } from '../ngx-tippy.interfaces';
-import { NGX_TIPPY_MESSAGES } from '../ngx-tippy.tokens';
+import { NGX_TIPPY_CONFIG, NGX_TIPPY_MESSAGES } from '../ngx-tippy.tokens';
 
 /**
  * Different tooltip content to many different elements, but only one tippy instance
@@ -21,7 +21,8 @@ export class NgxTippyGroupComponent implements AfterViewInit {
 
   constructor(
     @Inject(PLATFORM_ID) private platform: Object,
-    @Inject(NGX_TIPPY_MESSAGES) private messagesDict: NgxTippyMessagesDict
+    @Inject(NGX_TIPPY_MESSAGES) private messagesDict: NgxTippyMessagesDict,
+    @Inject(NGX_TIPPY_CONFIG) private ngxTippyConfig: NgxTippyProps,
   ) {}
 
   ngAfterViewInit() {
@@ -41,6 +42,9 @@ export class NgxTippyGroupComponent implements AfterViewInit {
   }
 
   initTippy(tooltips: HTMLElement[]) {
-    tippy(tooltips, this.groupedProps);
+    tippy(tooltips, {
+      ...this.ngxTippyConfig,
+      ...this.groupedProps,
+    });
   }
 }
diff --git a/projects/ngx-tippy-wrapper/src/lib/components/ngx-tippy-singleton.component.ts b/projects/ngx-tippy-wrapper/src/lib/components/ngx-tippy-singleton.component.ts
@@ -5,10 +5,11 @@ import {
   NgxSingletonProps,
   NgxTippyInstance,
   NgxTippyMessagesDict,
+  NgxTippyProps,
   NgxTippySingletonInstance,
   TippyHTMLElement,
 } from '../ngx-tippy.interfaces';
-import { NGX_TIPPY_MESSAGES } from '../ngx-tippy.tokens';
+import { NGX_TIPPY_CONFIG, NGX_TIPPY_MESSAGES } from '../ngx-tippy.tokens';
 import { NgxTippyService } from '../services';
 
 /**
@@ -33,7 +34,8 @@ export class NgxTippySingletonComponent implements AfterViewInit, OnDestroy {
   constructor(
     @Inject(PLATFORM_ID) private platform: Object,
     private ngxTippyService: NgxTippyService,
-    @Inject(NGX_TIPPY_MESSAGES) private messagesDict: NgxTippyMessagesDict
+    @Inject(NGX_TIPPY_MESSAGES) private messagesDict: NgxTippyMessagesDict,
+    @Inject(NGX_TIPPY_CONFIG) private ngxTippyConfig: NgxTippyProps,
   ) {}
 
   ngAfterViewInit() {
@@ -72,7 +74,10 @@ export class NgxTippySingletonComponent implements AfterViewInit, OnDestroy {
   }
 
   private initTippySingletonEntry(childrenSingletonInstances: NgxTippyInstance[]) {
-    this.singletonInstance = createSingleton(childrenSingletonInstances, this.singletonProps);
+    this.singletonInstance = createSingleton(childrenSingletonInstances, {
+      ...this.ngxTippyConfig,
+      ...this.singletonProps,
+    });
     this.writeSingletonInstanceToStorage(this.singletonInstance);
   }
 

diff --git a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts
@@ -23,6 +23,7 @@ import {
 } from './ngx-tippy.interfaces';
 import { NgxTippyService, NgxViewService } from './services';
 import { setTemplateVisible } from './utils';
+import { NGX_TIPPY_CONFIG } from './ngx-tippy.tokens';
 
 @Directive({
   selector: '[ngxTippy]',
@@ -43,7 +44,8 @@ export class NgxTippyDirective implements OnInit, OnDestroy {
     private ngxTippyService: NgxTippyService,
     private ngxViewService: NgxViewService,
     private viewContainerRef: ViewContainerRef,
-    @Inject(PLATFORM_ID) private platform: Object
+    @Inject(PLATFORM_ID) private platform: Object,
+    @Inject(NGX_TIPPY_CONFIG) private ngxTippyConfig: NgxTippyProps,
   ) {}
 
   ngOnInit() {
@@ -73,6 +75,7 @@ export class NgxTippyDirective implements OnInit, OnDestroy {
     const tippyElement = viewRef.getElement();
 
     const tInstance = tippy(tippyTarget, {
+      ...(this.ngxTippyConfig),
       ...(this.tippyProps || {}),
       ...(tippyElement && { content: tippyElement }),
     });

diff --git a/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.tokens.ts b/projects/ngx-tippy-wrapper/src/lib/ngx-tippy.tokens.ts
@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { messagesDict, tippyFakeInstance } from './consts';
+import { NgxTippyProps } from './ngx-tippy.interfaces';
 
 export const NGX_TIPPY_MESSAGES = new InjectionToken<{ [key: string]: string }>('NGX_TIPPY_MESSAGES', {
   providedIn: 'root',
@@ -9,3 +10,8 @@ export const TIPPY_FAKE_INSTANCE = new InjectionToken<object>('TIPPY_FAKE_INSTAN
   providedIn: 'root',
   factory: () => tippyFakeInstance,
 });
+
+export const NGX_TIPPY_CONFIG = new InjectionToken<NgxTippyProps>('NGX_TIPPY_CONFIG', {
+  providedIn: 'root',
+  factory: () => ({}),
+});
diff --git a/projects/ngx-tippy-wrapper/src/public-api.ts b/projects/ngx-tippy-wrapper/src/public-api.ts
@@ -18,3 +18,4 @@ export {
 } from './lib/ngx-tippy.interfaces';
 export { NgxTippyModule } from './lib/ngx-tippy.module';
 export { NgxTippyService } from './lib/services';
+export { NGX_TIPPY_CONFIG } from './lib/ngx-tippy.tokens';
diff --git a/projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy.directive.spec.ts b/projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy.directive.spec.ts
@@ -14,7 +14,7 @@ import {
 import { messagesDict, tippyFakeInstance } from '../lib/consts';
 import { NgxTippyDirective } from '../lib/ngx-tippy.directive';
 import { NgxTippyProps } from '../lib/ngx-tippy.interfaces';
-import { NGX_TIPPY_MESSAGES, TIPPY_FAKE_INSTANCE } from '../lib/ngx-tippy.tokens';
+import { NGX_TIPPY_CONFIG, NGX_TIPPY_MESSAGES, TIPPY_FAKE_INSTANCE } from '../lib/ngx-tippy.tokens';
 import { NgxTippyService } from '../lib/services';
 
 type MEvents =
@@ -288,6 +288,49 @@ describe('Directive: NgxTippyDirective', () => {
       expect(backgroundColor).toBe(COLOR_WHITE);
     });
 
+    it('should inherit provided configuration', () => {
+      // Arrange
+      component.createInnerComponent(
+        `
+        <div class="test">
+          <button
+            class="test__btn"
+            ngxTippy
+            data-tippy-content="Tooltip content"
+          >
+            Element with tooltip
+          </button>
+        </div>
+      `,
+        {},
+        [],
+        [{
+          provide: NGX_TIPPY_CONFIG,
+          useValue: {
+            appendTo: 'parent',
+            theme: 'light',
+            arrow: false,
+          },
+        }]
+      );
+
+      // Act
+      fixture.detectChanges();
+
+      tooltipDebugEl = fixture.debugElement.query(By.directive(NgxTippyDirective));
+      tooltipDebugEl.nativeElement.dispatchEvent(createMouseEvent('mouseenter'));
+
+      fixture.detectChanges();
+
+      // Assert
+      const tippyBox = fixture.debugElement.query(By.css(TOOLTIP_BOX_DIV));
+      const tooltipArrow = fixture.debugElement.query(By.css(TOOLTIP_ARROW_DIV));
+      const { backgroundColor } = getComputedStyle(tippyBox.nativeElement);
+
+      expect(tooltipArrow).toBeNull();
+      expect(backgroundColor).toBe(COLOR_WHITE);
+    });
+
     it('should set content passed through data attribute', () => {
       // Arrange
       const content = 'Tooltip content passed through data attribute';