Skip to content

Commit fbcef79

Browse files
ddariboddaribo
committed
refactor(picker-base): abstract clearComponents similar to toggleComponents
1 parent 8c52865 commit fbcef79

File tree

7 files changed

+39
-32
lines changed

7 files changed

+39
-32
lines changed

‎projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IToggleView } from '../core/navigation';
1313
import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
1414
import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
1515
import { OverlaySettings } from '../services/overlay/utilities';
16-
import { IgxPickerToggleComponent } from './picker-icons.common';
16+
import { IgxPickerClearComponent, IgxPickerToggleComponent } from './picker-icons.common';
1717
import { PickerInteractionMode } from './types';
1818
import { WEEKDAYS } from '../calendar/calendar';
1919
import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
@@ -239,6 +239,10 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
239239
@ContentChildren(IgxPickerToggleComponent, { descendants: true })
240240
public toggleComponents: QueryList<IgxPickerToggleComponent>;
241241

242+
/** @hidden @internal */
243+
@ContentChildren(IgxPickerClearComponent, { descendants: true })
244+
public clearComponents: QueryList<IgxPickerClearComponent>;
245+
242246
@ContentChildren(IgxPrefixDirective, { descendants: true })
243247
protected prefixes: QueryList<IgxPrefixDirective>;
244248

@@ -299,9 +303,8 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
299303

300304
/** @hidden @internal */
301305
public ngAfterViewInit(): void {
302-
this.subToIconsClicked(this.toggleComponents, () => this.open());
303-
this.toggleComponents.changes.pipe(takeUntil(this._destroy$))
304-
.subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));
306+
this.subToIconsClicked(this.toggleComponents, () => this.toggle());
307+
this.subToIconsClicked(this.clearComponents, () => this.clear());
305308
}
306309

307310
/** @hidden @internal */
@@ -322,17 +325,28 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
322325
}
323326

324327
/** Subscribes to the click events of toggle/clear icons in a query */
325-
protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any): void {
326-
components.forEach(toggle => {
327-
toggle.clicked
328-
.pipe(takeUntil(merge(components.changes, this._destroy$)))
329-
.subscribe(next);
330-
});
328+
private subToIconsClicked(
329+
components: QueryList<IgxPickerToggleComponent | IgxPickerClearComponent>,
330+
handler: () => void
331+
): void {
332+
const subscribeToClick = componentList => {
333+
componentList.forEach(component => {
334+
component.clicked
335+
.pipe(takeUntil(merge(componentList.changes, this._destroy$)))
336+
.subscribe(handler);
337+
});
338+
};
339+
340+
subscribeToClick(components);
341+
342+
components.changes.pipe(takeUntil(this._destroy$))
343+
.subscribe(() => subscribeToClick(components));
331344
}
332345

333346
public abstract select(value: Date | DateRange | string): void;
334347
public abstract open(settings?: OverlaySettings): void;
335348
public abstract toggle(settings?: OverlaySettings): void;
336349
public abstract close(): void;
350+
public abstract clear(): void;
337351
public abstract getEditElement(): HTMLInputElement;
338352
}

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -400,10 +400,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
400400
@Output()
401401
public validationFailed = new EventEmitter<IDatePickerValidationFailedEventArgs>();
402402

403-
/** @hidden @internal */
404-
@ContentChildren(IgxPickerClearComponent)
405-
public clearComponents: QueryList<IgxPickerClearComponent>;
406-
407403
/** @hidden @internal */
408404
@ContentChild(IgxLabelDirective)
409405
public label: IgxLabelDirective;
@@ -770,10 +766,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
770766
this.subscribeToOverlayEvents();
771767
this.subscribeToDateEditorEvents();
772768

773-
this.subToIconsClicked(this.clearComponents, () => this.clear());
774-
this.clearComponents.changes.pipe(takeUntil(this._destroy$))
775-
.subscribe(() => this.subToIconsClicked(this.clearComponents, () => this.clear()));
776-
777769
this._dropDownOverlaySettings.excludeFromOutsideClick = [this.inputGroup.element.nativeElement];
778770

779771
fromEvent(this.inputDirective.nativeElement, 'blur')

‎projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,10 +302,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
302302
@ContentChildren(IgxDateRangeInputsBaseComponent)
303303
public projectedInputs: QueryList<IgxDateRangeInputsBaseComponent>;
304304

305-
/** @hidden @internal */
306-
@ContentChildren(IgxPickerClearComponent)
307-
public clearComponents: QueryList<IgxPickerClearComponent>;
308-
309305
@ContentChild(IgxLabelDirective)
310306
public label: IgxLabelDirective;
311307

‎projects/igniteui-angular/src/lib/date-range-picker/public_api.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IgxPickerToggleComponent } from '../date-common/picker-icons.common';
1+
import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/picker-icons.common';
22
import { IgxHintDirective } from '../directives/hint/hint.directive';
33
import { IgxLabelDirective } from '../directives/label/label.directive';
44
import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
@@ -13,6 +13,7 @@ export * from './date-range-picker.component';
1313
export const IGX_DATE_RANGE_PICKER_DIRECTIVES = [
1414
IgxDateRangePickerComponent,
1515
IgxPickerToggleComponent,
16+
IgxPickerClearComponent,
1617
IgxDateRangeStartComponent,
1718
IgxDateRangeEndComponent,
1819
IgxDateRangeSeparatorDirective,

‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -308,9 +308,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
308308
@ViewChild('ampmList')
309309
public ampmList: ElementRef;
310310

311-
/** @hidden @internal */
312-
@ContentChildren(IgxPickerClearComponent)
313-
public clearComponents: QueryList<IgxPickerClearComponent>;
314311

315312
/** @hidden @internal */
316313
@ContentChild(IgxLabelDirective)
@@ -746,10 +743,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
746743
}
747744
});
748745

749-
this.subToIconsClicked(this.clearComponents, () => this.clear());
750-
this.clearComponents.changes.pipe(takeUntil(this._destroy$))
751-
.subscribe(() => this.subToIconsClicked(this.clearComponents, () => this.clear()));
752-
753746
if (this._ngControl) {
754747
this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
755748
this._inputGroup.isRequired = this.required;

‎src/app/date-range/date-range.sample.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,18 @@ <h5>Without forms</h5>
3030
<igx-picker-toggle igxPrefix>
3131
<igx-icon>calendar_view_day</igx-icon>
3232
</igx-picker-toggle>
33+
<igx-picker-clear igxSuffix>
34+
<igx-icon>clear</igx-icon>
35+
</igx-picker-clear>
3336
</igx-date-range-start>
3437
<igx-date-range-end>
3538
<input igxInput igxDateTimeEditor type="text">
39+
<igx-picker-toggle igxPrefix>
40+
<igx-icon>calendar_view_day</igx-icon>
41+
</igx-picker-toggle>
42+
<igx-picker-clear igxSuffix>
43+
<igx-icon>clear</igx-icon>
44+
</igx-picker-clear>
3645
</igx-date-range-end>
3746
</igx-date-range-picker>
3847

‎src/app/date-range/date-range.sample.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { JsonPipe } from '@angular/common';
33
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
4-
import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateTimeEditorDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxRadioComponent, IgxRippleDirective, IgxSuffixDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs } from 'igniteui-angular';
4+
import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateTimeEditorDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxRadioComponent, IgxRippleDirective, IgxSuffixDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IgxPickerClearComponent } from 'igniteui-angular';
55

66

77
@Component({
@@ -14,7 +14,9 @@ import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePi
1414
useValue: 'border'
1515
}
1616
],
17-
imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe]
17+
imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective,
18+
IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective,
19+
IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe, IgxPickerClearComponent]
1820
})
1921
export class DateRangeSampleComponent {
2022
@ViewChild('dr1', { static: true })

0 commit comments

Comments
 (0)