From 2660faf4ac6efe60353144b39038187f70a9a5ec Mon Sep 17 00:00:00 2001 From: Niclas Edenvin Date: Tue, 3 Dec 2024 16:01:19 +0000 Subject: [PATCH] Merged in fix/sw-1013-calendar-no-scroll (pull request #1026) fix(SW-1013): extract custom components from day picker * fix(SW-1013): extract custom components from day picker The custom components in the mobile day picker made a lot of components in the day picker to unmount and mount again, which had weird scrolling behaviour. They don't need to be baked in to the day picker so they are now extracted to regular sibling elements. Approved-by: Pontus Dreij --- components/DatePicker/Screen/Mobile.tsx | 152 ++++++++---------- .../DatePicker/Screen/mobile.module.css | 6 +- 2 files changed, 75 insertions(+), 83 deletions(-) diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx index f6cfcae15..8494f5c0f 100644 --- a/components/DatePicker/Screen/Mobile.tsx +++ b/components/DatePicker/Screen/Mobile.tsx @@ -35,87 +35,75 @@ export default function DatePickerMobile({ const endDate = dt().add(395, "day").toDate() const endOfLastMonth = dt(endDate).endOf("month").toDate() return ( - - -
- - ) - }, - MonthCaption(props) { - return ( -
- - {props.children} - -
- ) - }, - Root({ children, ...props }) { - return ( -
-
- -
- {children} -
- ) - }, - }} - /> +
+
+ +
+ + + {props.children} + +
+ ) + }, + }} + /> + +
) } diff --git a/components/DatePicker/Screen/mobile.module.css b/components/DatePicker/Screen/mobile.module.css index 5ee03bde5..4fba31592 100644 --- a/components/DatePicker/Screen/mobile.module.css +++ b/components/DatePicker/Screen/mobile.module.css @@ -10,6 +10,11 @@ position: relative; } +.root { + display: grid; + grid-area: content; +} + .header { align-self: flex-end; background-color: var(--Main-Grey-White); @@ -37,7 +42,6 @@ div.months { display: grid; - grid-area: content; overflow-y: scroll; scroll-snap-type: y mandatory; }