website: planner: Autoscroll to current year card #3640
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@jacobkwan is attempting to deploy a commit to a Personal Account owned by @nusmodifications on Vercel. @nusmodifications first needs to authorize it. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #3640 +/- ##
==========================================
+ Coverage 54.52% 54.69% +0.17%
==========================================
Files 274 274
Lines 6076 6099 +23
Branches 1455 1460 +5
==========================================
+ Hits 3313 3336 +23
Misses 2763 2763 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
| @@ -24,14 +24,31 @@ type Props = Readonly<{ | |||
|
|
|||
| type State = { | |||
| readonly showSpecialSem: boolean; | |||
| readonly currentYearCardRef: Ref<HTMLDivElement>; | |||
There was a problem hiding this comment.
ref should not be stored in state, see https://react.dev/reference/react/createRef
| } | ||
| parentContainer.scrollTo({ | ||
| left: currentYearCard.offsetLeft - parentContainer.offsetLeft, | ||
| behavior: 'smooth', |
There was a problem hiding this comment.
For scrolling on component mount you probably don't want smooth, it's better for the component to appear already scrolled to the correct location.
| if (!currentYearCard || !parentContainer) { | ||
| return; | ||
| } | ||
| parentContainer.scrollTo({ |
There was a problem hiding this comment.
Could consider using scrollIntoView instead, that would avoid having to do math to figure out exact offset
zwliew
changed the title
|
It's been a long time but thanks for your contribution! |
ty chads |
Context
Fixes #3639: Autoscroll Course Planner to current year on first render
Implementation
currentYearCardRefstate variablecurrentYearCardRefto thePlannerYearcard for the current year of enrolmentcomponentDidMountmethod inPlannerYearcurrentYearCardRefto get parent container and calculate offsets for child and parentsmootheffect)Before
Screen.Recording.2023-11-09.at.10.40.21.PM.mov
After
Screen.Recording.2023-11-09.at.10.49.25.PM.mov
Other Information