ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #704 from ing-bank/fix/reset-calendar

Browse source 
fix(calendar): reset centralDate, focusedDate and disableDates
This commit is contained in:
Thijs Louisse 2021-04-15 09:39:33 +02:00 committed by GitHub
commit 749a4a4bf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/shaggy-wasps-doubt.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/calendar': patch
'@lion/input-datepicker': patch
---
Calendar allows to reinitialize centralDate properly. Datepicker calls this functionality on opening the calendar.

15
packages/calendar/src/LionCalendar.js
View file

@ -324,6 +324,19 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
}
}
/**
* This exposes an interface for datepickers that want to
* reinitialize when calendar is opened
*/
initCentralDate() {
if (this.selectedDate) {
this.focusSelectedDate();
} else {
this.centralDate = /** @type {Date} */ (this.__initialCentralDate);
this.focusCentralDate();
}
}
/**
* @private
*/
@ -334,6 +347,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
} else {
this.__ensureValidCentralDate();
}
/** @type {Date} */
this.__initialCentralDate = this.centralDate;
}
/**

33
packages/calendar/test/lion-calendar.test.js
View file

@ -20,7 +20,7 @@ describe('<lion-calendar>', () => {
localizeTearDown();
});
describe.skip('Structure', () => {
describe('Structure', () => {
it('implements BEM structure', async () => {
const el = await fixture(html`<lion-calendar></lion-calendar>`);
@ -209,6 +209,17 @@ describe('<lion-calendar>', () => {
expect(elObj.selectedDayObj).to.be.undefined;
});
it('recalculates "centralDate" when "selectedDate" is reset', async () => {
const el = await fixture(html`
<lion-calendar .selectedDate="${new Date('2019/06/15')}"></lion-calendar>
`);
const elObj = new CalendarObject(el);
el.selectedDate = undefined;
await el.updateComplete;
expect(elObj.selectedDayObj).to.be.undefined;
expect(isSameDate(el.centralDate, new Date('2019/06/15'))).to.be.true;
});
it('sends event "user-selected-date-changed" when user selects a date', async () => {
const dateChangedSpy = sinon.spy();
const el = await fixture(html`
@ -289,6 +300,26 @@ describe('<lion-calendar>', () => {
expect(elObj.getDayObj(7).isFocused).to.be.true;
});
it('has a initCentralDate() method for external contexts like datepickers', async () => {
const initialCentralDate = new Date('2014/07/05');
const initialSelectedDate = new Date('2014/07/07');
const el = await fixture(html`<lion-calendar
.centralDate="${initialCentralDate}"
.selectedDate="${initialSelectedDate}"
></lion-calendar>`);
expect(el.selectedDate).to.equal(initialSelectedDate);
expect(el.centralDate).to.equal(initialCentralDate);
const newSelectedDate = new Date('2015/07/05');
el.selectedDate = newSelectedDate;
el.initCentralDate();
expect(el.centralDate).to.equal(newSelectedDate);
el.selectedDate = undefined;
el.initCentralDate();
expect(el.centralDate).to.equal(initialCentralDate);
});
describe('Enabled Dates', () => {
it('disables all days before "minDate" property', async () => {
const el = await fixture(html`

7
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -352,14 +352,11 @@ export class LionInputDatepicker extends ScopedElementsMixin(
/**
* Lifecycle callback for subclassers
* @overridable
*/
_onCalendarOverlayOpened() {
if (this._focusCentralDateOnCalendarOpen) {
if (this._calendarNode.selectedDate) {
this._calendarNode.focusSelectedDate();
} else {
this._calendarNode.focusCentralDate();
}
this._calendarNode.initCentralDate();
}
}

23
packages/input-datepicker/test-helpers/DatepickerInputObject.js
View file

@ -8,20 +8,23 @@ export class DatepickerInputObject {
/**
* Methods mimicing User Interaction
* @param {{click?:boolean}} [options]
*/
async openCalendar() {
async openCalendar({ click } = {}) {
// Make sure the calendar is opened, not closed/toggled;
this.overlayController.hide();
this.invokerEl.click();
const completePromises = [];
if (this.overlayEl) {
completePromises.push(this.overlayEl.updateComplete);
if (click) {
this.invokerEl.click();
const completePromises = [];
if (this.overlayEl) {
completePromises.push(this.overlayEl.updateComplete);
}
if (this.calendarEl) {
completePromises.push(this.calendarEl.updateComplete);
}
return Promise.all(completePromises);
}
if (this.calendarEl) {
completePromises.push(this.calendarEl.updateComplete);
}
return Promise.all(completePromises);
return this.el.__openCalendarOverlay();
}
async closeCalendar() {

27
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -151,10 +151,10 @@ describe('<lion-input-datepicker>', () => {
const el = await fixture(html`<lion-input-datepicker disabled></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar();
await elObj.openCalendar({ click: true });
expect(elObj.overlayController.isShown).to.equal(false);
el.disabled = false;
await elObj.openCalendar();
await elObj.openCalendar({ click: true });
expect(elObj.overlayController.isShown).to.equal(true);
});
@ -162,10 +162,10 @@ describe('<lion-input-datepicker>', () => {
const el = await fixture(html`<lion-input-datepicker readonly></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar();
await elObj.openCalendar({ click: true });
expect(elObj.overlayController.isShown).to.equal(false);
el.readOnly = false;
await elObj.openCalendar();
await elObj.openCalendar({ click: true });
expect(elObj.overlayController.isShown).to.equal(true);
});
});
@ -184,6 +184,25 @@ describe('<lion-input-datepicker>', () => {
expect(isSameDate(/** @type {Date} */ (el.modelValue), myOtherDate)).to.be.true;
});
it('restores centralDate when modelValue is cleared', async () => {
const myDate = new Date('2019/06/15');
const el = await fixture(html` <lion-input-datepicker></lion-input-datepicker> `);
const elObj = new DatepickerInputObject(el);
const initialCentralDate = elObj.calendarEl.centralDate;
el.modelValue = myDate;
await elObj.openCalendar();
expect(elObj.calendarEl.selectedDate).to.equal(myDate);
expect(elObj.calendarEl.centralDate).to.equal(myDate);
el.modelValue = undefined;
expect(elObj.calendarEl.centralDate).to.equal(myDate);
await elObj.closeCalendar();
await elObj.openCalendar();
expect(elObj.calendarEl.centralDate).to.equal(initialCentralDate);
});
it('closes the calendar overlay on "user-selected-date-changed"', async () => {
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);