feat: 🎸 support class name property when using the service

ngneat · May 24, 2021 · 0a8218b · 0a8218b
1 parent 254cfbb
commit 0a8218b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/projects/ngneat/helipopper/src/lib/tippy.service.ts b/projects/ngneat/helipopper/src/lib/tippy.service.ts
@@ -1,11 +1,11 @@
-import { Inject, Injectable, Injector } from "@angular/core";
-import tippy from "tippy.js";
-import { isComponent, isTemplateRef, ViewService } from "@ngneat/overview";
-import { Content } from "@ngneat/overview";
-import { CreateOptions, TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance } from "./tippy.types";
-import { onlyTippyProps } from "./utils";
+import { Inject, Injectable, Injector } from '@angular/core';
+import tippy from 'tippy.js';
+import { isComponent, isTemplateRef, ViewService } from '@ngneat/overview';
+import { Content } from '@ngneat/overview';
+import { CreateOptions, TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance } from './tippy.types';
+import { onlyTippyProps } from './utils';
 
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class TippyService {
   constructor(
     @Inject(TIPPY_CONFIG) private globalConfig: TippyConfig,
@@ -41,7 +41,12 @@ export class TippyService {
       },
       ...onlyTippyProps(this.globalConfig),
       ...this.globalConfig.variations[options.variation || this.globalConfig.defaultVariation],
-      ...onlyTippyProps(options)
+      ...onlyTippyProps(options),
+      onCreate: instance => {
+        options.className && instance.popper.classList.add(options.className);
+        this.globalConfig.onCreate?.(instance);
+        options?.onCreate(instance);
+      }
     };
 
     return tippy(host, config);

diff --git a/projects/ngneat/helipopper/src/lib/tippy.types.ts b/projects/ngneat/helipopper/src/lib/tippy.types.ts
@@ -1,9 +1,10 @@
-import { Instance, Props } from "tippy.js";
-import { ElementRef, InjectionToken } from "@angular/core";
-import { ViewOptions } from "@ngneat/overview";
+import { Instance, Props } from 'tippy.js';
+import { ElementRef, InjectionToken } from '@angular/core';
+import { ViewOptions } from '@ngneat/overview';
 
 export interface CreateOptions extends Partial<TippyProps>, ViewOptions {
   variation: string;
+  className: string;
 }
 
 export type NgChanges<Component extends object, Props = ExcludeFunctions<Component>> = {
@@ -21,20 +22,20 @@ type MarkFunctionPropertyNames<Component> = {
 
 type ExcludeFunctions<T extends object> = Pick<T, MarkFunctionPropertyNames<T>>;
 
-export const TIPPY_CONFIG = new InjectionToken<Partial<TippyConfig>>("Tippy config", {
-  providedIn: "root",
+export const TIPPY_CONFIG = new InjectionToken<Partial<TippyConfig>>('Tippy config', {
+  providedIn: 'root',
   factory() {
     return {};
   }
 });
-export const TIPPY_REF = new InjectionToken("TIPPY_REF");
+export const TIPPY_REF = new InjectionToken('TIPPY_REF');
 
 export type TippyInstance = Instance;
 export type TippyProps = Props;
 
 export interface TippyConfig extends TippyProps {
   variations: Record<string, Partial<TippyProps>>;
-  defaultVariation: keyof TippyConfig["variations"];
+  defaultVariation: keyof TippyConfig['variations'];
   beforeRender?: (text: string) => string;
 }