Skip to content

Commit a2695ac

Browse files
committed
refactor: Addressed PR review comments
1 parent 17ab398 commit a2695ac

File tree

7 files changed

+69
-77
lines changed

7 files changed

+69
-77
lines changed

src/components/calendar/base.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,6 @@ export class IgcCalendarBaseComponent extends LitElement {
5151
@state()
5252
protected _disabledDates: DateRangeDescriptor[] = [];
5353

54-
public get value(): Date | null {
55-
return this._value ? this._value.native : null;
56-
}
57-
5854
/* blazorSuppress */
5955
/**
6056
* The current value of the calendar.
@@ -63,13 +59,13 @@ export class IgcCalendarBaseComponent extends LitElement {
6359
* @attr value
6460
*/
6561
@property({ converter: convertToDate })
66-
public set value(value: Date | string | null) {
62+
public set value(value: Date | string | null | undefined) {
6763
const converted = convertToDate(value);
6864
this._value = converted ? CalendarDay.from(converted) : null;
6965
}
7066

71-
public get values(): Date[] {
72-
return this._values ? this._values.map((v) => v.native) : [];
67+
public get value(): Date | null {
68+
return this._value ? this._value.native : null;
7369
}
7470

7571
/* blazorSuppress */
@@ -80,26 +76,30 @@ export class IgcCalendarBaseComponent extends LitElement {
8076
* @attr values
8177
*/
8278
@property({ converter: convertToDates })
83-
public set values(values: Date[] | string | null) {
79+
public set values(values: (Date | string)[] | string | null | undefined) {
8480
const converted = convertToDates(values);
8581
this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];
8682
}
8783

88-
public get activeDate(): Date {
89-
return this._activeDate.native;
84+
public get values(): Date[] {
85+
return this._values ? this._values.map((v) => v.native) : [];
9086
}
9187

9288
/* blazorSuppress */
9389
/** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */
9490
@property({ attribute: 'active-date', converter: convertToDate })
95-
public set activeDate(value: Date | string) {
91+
public set activeDate(value: Date | string | null | undefined) {
9692
this._initialActiveDateSet = true;
9793
const converted = convertToDate(value);
9894
this._activeDate = converted
9995
? CalendarDay.from(converted)
10096
: CalendarDay.today;
10197
}
10298

99+
public get activeDate(): Date {
100+
return this._activeDate.native;
101+
}
102+
103103
/**
104104
* Sets the type of selection in the component.
105105
* @attr selection

src/components/calendar/calendar.interaction.spec.ts

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@ describe('Calendar interactions', () => {
5353
expect(date.equalTo(calendar.value!)).to.be.true;
5454

5555
// Invalid date
56-
calendar.value = new Date('s');
57-
expect(calendar.value).to.be.null;
56+
for (const each of [new Date('s'), '', null, undefined]) {
57+
calendar.value = each;
58+
expect(calendar.value).to.be.null;
59+
}
5860
});
5961

6062
it('setting `values` attribute', async () => {
@@ -76,19 +78,51 @@ describe('Calendar interactions', () => {
7678
const date_1 = new CalendarDay({ year: 2022, month: 0, date: 19 });
7779
const date_2 = date_1.set({ date: 22 });
7880

81+
const date_1_str = date_1.native.toISOString();
82+
const date_2_str = date_2.native.toISOString();
83+
7984
calendar.selection = 'multiple';
80-
calendar.values = `${date_1.native.toISOString()}, ${date_2.native.toISOString()}`;
85+
calendar.values = `${date_1_str}, ${date_2_str}`;
8186

8287
expect(calendar.values).lengthOf(2);
8388
expect(date_1.equalTo(first(calendar.values))).to.be.true;
8489
expect(date_2.equalTo(last(calendar.values))).to.be.true;
8590

86-
// Invalid dates
87-
calendar.values = 'nope, nope again';
88-
expect(calendar.values).is.empty;
91+
// Valid date combinations
92+
const validDates = [
93+
[date_1_str, date_2_str],
94+
[date_1.native, date_2.native],
95+
[date_1_str, date_2.native],
96+
];
97+
98+
for (const each of validDates) {
99+
calendar.values = each;
100+
expect(calendar.values).lengthOf(2);
101+
expect(date_1.equalTo(first(calendar.values))).to.be.true;
102+
expect(date_2.equalTo(last(calendar.values))).to.be.true;
103+
}
104+
105+
// Mixed date combinations
106+
calendar.values = [date_1.native, new Date(), new Date('s'), date_1_str];
107+
expect(calendar.values).lengthOf(3);
108+
109+
calendar.values = ['invalid', date_1_str, date_2_str, date_2.native];
110+
expect(calendar.values).lengthOf(3);
111+
112+
// Invalid date combinations
113+
const invalidDates = [
114+
'',
115+
null,
116+
undefined,
117+
[new Date('s'), 'abc'],
118+
'abcde, abcde',
119+
['a', 'b', 'c', new Date('invalid')],
120+
];
89121

90-
calendar.values = '';
91-
expect(calendar.values).is.empty;
122+
for (const each of invalidDates) {
123+
calendar.values = each;
124+
expect(calendar.values).is.empty;
125+
}
92126
});
93127

94128
it('clicking previous/next buttons in days view', async () => {

src/components/calendar/calendar.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -700,7 +700,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
700700
}
701701

702702
this.emitEvent('igcChange', {
703-
detail: this._isSingle ? this.value : this.values,
703+
detail: this._isSingle ? (this.value as Date) : this.values,
704704
});
705705
}
706706

src/components/calendar/helpers.ts

Lines changed: 7 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -44,23 +44,8 @@ const DaysMap = {
4444
* If the value is a string, it is parsed into a Date object.
4545
* If the value is null or undefined, null is returned.
4646
* If the parsing fails, null is returned.
47-
*
48-
* @param value The value to convert.
49-
* @returns The converted Date object, or null if the conversion fails.
50-
*
51-
* @example
52-
* ```typescript
53-
* const dateString = '2023-11-11T12:34:56Z';
54-
* const dateObject = new Date('2023-11-11T12:34:56Z');
55-
* const nullValue = null;
56-
57-
* const result1 = convertToDate(dateString); // Date object
58-
* const result2 = convertToDate(dateObject); // Date object
59-
* const result3 = convertToDate(nullValue); // null
60-
* const result4 = convertToDate('invalid-date-string'); // null
61-
* ```
6247
*/
63-
export function convertToDate(value: Date | string | null): Date | null {
48+
export function convertToDate(value?: Date | string | null): Date | null {
6449
if (!value) {
6550
return null;
6651
}
@@ -74,47 +59,21 @@ export function convertToDate(value: Date | string | null): Date | null {
7459
*
7560
* If the `value` is a `Date` object, it is converted to an ISO 8601 string.
7661
* If the `value` is null or undefined, null is returned.
77-
*
78-
* @param value The Date object to convert.
79-
* @returns The ISO 8601 string representation of the Date object, or null if the value is null or undefined.
80-
*
81-
* @example
82-
* ```typescript
83-
* const dateObject = new Date('2023-11-11T12:34:56Z');
84-
* const nullValue = null;
85-
86-
* const result1 = getDateFormValue(dateObject); // "2023-11-11T12:34:56.000Z"
87-
* const result2 = getDateFormValue(nullValue); // null
88-
* ```
8962
*/
9063
export function getDateFormValue(value: Date | null) {
9164
return value ? value.toISOString() : null;
9265
}
9366

9467
/**
95-
* Converts an array of Date objects or a comma-separated string of ISO 8601 dates into an array of Date objects.
96-
97-
* If the `value` is an array of `Date` objects, it is returned directly.
98-
* If the `value` is a string, it is split by commas and each part is parsed into a `Date` object.
68+
* Converts a comma-separated string of ISO 8601 dates or an array of Date objects | ISO 8601 strings into
69+
* an array of Date objects.
70+
*
9971
* If the `value` is null or undefined, null is returned.
72+
* If the `value` is an array of `Date` objects, a filtered array of valid `Date` objects is returned.
73+
* If the `value` is a string, it is split by commas and each part is parsed into a `Date` object.
10074
* If the parsing fails for any date, it is skipped.
101-
102-
* @param value The value to convert.
103-
* @returns An array of Date objects, or null if the conversion fails for all values.
104-
105-
* @example
106-
* ```typescript
107-
* const dateStrings = '2023-11-11T12:34:56Z,2023-12-12T13:45:00Z';
108-
* const dateObjects = [new Date('2023-11-11T12:34:56Z'), new Date('2023-12-12T13:45:00Z')];
109-
* const nullValue = null;
110-
111-
* const result1 = convertToDates(dateStrings); // [Date, Date]
112-
* const result2 = convertToDates(dateObjects); // [Date, Date]
113-
* const result3 = convertToDates(nullValue); // null
114-
* const result4 = convertToDates('invalid-date-string,2023-11-11T12:34:56Z'); // [Date]
115-
* ```
11675
*/
117-
export function convertToDates(value: Date[] | string | null) {
76+
export function convertToDates(value?: (Date | string)[] | string | null) {
11877
if (!value) {
11978
return null;
12079
}
@@ -134,7 +93,6 @@ export function convertToDates(value: Date[] | string | null) {
13493

13594
/**
13695
* Returns the value of the selected/activated element (day/month/year) in the calendar view.
137-
*
13896
*/
13997
export function getViewElement(event: Event) {
14098
const element = findElementFromEventPath<HTMLElement>('[data-value]', event);

src/components/calendar/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ export type WeekDays =
2323
| 'saturday';
2424

2525
export interface IgcCalendarComponentEventMap {
26-
igcChange: CustomEvent<Date | Date[] | null>;
26+
igcChange: CustomEvent<Date | Date[]>;
2727
}

src/components/date-picker/date-picker.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
245245
* @attr
246246
*/
247247
@property({ converter: convertToDate })
248-
public set value(value: Date | string | null) {
248+
public set value(value: Date | string | null | undefined) {
249249
this._value = convertToDate(value);
250250
this._setFormValue(getDateFormValue(this._value));
251251
this._validate();
@@ -260,7 +260,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
260260
* By default it is the current date.
261261
*/
262262
@property({ attribute: 'active-date', converter: convertToDate })
263-
public set activeDate(value: Date | null) {
263+
public set activeDate(value: Date | string | null | undefined) {
264264
this._activeDate = convertToDate(value);
265265
}
266266

@@ -273,7 +273,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
273273
* @attr
274274
*/
275275
@property({ converter: convertToDate })
276-
public set min(value: Date | string) {
276+
public set min(value: Date | string | null | undefined) {
277277
this._min = convertToDate(value);
278278
this.setDateConstraints();
279279
this._updateValidity();
@@ -288,7 +288,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
288288
* @attr
289289
*/
290290
@property({ converter: convertToDate })
291-
public set max(value: Date | string) {
291+
public set max(value: Date | string | null | undefined) {
292292
this._max = convertToDate(value);
293293
this.setDateConstraints();
294294
this._updateValidity();

src/components/date-time-input/date-time-input.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
127127
* @attr
128128
*/
129129
@property({ converter: convertToDate })
130-
public set value(value: Date | string | null) {
130+
public set value(value: Date | string | null | undefined) {
131131
this._value = convertToDate(value);
132132
this._setFormValue(getDateFormValue(this._value));
133133
this.updateMask();
@@ -139,7 +139,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
139139
* @attr
140140
*/
141141
@property({ converter: convertToDate })
142-
public set min(value: Date | string | null) {
142+
public set min(value: Date | string | null | undefined) {
143143
this._min = convertToDate(value);
144144
this._updateValidity();
145145
}
@@ -153,7 +153,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
153153
* @attr
154154
*/
155155
@property({ converter: convertToDate })
156-
public set max(value: Date | string | null) {
156+
public set max(value: Date | string | null | undefined) {
157157
this._max = convertToDate(value);
158158
this._updateValidity();
159159
}

0 commit comments

Comments
 (0)