Merge pull request #51 from HouseOfAngular/feat/add-hideOnEsc-global

Author: NetanelBasal

README.md

@@ -87,6 +87,7 @@ variation looks like:
 
 ```ts
 export const tooltipVariation = {
+  hideOnEscape: false,
   theme: null,
   arrow: false,
   animation: 'scale',

cypress/integration/helipopper.spec.ts

@@ -96,5 +96,12 @@ describe('@ngneat/helipopper', () => {
         .get(popperSelector)
         .should('not.exist');
     });
+
+    it('should hide on Escape when variation have hideOnEscape property', () => {
+      cy.get('.btn-container button[variation="hideOnEscape"]')
+        .click({ force: true })
+        .get(popperSelector)
+        .should('not.exist');
+    });
   });
 });

projects/ngneat/helipopper/src/lib/defaults.ts

@@ -2,7 +2,12 @@ import { TippyConfig } from './tippy.types';
 
 type Variation = TippyConfig['variations'][0];
 
+const defaultsProps: Variation = {
+  hideOnEscape: false
+};
+
 export const tooltipVariation: Variation = {
+  ...defaultsProps,
   theme: null,
   arrow: false,
   animation: 'scale',
@@ -11,6 +16,7 @@ export const tooltipVariation: Variation = {
 };
 
 export const popperVariation: Variation = {
+  ...defaultsProps,
   theme: 'light',
   arrow: true,
   offset: [0, 10],
@@ -21,6 +27,7 @@ export const popperVariation: Variation = {
 
 export function withContextMenuVariation(baseVariation: Variation): Variation {
   return {
+    ...defaultsProps,
     ...baseVariation,
     placement: 'right-start',
     trigger: 'manual',

projects/ngneat/helipopper/src/lib/tippy.directive.ts

@@ -218,7 +218,9 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
         onShow: instance => {
           this.zone.run(() => {
             this.instance.setContent(this.resolveContent());
-            this.hideOnEscape && this.handleEscapeButton();
+            if (this.hideOnEscape || this.props.hideOnEscape) {
+              this.handleEscapeButton();
+            }
           });
           if (this.useHostWidth) {
             // Don't access `hostWidth` multiple times since it's a getter that calls `getBoundingClientRect()`,

projects/ngneat/helipopper/src/lib/tippy.types.ts

@@ -31,7 +31,9 @@ export const TIPPY_CONFIG = new InjectionToken<Partial<TippyConfig>>('Tippy conf
 export const TIPPY_REF = new InjectionToken('TIPPY_REF');
 
 export type TippyInstance = Instance;
-export type TippyProps = Props;
+export interface TippyProps extends Props {
+  hideOnEscape: boolean;
+}
 
 export interface TippyConfig extends TippyProps {
   variations: Record<string, Partial<TippyProps>>;

src/app/app.component.html

@@ -262,4 +262,16 @@ <h6>Menu</h6>
       </ng-template>
     </div>
   </div>
+
+  <hr />
+
+  <div>
+    <h6>Hide on Escape by global config</h6>
+
+    <div class="hideOnEscape btn-container">
+      <button tippy="Press Escape Button" variation="hideOnEscape" class="btn btn-outline-secondary" type="button">
+        Tooltip
+      </button>
+    </div>
+  </div>
 </ng-container>

src/app/app.module.ts

@@ -1,11 +1,11 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { ReactiveFormsModule } from "@angular/forms";
-import { ExampleComponent } from "./example/example.component";
-import { popperVariation, TippyModule, tooltipVariation, withContextMenuVariation } from "@ngneat/helipopper";
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ExampleComponent } from './example/example.component';
+import { popperVariation, TippyModule, tooltipVariation, withContextMenuVariation } from '@ngneat/helipopper';
 
 @NgModule({
   declarations: [AppComponent, ExampleComponent],
@@ -14,20 +14,24 @@ import { popperVariation, TippyModule, tooltipVariation, withContextMenuVariatio
     AppRoutingModule,
     ReactiveFormsModule,
     TippyModule.forRoot({
-      defaultVariation: "tooltip",
+      defaultVariation: 'tooltip',
       variations: {
         tooltip: tooltipVariation,
         popper: popperVariation,
         menu: {
           ...popperVariation,
-          appendTo: "parent",
+          appendTo: 'parent',
           arrow: false,
           offset: [0, 0]
         },
         contextMenu: withContextMenuVariation(popperVariation),
         popperBorder: {
           ...popperVariation,
-          theme: "light-border"
+          theme: 'light-border'
+        },
+        hideOnEscape: {
+          ...tooltipVariation,
+          hideOnEscape: true
         }
       }
     })