Skip to content

Commit 2c5caf1

Browse files
ddariboddaribo
committed
refactor: predefined ranges component
1 parent 7306120 commit 2c5caf1

File tree

4 files changed

+72
-62
lines changed

4 files changed

+72
-62
lines changed

‎src/components/date-range-picker/date-range-picker.common.spec.ts‎

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
simulateClick,
1616
simulateKeyboard,
1717
} from '../common/utils.spec.js';
18+
import IgcDialogComponent from '../dialog/dialog.js';
19+
import IgcPopoverComponent from '../popover/popover.js';
1820
import IgcDateRangePickerComponent, {
1921
type CustomDateRange,
2022
} from './date-range-picker.js';
@@ -23,6 +25,7 @@ import {
2325
getIcon,
2426
selectDates,
2527
} from './date-range-picker.utils.spec.js';
28+
import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
2629

2730
describe('Date range picker - common tests for single and two inputs mode', () => {
2831
before(() => defineComponents(IgcDateRangePickerComponent));
@@ -51,7 +54,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
5154
expect(picker.mode).to.equal('dropdown');
5255
await picker.show();
5356

54-
const popover = picker.renderRoot.querySelector('igc-popover');
57+
const popover = picker.renderRoot.querySelector(
58+
IgcPopoverComponent.tagName
59+
);
5560
expect(popover).not.to.be.undefined;
5661
expect(calendar).not.to.be.undefined;
5762
expect(calendar.parentElement).to.have.tagName('igc-focus-trap');
@@ -70,7 +75,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
7075
expect(picker.mode).to.equal('dialog');
7176
await picker.show();
7277

73-
const dialog = picker.renderRoot.querySelector('igc-dialog');
78+
const dialog = picker.renderRoot.querySelector(
79+
IgcDialogComponent.tagName
80+
);
7481
expect(dialog).not.to.be.undefined;
7582
expect(calendar).not.to.be.undefined;
7683
expect(calendar.parentElement).to.equal(dialog);
@@ -379,7 +386,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
379386
await elementUpdated(picker);
380387

381388
expect(eventSpy).not.to.be.calledWith('igcChange');
382-
const dialog = picker.renderRoot.querySelector('igc-dialog');
389+
const dialog = picker.renderRoot.querySelector(
390+
IgcDialogComponent.tagName
391+
);
383392
expect(dialog?.hasAttribute('open')).to.equal(true);
384393

385394
const doneBtn = picker.shadowRoot!.querySelector(
@@ -453,7 +462,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
453462
simulateKeyboard(picker, [altKey, arrowDown]);
454463
await elementUpdated(picker);
455464

456-
const dialog = picker.renderRoot.querySelector('igc-dialog');
465+
const dialog = picker.renderRoot.querySelector(
466+
IgcDialogComponent.tagName
467+
);
457468
expect(picker.open).to.be.true;
458469
expect(dialog?.open).to.be.true;
459470
expect(eventSpy).calledWith('igcOpening');
@@ -588,7 +599,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
588599

589600
it('should emit igcChange when predefined date is selected and should close the picker - dropdown mode', async () => {
590601
const eventSpy = spy(picker, 'emitEvent');
591-
const popover = picker.renderRoot.querySelector('igc-popover');
602+
const popover = picker.renderRoot.querySelector(
603+
IgcPopoverComponent.tagName
604+
);
592605

593606
picker.usePredefinedRanges = true;
594607
picker.customRanges = customRanges;
@@ -597,26 +610,26 @@ describe('Date range picker - common tests for single and two inputs mode', () =
597610
await elementUpdated(picker);
598611

599612
const predefinedArea = picker.renderRoot.querySelectorAll(
600-
'igc-predefined-ranges-area'
613+
IgcPredefinedRangesAreaComponent.tagName
601614
);
602615
const allRanges = (predefinedArea[0] as any)._allRanges;
603616

604-
for (let i = 0; i < allRanges.length; i++) {
617+
for (const range of allRanges) {
605618
picker.open = true;
606619
await elementUpdated(picker);
607620
predefinedArea[0].dispatchEvent(
608-
new CustomEvent('range-select', { detail: allRanges[i] })
621+
new CustomEvent('rangeSelect', { detail: range.dateRange })
609622
);
610623
await elementUpdated(picker);
611624

612625
expect(eventSpy).calledWith('igcChange');
613-
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
626+
expect(picker.activeDate).to.deep.equal(range.dateRange.start);
614627

615628
checkSelectedRange(
616629
picker,
617630
{
618-
start: allRanges[i].dateRange.start,
619-
end: allRanges[i].dateRange.end,
631+
start: range.dateRange.start,
632+
end: range.dateRange.end,
620633
},
621634
false
622635
);
@@ -637,27 +650,29 @@ describe('Date range picker - common tests for single and two inputs mode', () =
637650
picker.open = true;
638651
await elementUpdated(picker);
639652

640-
let dialog = picker.renderRoot.querySelector('igc-dialog');
653+
let dialog = picker.renderRoot.querySelector(
654+
IgcDialogComponent.tagName
655+
);
641656
const predefinedArea = picker.renderRoot.querySelectorAll(
642-
'igc-predefined-ranges-area'
657+
IgcPredefinedRangesAreaComponent.tagName
643658
);
644659
const allRanges = (predefinedArea[0] as any)._allRanges;
645660

646-
for (let i = 0; i < allRanges.length; i++) {
661+
for (const range of allRanges) {
647662
picker.open = true;
648-
dialog = picker.renderRoot.querySelector('igc-dialog');
663+
dialog = picker.renderRoot.querySelector(IgcDialogComponent.tagName);
649664
await elementUpdated(picker);
650665
predefinedArea[0].dispatchEvent(
651-
new CustomEvent('range-select', { detail: allRanges[i] })
666+
new CustomEvent('rangeSelect', { detail: range.dateRange })
652667
);
653668
await elementUpdated(picker);
654669

655-
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
670+
expect(picker.activeDate).to.deep.equal(range.dateRange.start);
656671
checkSelectedRange(
657672
picker,
658673
{
659-
start: allRanges[i].dateRange.start,
660-
end: allRanges[i].dateRange.end,
674+
start: range.dateRange.start,
675+
end: range.dateRange.end,
661676
},
662677
false
663678
);
@@ -677,36 +692,38 @@ describe('Date range picker - common tests for single and two inputs mode', () =
677692
}
678693
});
679694

680-
it('should render only custom chips, when usePredefinedRanges is false and emit igcChange when custeom date is selected', async () => {
695+
it('should render only custom chips, when usePredefinedRanges is false and emit igcChange when custom date is selected', async () => {
681696
const eventSpy = spy(picker, 'emitEvent');
682-
const popover = picker.renderRoot.querySelector('igc-popover');
697+
const popover = picker.renderRoot.querySelector(
698+
IgcPopoverComponent.tagName
699+
);
683700

684701
picker.usePredefinedRanges = false;
685702
picker.customRanges = customRanges;
686703
picker.open = true;
687704
await elementUpdated(picker);
688705

689706
const predefinedArea = picker.renderRoot.querySelectorAll(
690-
'igc-predefined-ranges-area'
707+
IgcPredefinedRangesAreaComponent.tagName
691708
);
692709
const allRanges = (predefinedArea[0] as any)._allRanges;
693710

694-
for (let i = 0; i < allRanges.length; i++) {
711+
for (const range of allRanges) {
695712
picker.open = true;
696713
await elementUpdated(picker);
697714
predefinedArea[0].dispatchEvent(
698-
new CustomEvent('range-select', { detail: allRanges[i] })
715+
new CustomEvent('rangeSelect', { detail: range.dateRange })
699716
);
700717
await elementUpdated(picker);
701718

702719
expect(eventSpy).calledWith('igcChange');
703-
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
720+
expect(picker.activeDate).to.deep.equal(range.dateRange.start);
704721

705722
checkSelectedRange(
706723
picker,
707724
{
708-
start: allRanges[i].dateRange.start,
709-
end: allRanges[i].dateRange.end,
725+
start: range.dateRange.start,
726+
end: range.dateRange.end,
710727
},
711728
false
712729
);

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

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
DateRangeType,
2121
type WeekDays,
2222
} from '../calendar/types.js';
23-
import IgcChipComponent from '../chip/chip.js';
2423
import {
2524
addKeybindings,
2625
altKey,
@@ -218,7 +217,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
218217
IgcInputComponent,
219218
IgcFocusTrapComponent,
220219
IgcIconComponent,
221-
IgcChipComponent,
222220
IgcPopoverComponent,
223221
IgcDialogComponent,
224222
IgcValidationContainerComponent,
@@ -938,36 +936,16 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
938936
}
939937
}
940938

941-
private _select(value: DateRangeValue | null, chipSelection = false) {
939+
private _select(value: DateRangeValue | null, emitEvent = false) {
942940
this.value = value;
943941
this._calendar.activeDate =
944942
this._firstDefinedInRange ?? this._calendar.activeDate;
945-
if (chipSelection && this._isDropDown) {
943+
if (emitEvent) {
946944
this.emitEvent('igcChange', { detail: this.value });
947945
this._hide(true);
948946
}
949947
}
950948

951-
private _selectPredefinedRange(e: CustomEvent) {
952-
const range: CustomDateRange = e.detail;
953-
this._select(
954-
{ start: range.dateRange.start, end: range.dateRange.end },
955-
true
956-
);
957-
}
958-
959-
private _clear(checkReadOnly = false) {
960-
if (checkReadOnly && this.readOnly) {
961-
return;
962-
}
963-
this._oldValue = this.value;
964-
this.value = null;
965-
if (this.useTwoInputs) {
966-
this._inputs[0]?.clear();
967-
this._inputs[1]?.clear();
968-
}
969-
}
970-
971949
// #endregion
972950

973951
// #region Rendering
@@ -1087,6 +1065,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
10871065
.usePredefinedRanges=${this.usePredefinedRanges}
10881066
.customRanges=${this.customRanges}
10891067
.resourceStrings=${this.resourceStrings}
1068+
@rangeSelect=${(e: CustomEvent<DateRangeValue>) =>
1069+
this._select(e.detail, true)}
10901070
>
10911071
</igc-predefined-ranges-area>
10921072
${this._renderActions()}
@@ -1109,6 +1089,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
11091089
.usePredefinedRanges=${this.usePredefinedRanges}
11101090
.customRanges=${this.customRanges}
11111091
.resourceStrings=${this.resourceStrings}
1092+
@rangeSelect=${(e: CustomEvent<DateRangeValue>) =>
1093+
this._select(e.detail)}
11121094
>
11131095
</igc-predefined-ranges-area>
11141096
<igc-button

‎src/components/date-range-picker/predefined-ranges-area.spec.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
22

33
import { spy } from 'sinon';
44
import { CalendarDay } from '../calendar/model.js';
5+
import IgcChipComponent from '../chip/chip.js';
56
import { defineComponents } from '../common/definitions/defineComponents.js';
67
import type { CustomDateRange } from './date-range-picker.js';
78
import IgcPredefinedRangesAreaComponent from './predefined-ranges-area.js';
@@ -91,7 +92,9 @@ describe('Predefined Area', () => {
9192
);
9293

9394
const predefinedRanges = (component as any)._predefinedRanges;
94-
const chips = component.renderRoot.querySelectorAll('igc-chip');
95+
const chips = component.renderRoot.querySelectorAll(
96+
IgcChipComponent.tagName
97+
);
9598

9699
expect((component as any)._allRanges.length).to.equal(chips.length);
97100

@@ -106,7 +109,9 @@ describe('Predefined Area', () => {
106109
);
107110

108111
const allRanges = (component as any)._allRanges;
109-
const chips = component.renderRoot.querySelectorAll('igc-chip');
112+
const chips = component.renderRoot.querySelectorAll(
113+
IgcChipComponent.tagName
114+
);
110115

111116
expect(allRanges.length).to.equal(chips.length);
112117

@@ -120,7 +125,9 @@ describe('Predefined Area', () => {
120125
await elementUpdated(component);
121126

122127
const allRanges = (component as any)._allRanges;
123-
const chips = component.renderRoot.querySelectorAll('igc-chip');
128+
const chips = component.renderRoot.querySelectorAll(
129+
IgcChipComponent.tagName
130+
);
124131

125132
expect(customRanges.length).to.equal(chips.length);
126133

@@ -135,9 +142,11 @@ describe('Predefined Area', () => {
135142
);
136143

137144
const eventSpy = spy();
138-
component.addEventListener('range-select', eventSpy);
145+
component.addEventListener('rangeSelect', eventSpy);
139146
const allRanges = (component as any)._allRanges;
140-
const chips = component.renderRoot.querySelectorAll('igc-chip');
147+
const chips = component.renderRoot.querySelectorAll(
148+
IgcChipComponent.tagName
149+
);
141150

142151
expect(allRanges.length).to.equal(chips.length);
143152

@@ -147,7 +156,8 @@ describe('Predefined Area', () => {
147156
chips[i].click();
148157
await elementUpdated(component);
149158

150-
expect(eventSpy.calledWithMatch({ detail: allRanges[i] })).to.be.true;
159+
expect(eventSpy.calledWithMatch({ detail: allRanges[i].dateRange })).to
160+
.be.true;
151161
}
152162
});
153163
});

‎src/components/date-range-picker/predefined-ranges-area.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,10 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
8888
: [...this.customRanges];
8989
}
9090

91-
private handleRangeSelect(range: CustomDateRange) {
92-
const event = new CustomEvent('range-select', { detail: range });
93-
this.dispatchEvent(event);
91+
private _handleRangeSelect(range: CustomDateRange) {
92+
this.dispatchEvent(
93+
new CustomEvent('rangeSelect', { detail: range.dateRange })
94+
);
9495
}
9596

9697
protected override render() {
@@ -101,7 +102,7 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
101102
>
102103
${this._allRanges.map(
103104
(range) => html`
104-
<igc-chip @click=${() => this.handleRangeSelect(range)}>
105+
<igc-chip @click=${() => this._handleRangeSelect(range)}>
105106
${range.label}
106107
</igc-chip>
107108
`
@@ -112,7 +113,7 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
112113
}
113114

114115
declare global {
115-
interface HtmlElementTagNameMap {
116+
interface HTMLElementTagNameMap {
116117
'igc-predefined-ranges-area': IgcPredefinedRangesAreaComponent;
117118
}
118119
}

0 commit comments

Comments
 (0)