fix(icon-button): fix overflow style

A-l-y-l-e · Sep 30, 2018 · a0dc7c2 · a0dc7c2
1 parent 319a661
commit a0dc7c2
Showing 1 changed file with 35 additions and 15 deletions.
diff --git a/src/lib/icon-button/icon-button.ts b/src/lib/icon-button/icon-button.ts
@@ -5,11 +5,14 @@ import {
   ViewChild,
   Optional,
   Renderer2,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  NgZone,
+  OnDestroy
 } from '@angular/core';
 
-import { LyRipple } from '@alyle/ui/ripple';
-import { LyCommon, LyTheme2 } from '@alyle/ui';
+import { LyRippleService, Ripple } from '@alyle/ui/ripple';
+import { LyCommon, LyTheme2, Platform } from '@alyle/ui';
 import { LyIconButtonService } from './icon-button.service';
 
 const STYLE_PRIORITY = -2;
@@ -25,35 +28,52 @@ const styles = theme => ({
   // tslint:disable-next-line:component-selector
   selector: 'button[ly-icon-button], a[ly-icon-button], span[ly-icon-button]',
   template: `
-  <div class="{{ iconButtonService.classes.content }}"
-  lyRipple
-  lyRippleCentered
-  >
-    <ng-content></ng-content>
-  </div>
+  <div [className]="iconButtonService.classes.content"
+  ><ng-content></ng-content></div>
+  <div #rippleContainer [className]="_rippleService.classes.container"></div>
   `,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'lyIconButton'
 })
-export class LyIconButton implements OnInit {
-  @ViewChild(LyRipple) ripple: LyRipple;
+export class LyIconButton implements OnInit, AfterViewInit, OnDestroy {
   classes = this.theme.addStyleSheet(styles, 'lyIconButton', STYLE_PRIORITY);
+  private _ripple: Ripple;
+  @ViewChild('rippleContainer') _rippleContainer: ElementRef;
   constructor(
-    public elementRef: ElementRef,
+    public _el: ElementRef,
     private renderer: Renderer2,
     @Optional() bgAndColor: LyCommon,
     public iconButtonService: LyIconButtonService,
-    private theme: LyTheme2
+    private theme: LyTheme2,
+    private _ngZone: NgZone,
+    public _rippleService: LyRippleService,
   ) {
     if (bgAndColor) {
       bgAndColor.setAutoContrast();
     }
   }
 
   ngOnInit() {
-    this.renderer.addClass(this.elementRef.nativeElement, this.iconButtonService.classes.root);
-    this.renderer.addClass(this.elementRef.nativeElement, this.classes.size);
+    this.renderer.addClass(this._el.nativeElement, this.iconButtonService.classes.root);
+    this.renderer.addClass(this._el.nativeElement, this.classes.size);
+  }
+
+  ngAfterViewInit() {
+    if (Platform.isBrowser) {
+      const rippleContainer = this._rippleContainer.nativeElement;
+      const triggerElement = this._el.nativeElement;
+      this._ripple = new Ripple(this._ngZone, this._rippleService.classes, rippleContainer, triggerElement);
+      this._ripple.setConfig({
+        centered: true
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (Platform.isBrowser) {
+      this._ripple.removeEvents();
+    }
   }
 }