Merge pull request #48 from matthieu-crouzet/fix/current-file-changes

fix: handle change on the input currentFile

Author: RawZ06

projects/ngx-monaco-tree-test/src/app/app.component.html

@@ -4,6 +4,7 @@
     <input [(ngModel)]="dark" type="checkbox" />
     <span class="slider round"></span>
   </label>
+  <button type="button" (click)="changeCurrentFile()">Change current file</button>
 </div>
 <monaco-tree
   [theme]="dark ? 'vs-dark' : 'vs-light'"

projects/ngx-monaco-tree-test/src/app/app.component.scss

@@ -63,3 +63,17 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+.form > button {
+  background-color: #2196f3;
+  color: white;
+  align-self: stretch;
+  border: none;
+  border-radius: 34px;
+  padding: 0 1rem;
+  cursor: pointer;
+}
+
+.form > button:hover {
+  background-color: #1a74be;
+}

projects/ngx-monaco-tree-test/src/app/app.component.ts

@@ -75,6 +75,12 @@ export class AppComponent {
     },
   ];
 
+  changeCurrentFile() {
+    this.currentFile = this.currentFile === 'src/environments/environment.ts'
+      ? 'src/app/app.component.html'
+      : 'src/environments/environment.ts';
+  }
+
   handleContextMenu(action: ContextMenuAction) {
     if (action[0] === 'new_directory') {
       const filename = window.prompt('name');

projects/ngx-monaco-tree/src/lib/monaco-tree-file/monaco-tree-file.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
 import { extensions } from '../../utils/extension-icon';
 import { files } from '../../utils/file-icon';
 import { folders } from '../../utils/folder-icon';
@@ -30,7 +30,7 @@ function getAbsolutePosition(element: any) {
   templateUrl: './monaco-tree-file.component.html',
   styleUrls: ['./monaco-tree-file.component.scss']
 })
-export class MonacoTreeFileComponent implements OnInit {
+export class MonacoTreeFileComponent implements OnChanges {
 	@Input() name = '';
   @Input() path = '';
   @Input() color?: string|null|undefined = '';
@@ -51,11 +51,16 @@ export class MonacoTreeFileComponent implements OnInit {
 	constructor(private eRef: ElementRef) {
 	}
 
-
-	ngOnInit(): void {
-		if (!!this.current && this.current.startsWith(this.path) && !this.open) {
-      		this.toggle();
-    	}
+	ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes['current']
+      && !!this.current
+      && this.current.startsWith(this.path)
+      && !this.open
+      && this.current !== this.path
+    ) {
+      this.toggle(false);
+    }
 	}
 
 	contextMenu: Array<ContextMenuElementSeparator|ContextMenuElementText> = [
@@ -95,10 +100,10 @@ export class MonacoTreeFileComponent implements OnInit {
 				return files[this.name as keyof typeof files];
 
 			} else {
-				let splited = this.name.split('.')
-				while(splited.length > 0) {
-					splited = splited.slice(1)
-					const ext = splited.join('.')
+				let splitted = this.name.split('.')
+				while(splitted.length > 0) {
+					splitted = splitted.slice(1)
+					const ext = splitted.join('.')
 					if(ext && Object.keys(extensions).includes(ext)) {
 						return extensions[ext as keyof typeof extensions];
 					}
@@ -109,9 +114,11 @@ export class MonacoTreeFileComponent implements OnInit {
 		}
 	}
 
-	toggle() {
+	toggle(shouldEmit = true) {
 		this.open = !this.open;
-		this.clickFile.emit(this.name)
+    if (shouldEmit) {
+		  this.clickFile.emit(this.name)
+    }
 	}
 
 	get style() {