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

fix the bug that disabled date becomes central date (#2361)

Browse source 
* fix the bug that disabled date becomes central date

* add test

* Fix tests

* Fix lint error

* Add changeset

* Fix a typo
This commit is contained in:
ByoungYong Kim 2024-09-16 11:12:10 +02:00 committed by GitHub
parent 9f7935c1a3
commit bb1f347699
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/serious-mails-matter.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[calendar] Now central date would be nearest enabled date if today is disabled

14
packages/ui/components/calendar/src/LionCalendar.js
View file

@ -270,11 +270,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
this.__connectedCallbackDone = true;
this.__calculateInitialCentralDate();
// setup data for initial render
this.__data = this.__createData();
/**
* This logic needs to happen on firstUpdated, but every time the DOM node is moved as well
* since firstUpdated only runs once, this logic is moved here, but after updateComplete
@ -305,6 +300,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
}
}
firstUpdated() {
this.__calculateInitialCentralDate();
// setup data for initial render
this.__data = this.__createData();
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.__contentWrapperElement) {
@ -372,6 +374,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
if (this.centralDate === this.__today && this.selectedDate) {
// initialized with selectedDate only if user didn't provide another one
this.centralDate = this.selectedDate;
} else if (!this.__isEnabledDate(this.centralDate)) {
this.centralDate = this.findNearestEnabledDate(this.centralDate);
}
/** @type {Date} */
this.__initialCentralDate = this.centralDate;

39
packages/ui/components/calendar/test/lion-calendar.test.js
View file

@ -465,9 +465,8 @@ describe('<lion-calendar>', () => {
`);
clock.restore();
expect(isSameDate(el.centralDate, new Date('2019/06/03')), 'central date').to.be.true;
expect(isSameDate(elSetting.centralDate, new Date('2019/07/03')), 'central date').to.be
.true;
expect(isSameDate(el.centralDate, new Date('2019/07/03'))).to.be.true;
expect(isSameDate(elSetting.centralDate, new Date('2019/07/03'))).to.be.true;
});
describe('Normalization', () => {
@ -573,7 +572,7 @@ describe('<lion-calendar>', () => {
.disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
></lion-calendar>
`);
el.focusDate(el.findNearestEnabledDate());
el.focusDate(el.findNearestEnabledDate(new Date()));
await el.updateComplete;
const elObj = new CalendarObject(el);
@ -590,7 +589,7 @@ describe('<lion-calendar>', () => {
.disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
></lion-calendar>
`);
el.focusDate(el.findNearestEnabledDate());
el.focusDate(el.findNearestEnabledDate(new Date()));
await el.updateComplete;
expect(el.centralDate.getFullYear()).to.equal(1998);
@ -609,7 +608,7 @@ describe('<lion-calendar>', () => {
></lion-calendar>
`);
el.focusDate(el.findNearestEnabledDate());
el.focusDate(el.findNearestEnabledDate(new Date()));
await el.updateComplete;
expect(el.centralDate.getFullYear()).to.equal(2002);
@ -1262,6 +1261,34 @@ describe('<lion-calendar>', () => {
clock.restore();
});
it('is nearest to today if no selected date is available and today is disabled', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const calWithMin = await fixture(
html`<lion-calendar .minDate=${new Date('2000/12/25')}></lion-calendar>`,
);
const calObjWithMin = new CalendarObject(calWithMin);
expect(calObjWithMin.centralDayObj?.monthday).to.equal(25);
const calWithMax = await fixture(
html`<lion-calendar .maxDate=${new Date('2000/12/05')}></lion-calendar>`,
);
const calObjWithMax = new CalendarObject(calWithMax);
expect(calObjWithMax.centralDayObj?.monthday).to.equal(5);
const calWithDisabled = await fixture(
html`<lion-calendar
.disableDates=${/** @param {Date} date */ date => date.getDate() === 15}
></lion-calendar>`,
);
await calWithDisabled.updateComplete;
const calObjWithDisabled = new CalendarObject(calWithDisabled);
expect(calObjWithDisabled.centralDayObj?.monthday).to.equal(16);
clock.restore();
});
});
/**