Skip to content

Commit bd2cb5c

Browse files
luiz-s-vasconcellosanabye
luiz-s-vasconcellos
authored and
anabye
committed
refactor(components): otimiza uso do appendBox para templates em grid
Executa o setTimeout que define appendBox apenas quando o elemento está dentro de .components-form-custom-template, evitando timers desnecessários fora do contexto de edição em grid. Fixes DTHFUI-12103
1 parent 75b6e99 commit bd2cb5c

18 files changed

+248
-66
lines changed

‎projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.spec.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ describe('PoCheckboxComponent:', () => {
3434
expect(labelField).toBeTruthy();
3535
});
3636

37-
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
37+
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box' and is inside components-form-custom-template", fakeAsync(() => {
3838
component.checkboxLabel = {
3939
nativeElement: {
4040
classList: {
4141
contains: (cls: string) => cls === 'enable-append-box'
42-
}
42+
},
43+
closest: (selector: string) => (selector === '.components-form-custom-template' ? {} : null)
4344
}
4445
};
4546
component.ngAfterViewInit();
@@ -49,6 +50,23 @@ describe('PoCheckboxComponent:', () => {
4950
expect(component.appendBox).toBeTrue();
5051
}));
5152

53+
it('ngAfterViewInit: should not set appendBox if not inside components-form-custom-template', fakeAsync(() => {
54+
component.checkboxLabel = {
55+
nativeElement: {
56+
classList: {
57+
contains: (cls: string) => cls === 'enable-append-box'
58+
},
59+
closest: (selector: string) => null
60+
}
61+
};
62+
component.appendBox = false;
63+
component.ngAfterViewInit();
64+
65+
tick(300);
66+
67+
expect(component.appendBox).toBeFalse();
68+
}));
69+
5270
describe('Methods:', () => {
5371
it('focus: should call `focus` of checkbox.', () => {
5472
component.checkboxLabel = new ElementRef({ focus() {}, label: 'test' });

‎projects/ui/src/lib/components/po-field/po-checkbox/po-checkbox.component.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,13 @@ export class PoCheckboxComponent extends PoCheckboxBaseComponent implements Afte
116116
this.focus();
117117
}
118118

119-
setTimeout(() => {
120-
if (this.checkboxLabel?.nativeElement?.classList?.contains('enable-append-box')) {
121-
this.appendBox = true;
122-
}
123-
}, 300);
119+
if (this.checkboxLabel?.nativeElement?.closest('.components-form-custom-template')) {
120+
setTimeout(() => {
121+
if (this.checkboxLabel?.nativeElement?.classList?.contains('enable-append-box')) {
122+
this.appendBox = true;
123+
}
124+
}, 300);
125+
}
124126
}
125127

126128
ngOnChanges(changes: SimpleChanges): void {

‎projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2225,12 +2225,13 @@ describe('PoComboComponent - with service:', () => {
22252225
expect(spyFocus).not.toHaveBeenCalled();
22262226
});
22272227

2228-
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
2228+
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box' and is inside components-form-custom-template", fakeAsync(() => {
22292229
component.inputEl = {
22302230
nativeElement: {
22312231
classList: {
22322232
contains: (cls: string) => cls === 'enable-append-box'
2233-
}
2233+
},
2234+
closest: (selector: string) => (selector === '.components-form-custom-template' ? {} : null)
22342235
}
22352236
};
22362237
component.ngAfterViewInit();
@@ -2240,6 +2241,23 @@ describe('PoComboComponent - with service:', () => {
22402241
expect(component.appendBox).toBeTrue();
22412242
}));
22422243

2244+
it('ngAfterViewInit: should not set appendBox if not inside components-form-custom-template', fakeAsync(() => {
2245+
component.inputEl = {
2246+
nativeElement: {
2247+
classList: {
2248+
contains: (cls: string) => cls === 'enable-append-box'
2249+
},
2250+
closest: (selector: string) => null
2251+
}
2252+
};
2253+
component.appendBox = false;
2254+
component.ngAfterViewInit();
2255+
2256+
tick(300);
2257+
2258+
expect(component.appendBox).toBeFalse();
2259+
}));
2260+
22432261
it('ngOnDestroy: should not unsubscribe if getSubscription is falsy.', () => {
22442262
component['getSubscription'] = fakeSubscription;
22452263

‎projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,13 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI
175175

176176
this.setContainerWidth();
177177

178-
// Necessário para edição fluída
179-
setTimeout(() => {
180-
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
181-
this.appendBox = true;
182-
}
183-
}, 300);
178+
if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
179+
setTimeout(() => {
180+
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
181+
this.appendBox = true;
182+
}
183+
}, 300);
184+
}
184185
}
185186

186187
ngOnChanges(changes: SimpleChanges) {

‎projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.spec.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1730,12 +1730,13 @@ describe('PoDatepickerComponent:', () => {
17301730
});
17311731
});
17321732

1733-
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
1733+
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box' and is inside components-form-custom-template", fakeAsync(() => {
17341734
component.inputEl = {
17351735
nativeElement: {
17361736
classList: {
17371737
contains: (cls: string) => cls === 'enable-append-box'
1738-
}
1738+
},
1739+
closest: (selector: string) => (selector === '.components-form-custom-template' ? {} : null)
17391740
}
17401741
};
17411742
component.iconDatepicker = {
@@ -1749,6 +1750,28 @@ describe('PoDatepickerComponent:', () => {
17491750

17501751
expect(component.appendBox).toBeTrue();
17511752
}));
1753+
1754+
it('ngAfterViewInit: should not set appendBox if not inside components-form-custom-template', fakeAsync(() => {
1755+
component.inputEl = {
1756+
nativeElement: {
1757+
classList: {
1758+
contains: (cls: string) => cls === 'enable-append-box'
1759+
},
1760+
closest: (selector: string) => null
1761+
}
1762+
};
1763+
component.iconDatepicker = {
1764+
buttonElement: {
1765+
nativeElement: document.createElement('button')
1766+
}
1767+
} as PoButtonComponent;
1768+
component.appendBox = false;
1769+
component.ngAfterViewInit();
1770+
1771+
tick(300);
1772+
1773+
expect(component.appendBox).toBeFalse();
1774+
}));
17521775
});
17531776
});
17541777

‎projects/ui/src/lib/components/po-field/po-datepicker/po-datepicker.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -193,12 +193,13 @@ export class PoDatepickerComponent extends PoDatepickerBaseComponent implements
193193
}
194194
this.renderer.setAttribute(this.iconDatepicker.buttonElement.nativeElement, 'aria-label', this.literals.open);
195195

196-
// Necessário para edição fluída
197-
setTimeout(() => {
198-
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
199-
this.appendBox = true;
200-
}
201-
}, 300);
196+
if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
197+
setTimeout(() => {
198+
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
199+
this.appendBox = true;
200+
}
201+
}, 300);
202+
}
202203
}
203204

204205
ngOnDestroy() {

‎projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.spec.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,13 @@ describe('PoDecimalComponent:', () => {
4949
expect(component).toBeTruthy();
5050
});
5151

52-
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
52+
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box' and is inside components-form-custom-template", fakeAsync(() => {
5353
component.inputEl = {
5454
nativeElement: {
5555
classList: {
5656
contains: (cls: string) => cls === 'enable-append-box'
57-
}
57+
},
58+
closest: (selector: string) => (selector === '.components-form-custom-template' ? {} : null)
5859
}
5960
};
6061
component.ngAfterViewInit();
@@ -64,6 +65,23 @@ describe('PoDecimalComponent:', () => {
6465
expect(component.appendBox).toBeTrue();
6566
}));
6667

68+
it('ngAfterViewInit: should not set appendBox if not inside components-form-custom-template', fakeAsync(() => {
69+
component.inputEl = {
70+
nativeElement: {
71+
classList: {
72+
contains: (cls: string) => cls === 'enable-append-box'
73+
},
74+
closest: (selector: string) => null
75+
}
76+
};
77+
component.appendBox = false;
78+
component.ngAfterViewInit();
79+
80+
tick(300);
81+
82+
expect(component.appendBox).toBeFalse();
83+
}));
84+
6785
describe('Properties:', () => {
6886
it('locale: should set decimal and thousand separator', () => {
6987
component.locale = 'ru';

‎projects/ui/src/lib/components/po-field/po-decimal/po-decimal.component.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,13 @@ export class PoDecimalComponent extends PoInputBaseComponent implements AfterVie
273273
this.helperSettings = this.setHelper(this.label, this.additionalHelpTooltip).helperSettings;
274274
this.verifyAutoFocus();
275275

276-
setTimeout(() => {
277-
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
278-
this.appendBox = true;
279-
}
280-
}, 300);
276+
if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
277+
setTimeout(() => {
278+
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
279+
this.appendBox = true;
280+
}
281+
}, 300);
282+
}
281283
}
282284

283285
ngOnDestroy(): void {

‎projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,13 @@ describe('PoInputGeneric:', () => {
7878
expect(component.afterViewInit).toHaveBeenCalled();
7979
});
8080

81-
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box'", fakeAsync(() => {
81+
it("ngAfterViewInit: should set appendBox true if contains class 'enable-append-box' and is inside components-form-custom-template", fakeAsync(() => {
8282
component.inputEl = {
8383
nativeElement: {
8484
classList: {
8585
contains: (cls: string) => cls === 'enable-append-box'
86-
}
86+
},
87+
closest: (selector: string) => (selector === '.components-form-custom-template' ? {} : null)
8788
}
8889
};
8990
component.ngAfterViewInit();
@@ -93,6 +94,23 @@ describe('PoInputGeneric:', () => {
9394
expect(component.appendBox).toBeTrue();
9495
}));
9596

97+
it('ngAfterViewInit: should not set appendBox if not inside components-form-custom-template', fakeAsync(() => {
98+
component.inputEl = {
99+
nativeElement: {
100+
classList: {
101+
contains: (cls: string) => cls === 'enable-append-box'
102+
},
103+
closest: (selector: string) => null
104+
}
105+
};
106+
component.appendBox = false;
107+
component.ngAfterViewInit();
108+
109+
tick(300);
110+
111+
expect(component.appendBox).toBeFalse();
112+
}));
113+
96114
it('should call keydown from mask with keyCode different 229', () => {
97115
const fakeThis = {
98116
mask: '(999)',

‎projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,13 @@ export abstract class PoInputGeneric extends PoInputBaseComponent implements Aft
6767
this.helperSettings = this.setHelper(this.label, this.additionalHelpTooltip).helperSettings;
6868
this.verifyAutoFocus();
6969

70-
setTimeout(() => {
71-
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
72-
this.appendBox = true;
73-
}
74-
}, 300);
70+
if (this.inputEl?.nativeElement?.closest('.components-form-custom-template')) {
71+
setTimeout(() => {
72+
if (this.inputEl?.nativeElement?.classList?.contains('enable-append-box')) {
73+
this.appendBox = true;
74+
}
75+
}, 300);
76+
}
7577
}
7678

7779
ngOnDestroy(): void {

0 commit comments

Comments
 (0)