scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/sw-1013-calendar-no-scroll (pull request #1026)

Browse Source 
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
This commit is contained in:
Niclas Edenvin
2024-12-03 16:01:19 +00:00
parent 4545de877f
commit 2660faf4ac
2 changed files with 75 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/DatePicker/Screen/Mobile.tsx
View File

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

6
components/DatePicker/Screen/mobile.module.css
View File

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