Autoscroll Course Planner 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 53.73% 53.63% -0.10%
==========================================
Files 272 272
Lines 5959 5968 +9
Branches 1418 1421 +3
==========================================
- Hits 3202 3201 -1
- Misses 2757 2767 +10 ☔ View full report in Codecov by Sentry. |
| @@ -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
Context
#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