From d393f33a6085119a6e4b8bfa96c7bae4dc9e0c6d Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Tue, 20 Nov 2018 13:50:48 +0300
Subject: [PATCH] feat(chat): add `scrollBottom` chat option (#1001)

So that it is possible to control `scroll to bottom` reaction on a new message
Also closes #921
---
 .../theme/components/chat/chat.component.ts   | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/framework/theme/components/chat/chat.component.ts b/src/framework/theme/components/chat/chat.component.ts
index f064c793ff..d9013d4044 100644
--- a/src/framework/theme/components/chat/chat.component.ts
+++ b/src/framework/theme/components/chat/chat.component.ts
@@ -10,10 +10,10 @@ import {
   HostBinding,
   ViewChild,
   ElementRef,
-  AfterViewChecked,
   ContentChildren,
   QueryList, AfterViewInit,
 } from '@angular/core';
+import { convertToBoolProperty } from '../helpers';
 import { NbChatMessageComponent } from './chat-message.component';
 
 /**
@@ -143,7 +143,7 @@ import { NbChatMessageComponent } from './chat-message.component';
     </div>
   `,
 })
-export class NbChatComponent implements AfterViewChecked, AfterViewInit {
+export class NbChatComponent implements AfterViewInit {
 
   static readonly SIZE_XXSMALL = 'xxsmall';
   static readonly SIZE_XSMALL = 'xsmall';
@@ -164,6 +164,7 @@ export class NbChatComponent implements AfterViewChecked, AfterViewInit {
   size: string;
   status: string;
   accent: string;
+  scrollBottom: boolean = true;
 
   @Input() title: string;
 
@@ -262,15 +263,35 @@ export class NbChatComponent implements AfterViewChecked, AfterViewInit {
     this.status = val;
   }
 
+  /**
+   * Scroll chat to the bottom of the list when a new message arrives
+   * @param {boolean} val
+   */
+  @Input('scrollBottom')
+  private set setScrollBottom(val: boolean) {
+    this.scrollBottom = convertToBoolProperty(val);
+  }
+
   @ViewChild('scrollable') scrollable: ElementRef;
   @ContentChildren(NbChatMessageComponent) messages: QueryList<NbChatMessageComponent>;
 
-  ngAfterViewChecked() {
-    this.scrollable.nativeElement.scrollTop = this.scrollable.nativeElement.scrollHeight;
-  }
-
   ngAfterViewInit() {
     this.messages.changes
-      .subscribe((messages) => this.messages = messages);
+      .subscribe((messages) => {
+        this.messages = messages;
+        this.updateView();
+      });
+
+    this.updateView();
+  }
+
+  updateView() {
+    if (this.scrollBottom) {
+      this.scrollListBottom();
+    }
+  }
+
+  scrollListBottom() {
+    this.scrollable.nativeElement.scrollTop = this.scrollable.nativeElement.scrollHeight;
   }
 }