From f7a1b7d53ff76e3ecb00f85c78a3dfe0daaf90d1 Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Mon, 10 Jul 2023 12:31:48 +0200 Subject: [PATCH 1/2] fix(calendar): Render exactly 6 weeks in every months --- .../calendar/src/utils/createMonth.js | 3 +- .../calendar/test/lion-calendar.test.js | 32 +++++++++++++++++-- .../calendar/test/utils/createMonth.test.js | 15 +++++++++ 3 files changed, 46 insertions(+), 4 deletions(-) diff --git a/packages/ui/components/calendar/src/utils/createMonth.js b/packages/ui/components/calendar/src/utils/createMonth.js index 637b270ba3..2284bb9b67 100644 --- a/packages/ui/components/calendar/src/utils/createMonth.js +++ b/packages/ui/components/calendar/src/utils/createMonth.js @@ -13,7 +13,6 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) { } const firstDayOfMonth = new Date(date); firstDayOfMonth.setDate(1); - const monthNumber = firstDayOfMonth.getMonth(); const weekOptions = { firstDayOfWeek }; const month = { @@ -27,7 +26,7 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) { const firstDayOfNextWeek = new Date(nextWeek.days[6].date); // last day of current week firstDayOfNextWeek.setDate(firstDayOfNextWeek.getDate() + 1); // make it first day of next week nextWeek = createWeek(firstDayOfNextWeek, weekOptions); - } while (nextWeek.days[0].date.getMonth() === monthNumber); + } while (month.weeks.length !== 6); return month; } diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js index cab8bc2496..4f0cc7880d 100644 --- a/packages/ui/components/calendar/test/lion-calendar.test.js +++ b/packages/ui/components/calendar/test/lion-calendar.test.js @@ -1280,11 +1280,25 @@ describe('', () => { expect(previousMonthDayObjs[2].cellIndex).to.equal(2); expect(previousMonthDayObjs[2].monthday).to.equal(31); - expect(nextMonthDayObjs.length).to.equal(2); + expect(nextMonthDayObjs.length).to.equal(9); expect(nextMonthDayObjs[0].cellIndex).to.equal(5); expect(nextMonthDayObjs[0].monthday).to.equal(1); expect(nextMonthDayObjs[1].cellIndex).to.equal(6); expect(nextMonthDayObjs[1].monthday).to.equal(2); + expect(nextMonthDayObjs[2].cellIndex).to.equal(0); + expect(nextMonthDayObjs[2].monthday).to.equal(3); + expect(nextMonthDayObjs[3].cellIndex).to.equal(1); + expect(nextMonthDayObjs[3].monthday).to.equal(4); + expect(nextMonthDayObjs[4].cellIndex).to.equal(2); + expect(nextMonthDayObjs[4].monthday).to.equal(5); + expect(nextMonthDayObjs[5].cellIndex).to.equal(3); + expect(nextMonthDayObjs[5].monthday).to.equal(6); + expect(nextMonthDayObjs[6].cellIndex).to.equal(4); + expect(nextMonthDayObjs[6].monthday).to.equal(7); + expect(nextMonthDayObjs[7].cellIndex).to.equal(5); + expect(nextMonthDayObjs[7].monthday).to.equal(8); + expect(nextMonthDayObjs[8].cellIndex).to.equal(6); + expect(nextMonthDayObjs[8].monthday).to.equal(9); }); it('renders days for next months in the last month of the year', async () => { @@ -1294,11 +1308,25 @@ describe('', () => { `), ); const { nextMonthDayObjs } = elObj; - expect(nextMonthDayObjs.length).to.equal(2); + expect(nextMonthDayObjs.length).to.equal(9); expect(nextMonthDayObjs[0].cellIndex).to.equal(5); expect(nextMonthDayObjs[0].monthday).to.equal(1); expect(nextMonthDayObjs[1].cellIndex).to.equal(6); expect(nextMonthDayObjs[1].monthday).to.equal(2); + expect(nextMonthDayObjs[2].cellIndex).to.equal(0); + expect(nextMonthDayObjs[2].monthday).to.equal(3); + expect(nextMonthDayObjs[3].cellIndex).to.equal(1); + expect(nextMonthDayObjs[3].monthday).to.equal(4); + expect(nextMonthDayObjs[4].cellIndex).to.equal(2); + expect(nextMonthDayObjs[4].monthday).to.equal(5); + expect(nextMonthDayObjs[5].cellIndex).to.equal(3); + expect(nextMonthDayObjs[5].monthday).to.equal(6); + expect(nextMonthDayObjs[6].cellIndex).to.equal(4); + expect(nextMonthDayObjs[6].monthday).to.equal(7); + expect(nextMonthDayObjs[7].cellIndex).to.equal(5); + expect(nextMonthDayObjs[7].monthday).to.equal(8); + expect(nextMonthDayObjs[8].cellIndex).to.equal(6); + expect(nextMonthDayObjs[8].monthday).to.equal(9); }); it('renders days for previous months in the first month of the year', async () => { diff --git a/packages/ui/components/calendar/test/utils/createMonth.test.js b/packages/ui/components/calendar/test/utils/createMonth.test.js index 56cead0ee1..1da6ade092 100644 --- a/packages/ui/components/calendar/test/utils/createMonth.test.js +++ b/packages/ui/components/calendar/test/utils/createMonth.test.js @@ -46,4 +46,19 @@ describe('createMonth', () => { }), ); }); + + it('creates exactly 6 weeks in every months', () => { + expect(compareMonth(createMonth(new Date('2026/02/12')))).to.deep.equal( + compareMonth({ + weeks: [ + createWeek(new Date('2026/02/01'), { firstDayOfWeek: 0 }), + createWeek(new Date('2026/02/08'), { firstDayOfWeek: 0 }), + createWeek(new Date('2026/02/15'), { firstDayOfWeek: 0 }), + createWeek(new Date('2026/02/22'), { firstDayOfWeek: 0 }), + createWeek(new Date('2026/03/01'), { firstDayOfWeek: 0 }), + createWeek(new Date('2026/03/08'), { firstDayOfWeek: 0 }), + ], + }), + ); + }); }); From 8aad984230a18d7a231d677221f6450760b0c9f2 Mon Sep 17 00:00:00 2001 From: Levente Gyulai Date: Mon, 10 Jul 2023 12:35:10 +0200 Subject: [PATCH 2/2] Add changeset --- .changeset/grumpy-buckets-hide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-buckets-hide.md diff --git a/.changeset/grumpy-buckets-hide.md b/.changeset/grumpy-buckets-hide.md new file mode 100644 index 0000000000..44176c8f4f --- /dev/null +++ b/.changeset/grumpy-buckets-hide.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +Render exactly 6 weeks in every months.