Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 99922eb

Browse files
AleksanderBodurrimgechev
AleksanderBodurri
authored and
mgechev
committed
refactor(property editor): remove unnecessary logic from property editor
1 parent da26f16 commit 99922eb

File tree

7 files changed

+100
-156
lines changed

7 files changed

+100
-156
lines changed

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-editor/property-editor.component.ts‎

Lines changed: 0 additions & 140 deletions
This file was deleted.

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-editor/property-editor.module.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-body.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class PropertyViewBodyComponent {
4343
return !!this.directiveStateControls && !!this.directiveOutputControls && !!this.directiveInputControls;
4444
}
4545

46-
updateValue({ node, newValue }: { newValue: any; node: FlatNode }): void {
46+
updateValue({ node, newValue }: { node: FlatNode; newValue: any }): void {
4747
this.controller.updateValue(node, newValue);
4848
}
4949

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-editor/property-editor.component.html‎ renamed to ‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
<span *ngSwitchCase="writeState">
99
<input
1010
type="text"
11-
class="editor-input"
11+
class="editor-input editable"
1212
(mousedown)="$event.stopPropagation()"
13-
[ngClass]="{ editable: true }"
1413
[(ngModel)]="valueToSubmit"
1514
(keydown.enter)="accept()"
1615
(keydown.escape)="reject()"

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-editor/property-editor.component.scss‎ renamed to ‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.scss‎

File renamed without changes.

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view-body/property-view-tree/property-editor/property-editor.component.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import {
2+
AfterViewChecked,
3+
ChangeDetectorRef,
4+
Component,
5+
ElementRef,
6+
EventEmitter,
7+
Input,
8+
OnInit,
9+
Output,
10+
} from '@angular/core';
11+
12+
type EditorType = string | number | boolean;
13+
type EditorResult = EditorType | Array<EditorType>;
14+
15+
enum PropertyEditorState {
16+
Read,
17+
Write,
18+
}
19+
20+
const parseValue = (value: EditorResult): EditorResult => {
21+
try {
22+
return JSON.parse(value as any);
23+
} catch {
24+
return value.toString();
25+
}
26+
};
27+
28+
@Component({
29+
templateUrl: './property-editor.component.html',
30+
selector: 'ng-property-editor',
31+
styleUrls: ['./property-editor.component.scss'],
32+
})
33+
export class PropertyEditorComponent implements AfterViewChecked, OnInit {
34+
@Input() key: string;
35+
@Input() initialValue: EditorResult;
36+
@Output() updateValue = new EventEmitter<EditorResult>();
37+
38+
readState = PropertyEditorState.Read;
39+
writeState = PropertyEditorState.Write;
40+
41+
valueToSubmit: EditorResult;
42+
currentPropertyState = this.readState;
43+
44+
constructor(private _cd: ChangeDetectorRef, private _elementRef: ElementRef) {}
45+
46+
ngOnInit(): void {
47+
this.valueToSubmit = this.initialValue;
48+
}
49+
50+
ngAfterViewChecked(): void {
51+
if (this.currentPropertyState === this.writeState) {
52+
this.editor.focus();
53+
}
54+
}
55+
56+
accept(): void {
57+
const parsed = parseValue(this.valueToSubmit);
58+
if (!parsed && parsed !== false) {
59+
return this.reject();
60+
}
61+
this.updateValue.emit(parsed);
62+
this._transition(this.readState);
63+
}
64+
65+
reject(): void {
66+
this.valueToSubmit = this.initialValue;
67+
this._transition(this.readState);
68+
}
69+
70+
onClick(): void {
71+
if (this.currentPropertyState === this.readState) {
72+
this._transition(this.writeState);
73+
}
74+
}
75+
76+
onBlur(): void {
77+
if (this.currentPropertyState === this.writeState) {
78+
this.accept();
79+
}
80+
}
81+
82+
get editor(): HTMLInputElement {
83+
return this._elementRef.nativeElement.querySelector('input');
84+
}
85+
86+
private _transition(state: PropertyEditorState): void {
87+
this.currentPropertyState = state;
88+
if (this.currentPropertyState === this.writeState) {
89+
this._cd.detectChanges();
90+
this.editor.focus();
91+
this.editor.select();
92+
}
93+
}
94+
}

‎projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-body/property-view/property-view.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@ import { NgModule } from '@angular/core';
22
import { PropertyViewBodyComponent } from './property-view-body/property-view-body.component';
33
import { CommonModule } from '@angular/common';
44
import { MatTreeModule } from '@angular/material/tree';
5-
import { PropertyEditorModule } from './property-view-body/property-editor/property-editor.module';
65
import { PropertyViewHeaderComponent } from './property-view-header/property-view-header.component';
76
import { PropertyViewComponent } from './property-view.component';
87
import { MatButtonModule } from '@angular/material/button';
98
import { PropertyViewTreeComponent } from './property-view-body/property-view-tree/property-view-tree.component';
109
import { MatExpansionModule } from '@angular/material/expansion';
1110
import { DragDropModule } from '@angular/cdk/drag-drop';
11+
import { PropertyEditorComponent } from './property-view-body/property-view-tree/property-editor/property-editor.component';
12+
import { FormsModule } from '@angular/forms';
1213

1314
@NgModule({
1415
declarations: [
1516
PropertyViewBodyComponent,
1617
PropertyViewHeaderComponent,
1718
PropertyViewComponent,
1819
PropertyViewTreeComponent,
20+
PropertyEditorComponent,
1921
],
20-
imports: [MatTreeModule, CommonModule, PropertyEditorModule, MatButtonModule, MatExpansionModule, DragDropModule],
22+
imports: [MatTreeModule, CommonModule, MatButtonModule, MatExpansionModule, DragDropModule, FormsModule],
2123
exports: [PropertyViewBodyComponent, PropertyViewHeaderComponent, PropertyViewComponent],
2224
})
2325
export class PropertyViewModule {}

0 commit comments

Comments
 (0)