fix: align days and week days on calendar #31641
Conversation
|
@0xmiroslav Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
@0xmiroslav just following up on this PR. |
|
reviewing... |
| for (let i = matrix[0].length; i < 7; i++) { | ||
| matrix[0].unshift(null); | ||
| } | ||
|
|
There was a problem hiding this comment.
What's the reason for this change? push vs unshift
There was a problem hiding this comment.
Unshift will add the empty days at the beginning of the calendar. The way it was done before (see snippet below), it would FIRST add the empty spaces (push) but now we add all the days first and only then we add the empty spaces at the beginning (unshift)
for (let i = 0; i < getDay(firstDayOfMonth); i++) {
currentWeek.push(null);
}this no longer works because now our week starts on 1 and ends on 0 (and it could change). This breaks as the start is higher than the end (1,2,3,4,5,6,0).
hope this makes sense.
There was a problem hiding this comment.
I am on mobile so I missed on thing. The snippet I pasted above (old code) would go from 0 (start of the week assumed earlier - which is now wrong) until the first week day of the month (which before would always be 0 or higher). Now, because week starts on 1 (Sunday) the first week day of a month could be Sunday (0) and the loop would break and cause infinite loop. My change (unshift) accounts for any start of the week and any first week day of the month.
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid.movAndroid: mWeb Chromemchrome.moviOS: Nativeios.moviOS: mWeb Safarimsafari.movMacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
| /** | ||
| * Get the day of the week that the week starts on | ||
| */ | ||
| function getWeekStartsOn(): WeekDay { |
There was a problem hiding this comment.
Could also be renamed to getWeekStartDay and similar for end function below
There was a problem hiding this comment.
@MonilBhavsar the idea was to follow the same naming convention used date-fns which is the underlying library we use:
This allows us to do things like this:
const weekStartsOn = getWeekStartsOn();
const startOfCurrentWeek = startOfWeek(new Date(), {weekStartsOn});
const endOfCurrentWeek = endOfWeek(new Date(), {weekStartsOn});instead of:
const weekStartDay = getWeekStartDay();
const startOfCurrentWeek = startOfWeek(new Date(), {weekStartsOn: weekStartDay});
const endOfCurrentWeek = endOfWeek(new Date(), {weekStartsOn: weekStartDay});IMO more readable and consistent to keep it as is (WEEK_STARTS_ON, getWeekStartsOn and getWeekEndsOn).
Thoughts?
There was a problem hiding this comment.
That makes sense 👍
let's keep it that way. thanks!
| const weekStartsOn = getWeekStartsOn(); | ||
|
|
||
| return weekStartsOn === 0 ? 6 : ((weekStartsOn - 1) as WeekDay); |
There was a problem hiding this comment.
start day is always constant, so this is not required now?
There was a problem hiding this comment.
Correct, it's not required, but the idea was to allow for flexibility. If we ever decide to switch to Sunday (which is the standard in the US, where most of our customers are), we won't have to remember to change it here as well (or have two constants). Also, there seem to be an appetite to make the start of the week dynamic at some point based on locale, so this function will be ready for it when/if that day comes.
| [11, 12, 13, 14, 15, 16, 17], | ||
| [18, 19, 20, 21, 22, 23, 24], | ||
| [25, 26, 27, 28, 29, 30, 31], | ||
| [null, null, null, 1, 2, 3, 4], |
There was a problem hiding this comment.
Can we add a matrix for some month of year 2025, may be?
There was a problem hiding this comment.
@MonilBhavsar added a few more tests including a month that starts on Monday, one that starts on Sunday, February (less days) and one more.
|
@barros001 looks good! You'll need to update author checklist for tests to pass |
Here's diff: #30699 |
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
|
@MonilBhavsar @0xmiroslav PR checklist updated. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/MonilBhavsar in version: 1.4.19-0 🚀
|
|
🚀 Deployed to production by https://github.com/mountiny in version: 1.4.19-2 🚀
|
Details
Fixed Issues
$ #31416
PROPOSAL: #31416 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel so the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop