Skip to content

Commit e309406

Browse files
PlamenaMitevaPlamenaMiteva
committed
refactor(time-picker): initial refactoring #6482 
1 parent b67f6af commit e309406

File tree

6 files changed

+991
-681
lines changed

6 files changed

+991
-681
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ const enum DateParts {
3939
/** @hidden */
4040
export abstract class DatePickerUtil {
4141
public static readonly DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
42+
static DEFAULT_TIME_INPUT_FORMAT = 'hh:mm a';
4243
// TODO: this is the def mask for the date-picker, should remove it during refactoring
4344
private static readonly SHORT_DATE_MASK = 'MM/dd/yy';
4445
private static readonly SEPARATOR = 'literal';
4546
private static readonly NUMBER_OF_MONTHS = 12;
4647
private static readonly PROMPT_CHAR = '_';
4748
private static readonly DEFAULT_LOCALE = 'en';
48-
4949
/**
5050
* TODO: (in issue #6483) Unit tests and docs for all public methods.
5151
*/

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ export interface IgxTimePickerBase {
2222
selectedMinute: string;
2323
selectedSeconds: string;
2424
selectedAmPm: string;
25-
format: string;
26-
promptChar: string;
25+
2726
cleared: boolean;
2827
mode: InteractionMode;
2928
showHoursList: boolean;

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

+78-36
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,27 @@
1-
<ng-template #labelTemplate>
1+
<!-- <ng-template #labelTemplate>
22
<ng-content select="[igxLabel]"></ng-content>
3-
</ng-template>
3+
</ng-template> -->
44

5-
<ng-template #dropdownInputTemplate>
5+
<!-- <ng-template #dropdownInputTemplate>
66
<igx-input-group #group (mousedown)="mouseDown($event)" [suppressInputAutofocus]="true">
77
<label igxLabel *ngIf="!labelDirective">Time</label>
88
<ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
9-
<igx-prefix (click)="openDialog(group.element.nativeElement)">
9+
<igx-prefix (click)="open()">
1010
<igx-icon>access_time</igx-icon>
1111
</igx-prefix>
12-
<input
13-
type="text"
14-
[igxMask]="mask"
15-
igxInput
16-
[includeLiterals]="true"
17-
[placeholder]="format"
18-
[displayValuePipe]="displayFormat"
19-
[focusedValuePipe]="inputFormat"
20-
[promptChar]="promptChar"
21-
[value]="displayValue"
22-
[igxTextSelection]="true"
23-
(input)="onInput($event)"
24-
(blur)="onBlur($event)"
25-
(focus)="onFocus($event)"
26-
(wheel)="spinOnEdit($event)"
27-
[disabled]="disabled" />
12+
<input type="text" [igxMask]="mask" igxInput
13+
[includeLiterals]="true" [placeholder]="format"
14+
[displayValuePipe]="displayFormat" [focusedValuePipe]="inputFormat" [promptChar]="promptChar"
15+
[value]="displayValue" [igxTextSelection]="true" (input)="onInput($event)" (blur)="onBlur($event)"
16+
(focus)="onFocus($event)" (wheel)="spinOnEdit($event)" [disabled]="disabled" />
2817
<igx-suffix *ngIf="showClearButton" igxRipple (click)="clear()">
2918
<igx-icon fontSet="material">clear</igx-icon>
3019
</igx-suffix>
3120
</igx-input-group>
32-
</ng-template>
33-
<ng-template #defaultTimePickerTemplate>
34-
<igx-input-group (click)="openDialog()" (mousedown)="mouseDown($event)">
21+
</ng-template> -->
22+
23+
<!-- <ng-template #defaultTimePickerTemplate>
24+
<igx-input-group (click)="open()" (mousedown)="mouseDown($event)">
3525
<igx-prefix>
3626
<igx-icon>access_time</igx-icon>
3727
</igx-prefix>
@@ -44,8 +34,58 @@
4434
tabindex="0" readonly
4535
(blur)="onBlur($event)" />
4636
</igx-input-group>
37+
</ng-template> -->
38+
<!-- [igxTextSelection]="true" -->
39+
40+
<!-- (mousedown)="mouseDown($event)" -->
41+
<igx-input-group [suppressInputAutofocus]="this.isDropdown" (click)="!this.isDropdown && open()">
42+
<input igxInput [igxDateTimeEditor]="this.inputFormat" type="text"
43+
[readonly]="!this.isDropdown" tabindex="0"
44+
[value]="this.value"
45+
[displayFormat]="this.displayFormat"
46+
[placeholder]="this.placeholder"
47+
role="combobox" aria-haspopup="dialog"
48+
[attr.aria-expanded]="!toggle.collapsed"
49+
[attr.aria-labelledby]="this.label?.id"
50+
(wheel)="spinOnEdit($event)"
51+
/>
52+
53+
<igx-prefix *ngIf="!this.toggleComponents.length" (click)="open()">
54+
<ng-container *ngTemplateOutlet="defaultToggleIcon"></ng-container>
55+
</igx-prefix>
56+
57+
<igx-suffix *ngIf="showClearButton" igxRipple (click)="clear()">
58+
<ng-container *ngTemplateOutlet="defaultClearIcon"></ng-container>
59+
</igx-suffix>
60+
61+
<ng-container ngProjectAs="[igxLabel]">
62+
<ng-content select="[igxLabel]"></ng-content>
63+
</ng-container>
64+
<ng-container ngProjectAs="igx-prefix">
65+
<ng-content select="igx-prefix,[igxPrefix]"></ng-content>
66+
</ng-container>
67+
<ng-container ngProjectAs="igx-suffix">
68+
<ng-content select="igx-suffix,[igxSuffix]"></ng-content>
69+
</ng-container>
70+
<ng-container ngProjectAs="igx-hint">
71+
<ng-content select="igx-hint,[igxHint]"></ng-content>
72+
</ng-container>
73+
</igx-input-group>
74+
75+
76+
<ng-template #defaultToggleIcon>
77+
<igx-icon fontSet="material">
78+
access_time
79+
</igx-icon>
4780
</ng-template>
48-
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
81+
82+
<ng-template #defaultClearIcon>
83+
<igx-icon fontSet="material">
84+
clear
85+
</igx-icon>
86+
</ng-template>
87+
88+
<!-- <ng-container *ngTemplateOutlet="template; context: context"></ng-container> -->
4989

5090
<ng-template #defaultTimePickerActions>
5191
<div *ngIf="cancelButtonLabel || okButtonLabel" class="igx-time-picker__buttons">
@@ -57,9 +97,11 @@
5797
</button>
5898
</div>
5999
</ng-template>
60-
<div igxToggle class="igx-time-picker"
61-
[ngClass]="{'igx-time-picker--dropdown': mode === 'dropdown', 'igx-time-picker--vertical': vertical && mode === 'dialog'}">
62-
<div *ngIf="mode === 'dialog'" class="igx-time-picker__header">
100+
101+
102+
<div #toggle="toggle" igxToggle class="igx-time-picker"
103+
[ngClass]="{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': vertical && !this.isDropdown}">
104+
<div *ngIf="!this.isDropdown" class="igx-time-picker__header">
63105
<h5 class="igx-time-picker__header-ampm">{{ selectedAmPm }}</h5>
64106
<h2 class="igx-time-picker__header-hour">
65107
<span>{{ selectedHour }}</span>:<span>{{ selectedMinute }}</span>:<span>{{ selectedSeconds }}</span>
@@ -69,27 +111,27 @@ <h2 class="igx-time-picker__header-hour">
69111
<div class="igx-time-picker__body">
70112
<div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
71113
<span [igxHourItem]="hour"
72-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
73-
*ngFor="let hour of hourView">{{ hour }}</span>
114+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
115+
*ngFor="let hour of hourView">{{ hour }}</span>
74116
</div>
75117
<div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
76118
<span [igxMinuteItem]="minute"
77-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
78-
*ngFor="let minute of minuteView" >{{ minute }}</span>
119+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
120+
*ngFor="let minute of minuteView">{{ minute }}</span>
79121
</div>
80122
<div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
81123
<span [igxSecondsItem]="seconds"
82-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
83-
*ngFor="let seconds of secondsView">{{ seconds }}</span>
124+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
125+
*ngFor="let seconds of secondsView">{{ seconds }}</span>
84126
</div>
85127
<div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
86128
<span [igxAmPmItem]="ampm"
87-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.AMPM, ampm)}"
88-
*ngFor="let ampm of ampmView">{{ ampm }}</span>
129+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.AMPM, ampm)}"
130+
*ngFor="let ampm of ampmView">{{ ampm }}</span>
89131
</div>
90132
</div>
91133
<ng-container
92134
*ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions">
93135
</ng-container>
94136
</div>
95-
</div>
137+
</div>

0 commit comments

Comments
 (0)