Skip to content

Commit 497fee0

Browse files
Mateus Jose Milczewski Alves Fariasjhosefmarks
Mateus Jose Milczewski Alves Farias
authored and
jhosefmarks
committed
feat(checkbox-group): implementa a propriedade p-auto-focus
Agora o componente também permite inicializar focado ao definir `p-auto-focus`. Fixes DTHFUI-2483
1 parent 72c4f35 commit 497fee0

File tree

3 files changed

+84
-26
lines changed

3 files changed

+84
-26
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms
22
import { EventEmitter, Input, Output } from '@angular/core';
33

44
import { convertToBoolean, convertToInt, uuid } from './../../../utils/util';
5+
import { InputBoolean } from '../../../decorators';
56
import { requiredFailed } from '../validators';
67

78
import { PoCheckboxGroupOption } from './interfaces/po-checkbox-group-option.interface';
@@ -54,6 +55,19 @@ export class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Valid
5455
private _options?: Array<PoCheckboxGroupOption>;
5556
private _required?: boolean = false;
5657

58+
/**
59+
* @optional
60+
*
61+
* @description
62+
*
63+
* Aplica foco no elemento ao ser iniciado.
64+
*
65+
* > Caso mais de um elemento seja configurado com essa propriedade, apenas o último elemento declarado com ela terá o foco.
66+
*
67+
* @default `false`
68+
*/
69+
@Input('p-auto-focus') @InputBoolean() autoFocus: boolean = false;
70+
5771
/** Nome dos checkboxes */
5872
@Input('name') name: string;
5973

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

Lines changed: 62 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -108,45 +108,83 @@ describe('PoCheckboxGroupComponent:', () => {
108108

109109
describe('Methods:', () => {
110110

111-
it('focus: should call `focus` of checkbox', () => {
112-
component.options = [{ label: 'teste1', value: 'teste1' }, { label: 'teste2', value: 'teste2' }];
111+
it('ngAfterViewInit: should call `focus` if `autoFocus` is true.', () => {
112+
component.autoFocus = true;
113113

114-
changeDetector.detectChanges();
114+
const spyFocus = spyOn(component, <any>'focus');
115115

116-
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
116+
component.ngAfterViewInit();
117117

118-
component.focus();
118+
expect(spyFocus).toHaveBeenCalled();
119+
});
120+
121+
it('ngAfterViewInit: shouldn´t call `focus` if `autoFocus` is false.', () => {
122+
component.autoFocus = false;
123+
124+
const spyFocus = spyOn(component, <any>'focus');
125+
126+
component.ngAfterViewInit();
119127

120-
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).toHaveBeenCalled();
128+
expect(spyFocus).not.toHaveBeenCalled();
121129
});
122130

123-
it('focus: should`t call `focus` of checkbox if option is `disabled`', () => {
124-
component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2' }];
131+
describe('focus:', () => {
125132

126-
changeDetector.detectChanges();
133+
it('should call `focus` of checkbox.', () => {
134+
component.options = [{ label: 'teste1', value: 'teste1' }, { label: 'teste2', value: 'teste2' }];
127135

128-
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
129-
spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
136+
changeDetector.detectChanges();
130137

131-
component.focus();
138+
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
132139

133-
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
134-
expect(component.checkboxLabels.toArray()[1].nativeElement.focus).toHaveBeenCalled();
135-
});
140+
component.focus();
141+
142+
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).toHaveBeenCalled();
143+
});
144+
145+
it('shouldn`t call `focus` of checkbox if option is `disabled`.', () => {
146+
component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2' }];
147+
148+
changeDetector.detectChanges();
149+
150+
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
151+
spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
152+
153+
component.focus();
136154

137-
it('focus: should`t call `focus` of checkbox if `disabled`', () => {
138-
component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2' }];
139-
component.disabled = true;
155+
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
156+
expect(component.checkboxLabels.toArray()[1].nativeElement.focus).toHaveBeenCalled();
157+
});
158+
159+
it('shouldn`t call `focus` if component is `disabled`.', () => {
160+
component.options = [{ label: 'teste1', value: 'teste1' }, { label: 'teste2', value: 'teste2' }];
161+
component.disabled = true;
140162

141-
changeDetector.detectChanges();
163+
changeDetector.detectChanges();
142164

143-
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
144-
spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
165+
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
166+
spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
167+
168+
component.focus();
169+
170+
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
171+
expect(component.checkboxLabels.toArray()[1].nativeElement.focus).not.toHaveBeenCalled();
172+
});
145173

146-
component.focus();
174+
it('shouldn`t call `focus` if all checkboxes are `disabled`.', () => {
175+
component.options = [{ label: 'teste1', value: 'teste1', disabled: true }, { label: 'teste2', value: 'teste2', disabled: true }];
176+
177+
changeDetector.detectChanges();
178+
179+
spyOn(component.checkboxLabels.toArray()[0].nativeElement, 'focus');
180+
spyOn(component.checkboxLabels.toArray()[1].nativeElement, 'focus');
181+
182+
component.focus();
183+
184+
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
185+
expect(component.checkboxLabels.toArray()[1].nativeElement.focus).not.toHaveBeenCalled();
186+
});
147187

148-
expect(component.checkboxLabels.toArray()[0].nativeElement.focus).not.toHaveBeenCalled();
149-
expect(component.checkboxLabels.toArray()[1].nativeElement.focus).not.toHaveBeenCalled();
150188
});
151189

152190
it('trackByFn: should return index', () => {

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AfterViewChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef,
1+
import { AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef,
22
forwardRef, QueryList, ViewChildren } from '@angular/core';
33
import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
44

@@ -42,7 +42,7 @@ import { PoCheckboxGroupOption } from './interfaces/po-checkbox-group-option.int
4242
}
4343
]
4444
})
45-
export class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked {
45+
export class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent implements AfterViewChecked, AfterViewInit {
4646

4747
@ViewChildren('checkboxLabel') checkboxLabels: QueryList<ElementRef>;
4848

@@ -54,6 +54,12 @@ export class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent imple
5454
this.changeDetector.detectChanges();
5555
}
5656

57+
ngAfterViewInit() {
58+
if (this.autoFocus) {
59+
this.focus();
60+
}
61+
}
62+
5763
/**
5864
* Função que atribui foco ao componente.
5965
*

0 commit comments

Comments
 (0)