feat(tooltip): dynamic inputs support (#1184)

Closes #1052 #1159

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts

@@ -101,6 +101,7 @@ export class MockPositionBuilder {
  _connectedTo: ElementRef<any>;
  _position: NbPosition;
  _adjustment: NbAdjustment;
+ _offset: number;
 
  connectedTo(connectedTo: ElementRef<any>) {
  this._connectedTo = connectedTo;
@@ -117,6 +118,11 @@ export class MockPositionBuilder {
  return this;
  }
 
+ offset(offset) {
+ this._offset = offset;
+ return this;
+ }
+
  attach() {
  };
 
@@ -400,7 +406,7 @@ describe('dynamic-overlay-handler', () => {
  expect(positionBuilder._connectedTo).toBe(host1);
  expect(positionBuilder._position).toBe(NbPosition.TOP);
  expect(positionBuilder._adjustment).toBe(NbAdjustment.NOOP);
-
+ expect(positionBuilder._offset).toBe(0);
 
  configure().host(host2).rebuild();
  expect(triggerStrategyBuilder._host).toBe(host2.nativeElement);
@@ -409,6 +415,7 @@ describe('dynamic-overlay-handler', () => {
  expect(positionBuilder._connectedTo).toBe(host2);
  expect(positionBuilder._position).toBe(NbPosition.TOP);
  expect(positionBuilder._adjustment).toBe(NbAdjustment.NOOP);
+ expect(positionBuilder._offset).toBe(0);
  });
 
  it('should set and update position', () => {
@@ -437,6 +444,21 @@ describe('dynamic-overlay-handler', () => {
  expect(positionBuilder._adjustment).toBe(NbAdjustment.COUNTERCLOCKWISE);
  });
 
+ it('should set and update offset', () => {
+ const host = new ElementRef(document.createElement('b'));
+ configure(host).offset(34).build();
+ expect(positionBuilder._connectedTo).toBe(host);
+ expect(positionBuilder._position).toBe(NbPosition.TOP);
+ expect(positionBuilder._adjustment).toBe(NbAdjustment.NOOP);
+ expect(positionBuilder._offset).toBe(34);
+
+ configure(host).offset(2).rebuild();
+ expect(positionBuilder._connectedTo).toBe(host);
+ expect(positionBuilder._position).toBe(NbPosition.TOP);
+ expect(positionBuilder._adjustment).toBe(NbAdjustment.NOOP);
+ expect(positionBuilder._offset).toBe(2);
+ });
+
  it('should set and update content', () => {
  const content1 = 'new content';
  const content2 = 'new new content';

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts

@@ -34,6 +34,7 @@ export class NbDynamicOverlayHandler {
  protected _trigger: NbTrigger = NbTrigger.NOOP;
  protected _position: NbPosition = NbPosition.TOP;
  protected _adjustment: NbAdjustment = NbAdjustment.NOOP;
+ protected _offset: number = 0;
 
  protected dynamicOverlay: NbDynamicOverlay;
 
@@ -89,6 +90,12 @@ export class NbDynamicOverlayHandler {
  return this;
  }
 
+ offset(offset: number) {
+ this.changes.offset = new NbDynamicOverlayChange(this._offset, offset);
+ this._offset = offset;
+ return this;
+ }
+
  build() {
  if (!this._componentType || !this._host) {
  throw Error(`NbDynamicOverlayHandler: at least 'componentType' and 'host' should be
@@ -163,7 +170,8 @@ export class NbDynamicOverlayHandler {
  return this.positionBuilder
  .connectedTo(this._host)
  .position(this._position)
- .adjustment(this._adjustment);
+ .adjustment(this._adjustment)
+ .offset(this._offset);
  }
 
  protected subscribeOnTriggers(dynamicOverlay: NbDynamicOverlay) {
@@ -192,7 +200,7 @@ export class NbDynamicOverlayHandler {
  }
 
  protected isPositionStrategyUpdateRequired(): boolean {
- return this.isAdjustmentUpdated() || this.isPositionUpdated() || this.isHostUpdated();
+ return this.isAdjustmentUpdated() || this.isPositionUpdated() || this.isOffsetUpdated() || this.isHostUpdated();
  }
 
  protected isTriggerStrategyUpdateRequired(): boolean {
@@ -231,6 +239,10 @@ export class NbDynamicOverlayHandler {
  return this.changes.trigger && this.changes.trigger.isChanged();
  }
 
+ protected isOffsetUpdated(): boolean {
+ return this.changes.offset && this.changes.offset.isChanged();
+ }
+
  protected clearChanges() {
  this.changes = {};
  }

src/framework/theme/components/popover/popover.spec.ts

@@ -2,10 +2,8 @@ import { Component, ElementRef, Input, NgModule, TemplateRef, Type, ViewChild }
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-
 import { NbThemeModule } from '../../theme.module';
 import { NbLayoutModule } from '../layout/layout.module';
-import { NbPopoverDirective } from './popover.directive';
 import {
  NbAdjustment,
  NbDynamicOverlayHandler,
@@ -14,8 +12,9 @@ import {
  NbRenderableContainer,
  NbTrigger,
 } from '../cdk';
-import { NbPopoverComponent } from '@nebular/theme/components/popover/popover.component';
-import { NbPopoverModule } from '@nebular/theme';
+import { NbPopoverDirective } from './popover.directive';
+import { NbPopoverComponent } from './popover.component';
+import { NbPopoverModule } from './popover.module';
 
 @Component({
  selector: 'nb-popover-component-content-test',
@@ -73,7 +72,7 @@ export class NbPopoverBindingsTestComponent {
  template: `
  <nb-layout>
  <nb-layout-column>
- <button #button [nbPopover]="test"></button>
+ <button #button nbPopover="test"></button>
  </nb-layout-column>
  </nb-layout>
 
@@ -86,22 +85,6 @@ export class NbPopoverInstanceTestComponent {
  @ViewChild(TemplateRef) template: TemplateRef<any>;
 }
 
-@Component({
- selector: 'nb-popover-mode-test',
- template: `
- <nb-layout>
- <nb-layout-column>
- <button #button nbPopover="test" [nbPopoverMode]="mode"></button>
- </nb-layout-column>
- </nb-layout>
- `,
-})
-export class NbPopoverModeTestComponent {
- @Input() mode: NbTrigger = NbTrigger.CLICK;
- @ViewChild('button') button: ElementRef;
- @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
-}
-
 const dynamicOverlay = {
  show() {},
  hide() {},

src/framework/theme/components/tooltip/tooltip.component.ts

@@ -6,7 +6,7 @@
 
 import { Component, HostBinding, Input } from '@angular/core';
 
-import { NbPosition } from '../cdk';
+import { NbPosition, NbRenderableContainer } from '../cdk';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
 
@@ -50,7 +50,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
  ]),
  ],
 })
-export class NbTooltipComponent {
+export class NbTooltipComponent implements NbRenderableContainer {
 
  @Input()
  content: string;
@@ -77,4 +77,10 @@ export class NbTooltipComponent {
  get statusClass() {
  return this.context.status ? `${this.context.status}-tooltip` : '';
  }
+
+ /**
+ * The method is empty since we don't need to do anything additionally
+ * render is handled by change detection
+ */
+ renderContent() {}
 }

src/framework/theme/components/tooltip/tooltip.directive.ts

@@ -4,32 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import {
- AfterViewInit,
- ComponentFactoryResolver,
- ComponentRef,
- Directive,
- ElementRef,
- Inject,
- Input,
- OnDestroy,
-} from '@angular/core';
-import { takeWhile } from 'rxjs/operators';
-
-import {
- createContainer,
- NbAdjustableConnectedPositionStrategy,
- NbAdjustment,
- NbOverlayRef,
- NbOverlayService,
- NbPosition,
- NbPositionBuilderService,
- NbTrigger,
- NbTriggerStrategy,
- NbTriggerStrategyBuilderService,
- patch,
-} from '../cdk';
-import { NB_DOCUMENT } from '../../theme.options';
+import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+
+import { NbAdjustment, NbDynamicOverlay, NbDynamicOverlayHandler, NbPosition, NbTrigger } from '../cdk';
 import { NbTooltipComponent } from './tooltip.component';
 
 /**
@@ -72,8 +49,11 @@ import { NbTooltipComponent } from './tooltip.component';
  * - Focus mode is applied when user focuses the element.
  * - Noop mode - the component won't react to the user interaction.
  */
-@Directive({ selector: '[nbTooltip]' })
-export class NbTooltipDirective implements AfterViewInit, OnDestroy {
+@Directive({
+ selector: '[nbTooltip]',
+ providers: [NbDynamicOverlayHandler, NbDynamicOverlay],
+})
+export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
 
  context: Object = {};
 
@@ -102,7 +82,7 @@ export class NbTooltipDirective implements AfterViewInit, OnDestroy {
  */
  @Input('nbTooltipIcon')
  set icon(icon: string) {
- this.context = Object.assign(this.context, { icon });
+ this.context = Object.assign(this.context, {icon});
  }
 
  /**
@@ -111,7 +91,7 @@ export class NbTooltipDirective implements AfterViewInit, OnDestroy {
  */
  @Input('nbTooltipStatus')
  set status(status: string) {
- this.context = Object.assign(this.context, { status });
+ this.context = Object.assign(this.context, {status});
  }
 
  /**
@@ -121,98 +101,55 @@ export class NbTooltipDirective implements AfterViewInit, OnDestroy {
  @Input('nbTooltipTrigger')
  trigger: NbTrigger = NbTrigger.HINT;
 
- protected ref: NbOverlayRef;
- protected container: ComponentRef<any>;
- protected positionStrategy: NbAdjustableConnectedPositionStrategy;
- protected alive: boolean = true;
-
- constructor(@Inject(NB_DOCUMENT) protected document,
- private hostRef: ElementRef,
- private positionBuilder: NbPositionBuilderService,
- protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
- private overlay: NbOverlayService,
- private componentFactoryResolver: ComponentFactoryResolver) {
+ private dynamicOverlay: NbDynamicOverlay;
+
+ constructor(private hostRef: ElementRef,
+ private dynamicOverlayHandler: NbDynamicOverlayHandler) {
+ }
+
+ ngOnInit() {
+ this.dynamicOverlayHandler
+ .host(this.hostRef)
+ .componentType(NbTooltipComponent)
+ .offset(8);
+ }
+
+ ngOnChanges() {
+ this.rebuild();
  }
 
  ngAfterViewInit() {
- this.subscribeOnTriggers();
- this.subscribeOnPositionChange();
+ this.dynamicOverlay = this.configureDynamicOverlay()
+  .build();
  }
 
- ngOnDestroy() {
- this.alive = false;
- this.hide();
- if (this.ref) {
- this.ref.dispose();
- }
+ rebuild() {
+ this.dynamicOverlay = this.configureDynamicOverlay()
+ .rebuild();
  }
 
  show() {
- if (!this.ref) {
- this.createOverlay();
- }
-
- this.openTooltip();
+ this.dynamicOverlay.show();
  }
 
  hide() {
- if (this.ref) {
- this.ref.detach();
- }
-
- this.container = null;
+ this.dynamicOverlay.hide();
  }
 
  toggle() {
- if (this.ref && this.ref.hasAttached()) {
- this.hide();
- } else {
- this.show();
- }
- }
-
- protected createOverlay() {
- this.ref = this.overlay.create({
- positionStrategy: this.positionStrategy,
- scrollStrategy: this.overlay.scrollStrategies.reposition(),
- });
+ this.dynamicOverlay.toggle();
  }
 
- protected openTooltip() {
- this.container = createContainer(this.ref, NbTooltipComponent, {
- position: this.position,
- content: this.content,
- context: this.context,
- cfr: this.componentFactoryResolver,
- }, this.componentFactoryResolver);
+ ngOnDestroy() {
+ this.dynamicOverlayHandler.destroy();
  }
 
- protected createPositionStrategy(): NbAdjustableConnectedPositionStrategy {
- return this.positionBuilder
- .connectedTo(this.hostRef)
+ protected configureDynamicOverlay() {
+ return this.dynamicOverlayHandler
  .position(this.position)
- .adjustment(this.adjustment)
- .offset(8);
- }
-
- protected createTriggerStrategy(): NbTriggerStrategy {
- return this.triggerStrategyBuilder
  .trigger(this.trigger)
- .host(this.hostRef.nativeElement)
- .container(() => this.container)
- .build();
- }
-
- protected subscribeOnPositionChange() {
- this.positionStrategy = this.createPositionStrategy();
- this.positionStrategy.positionChange
- .pipe(takeWhile(() => this.alive))
- .subscribe((position: NbPosition) => patch(this.container, { position }));
- }
-
- protected subscribeOnTriggers() {
- const triggerStrategy = this.createTriggerStrategy();
- triggerStrategy.show$.pipe(takeWhile(() => this.alive)).subscribe(() => this.show());
- triggerStrategy.hide$.pipe(takeWhile(() => this.alive)).subscribe(() => this.hide());
+ .adjustment(this.adjustment)
+ .content(this.content)
+ .context(this.context);
  }
 }