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,87 +35,75 @@ export default function DatePickerMobile({
   const endDate = dt().add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
-    <DayPicker
+    <div className={styles.container}>
-      classNames={{
+      <header className={styles.header}>
-        ...classNames,
+        <button className={styles.close} onClick={close} type="button">
-        caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
+          <CloseLargeIcon />
-        day: `${classNames.day} ${styles.day}`,
+        </button>
-        day_button: `${classNames.day_button} ${styles.dayButton}`,
+      </header>
-        footer: styles.footer,
+      <DayPicker
-        month: styles.month,
+        classNames={{
-        month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
+          ...classNames,
-        months: styles.months,
+          caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
-        range_end: styles.rangeEnd,
+          day: `${classNames.day} ${styles.day}`,
-        range_middle: styles.rangeMiddle,
+          day_button: `${classNames.day_button} ${styles.dayButton}`,
-        range_start: styles.rangeStart,
+          month: styles.month,
-        root: `${classNames.root} ${styles.container}`,
+          month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
-        week: styles.week,
+          months: styles.months,
-        weekday: `${classNames.weekday} ${styles.weekDay}`,
+          range_end: styles.rangeEnd,
-      }}
+          range_middle: styles.rangeMiddle,
-      disabled={[
+          range_start: styles.rangeStart,
-        { from: startOfCurrentMonth, to: yesterday },
+          root: `${classNames.root} ${styles.root}`,
-        { from: endDate, to: endOfLastMonth },
+          week: styles.week,
-      ]}
+          weekday: `${classNames.weekday} ${styles.weekDay}`,
-      endMonth={endDate}
+        }}
-      excludeDisabled
+        disabled={[
-      footer
+          { from: startOfCurrentMonth, to: yesterday },
-      formatters={{
+          { from: endDate, to: endOfLastMonth },
-        formatWeekdayName(weekday) {
+        ]}
-          return dt(weekday).locale(lang).format("ddd")
+        endMonth={endDate}
-        },
+        excludeDisabled
-      }}
+        formatters={{
-      hideNavigation
+          formatWeekdayName(weekday) {
-      lang={lang}
+            return dt(weekday).locale(lang).format("ddd")
-      locale={locale}
+          },
-      mode="range"
+        }}
-      /** Showing full year or what's left of it */
+        hideNavigation
-      numberOfMonths={13}
+        lang={lang}
-      onDayClick={handleOnSelect}
+        locale={locale}
-      required
+        mode="range"
-      selected={selectedDate}
+        /** Showing full year or what's left of it */
-      startMonth={currentDate}
+        numberOfMonths={13}
-      weekStartsOn={1}
+        onDayClick={handleOnSelect}
-      components={{
+        required
-        Footer(props) {
+        selected={selectedDate}
-          return (
+        startMonth={currentDate}
-            <footer className={props.className}>
+        weekStartsOn={1}
-              <Button
+        components={{
-                className={styles.button}
+          MonthCaption(props) {
-                intent="tertiary"
+            return (
-                onPress={close}
+              <div className={props.className}>
-                size="large"
+                <Subtitle asChild type="two">
-                theme="base"
+                  {props.children}
-              >
+                </Subtitle>
-                <Body color="white" textTransform="bold" asChild>
+              </div>
-                  <span>{intl.formatMessage({ id: "Select dates" })}</span>
+            )
-                </Body>
+          },
-              </Button>
+        }}
-              <div className={styles.backdrop} />
+      />
-            </footer>
+      <footer className={styles.footer}>
-          )
+        <Button
-        },
+          className={styles.button}
-        MonthCaption(props) {
+          intent="tertiary"
-          return (
+          onPress={close}
-            <div className={props.className}>
+          size="large"
-              <Subtitle asChild type="two">
+          theme="base"
-                {props.children}
+        >
-              </Subtitle>
+          <Body color="white" textTransform="bold" asChild>
-            </div>
+            <span>{intl.formatMessage({ id: "Select dates" })}</span>
-          )
+          </Body>
-        },
+        </Button>
-        Root({ children, ...props }) {
+      </footer>
-          return (
+    </div>
-            <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;
 }