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

@@ -35,20 +35,25 @@ export default function DatePickerMobile({
   const endDate = dt().add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <button className={styles.close} onClick={close} type="button">
+          <CloseLargeIcon />
+        </button>
+      </header>
       <DayPicker
         classNames={{
           ...classNames,
           caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
           day: `${classNames.day} ${styles.day}`,
           day_button: `${classNames.day_button} ${styles.dayButton}`,
-        footer: styles.footer,
           month: styles.month,
           month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
           months: styles.months,
           range_end: styles.rangeEnd,
           range_middle: styles.rangeMiddle,
           range_start: styles.rangeStart,
-        root: `${classNames.root} ${styles.container}`,
+          root: `${classNames.root} ${styles.root}`,
           week: styles.week,
           weekday: `${classNames.weekday} ${styles.weekDay}`,
         }}
@@ -58,7 +63,6 @@ export default function DatePickerMobile({
         ]}
         endMonth={endDate}
         excludeDisabled
-      footer
         formatters={{
           formatWeekdayName(weekday) {
             return dt(weekday).locale(lang).format("ddd")
@@ -76,9 +80,18 @@ export default function DatePickerMobile({
         startMonth={currentDate}
         weekStartsOn={1}
         components={{
-        Footer(props) {
+          MonthCaption(props) {
             return (
-            <footer className={props.className}>
+              <div className={props.className}>
+                <Subtitle asChild type="two">
+                  {props.children}
+                </Subtitle>
+              </div>
+            )
+          },
+        }}
+      />
+      <footer className={styles.footer}>
         <Button
           className={styles.button}
           intent="tertiary"
@@ -90,32 +103,7 @@ export default function DatePickerMobile({
             <span>{intl.formatMessage({ id: "Select dates" })}</span>
           </Body>
         </Button>
-              <div className={styles.backdrop} />
       </footer>
-          )
-        },
-        MonthCaption(props) {
-          return (
-            <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
     </div>
   )
-        },
-        Root({ children, ...props }) {
-          return (
-            <div {...props}>
-              <header className={styles.header}>
-                <button className={styles.close} onClick={close} type="button">
-                  <CloseLargeIcon />
-                </button>
-              </header>
-              {children}
-            </div>
-          )
-        },
-      }}
-    />
-  )
 }

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;
 }