Pontus Dreij
fb321cdb13
Feat(SW-1274) modify date my stay * feat(SW-1676): Modify guest details step 1 * feat(SW-1676) Integration to api to update guest details * feat(SW-1676) Reuse of old modal * feat(SW-1676) updated modify guest * feat(SW-1676) cleanup * feat(SW-1274) modify stay modal and datepicker * feat(SW-1274) DatePicker from modify dates * feat(SW-1274) Modify dates fixes and merge conflicts * feat(SW-1274) handle modify for multiroom * feat(SW-1274) update manage stay * feat(SW-1274) fixed some comments * feat(SW-1274) use Modal instead * feat(SW-1274) fixed formatChildBedPreferences * feat(SW-1274) removed any as prop * feat(SW-1274) fix rebase conflicts * feat(SW-1274) fix flicker on modify modal * feat(SW-1274) CalendarButton * feat(SW-1274) fixed gap variable * feat(SW-1274) simplified code * feat(SW-1274) Split up DatePicker on mode * feat(SW-1274) Updated file structure for datepicker Approved-by: Arvid Norlin
175 lines
4.8 KiB
TypeScript
175 lines
4.8 KiB
TypeScript
"use client"
|
|
|
|
import { da, de, fi, nb, sv } from "date-fns/locale"
|
|
import { useCallback, useEffect, useRef, useState } from "react"
|
|
import { useFormContext, useWatch } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import DatePickerRangeDesktop from "./Range/Desktop"
|
|
import DatePickerRangeMobile from "./Range/Mobile"
|
|
|
|
import styles from "./date-picker.module.css"
|
|
|
|
import type { DatePickerFormProps } from "@/types/components/datepicker"
|
|
|
|
const locales = {
|
|
[Lang.da]: da,
|
|
[Lang.de]: de,
|
|
[Lang.fi]: fi,
|
|
[Lang.no]: nb,
|
|
[Lang.sv]: sv,
|
|
}
|
|
|
|
export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const selectedDate = useWatch({ name })
|
|
const { register, setValue } = useFormContext()
|
|
const ref = useRef<HTMLDivElement | null>(null)
|
|
|
|
const [isSelectingFrom, setIsSelectingFrom] = useState(true)
|
|
|
|
const close = useCallback(() => {
|
|
if (!selectedDate.toDate) {
|
|
setValue(name, {
|
|
fromDate: selectedDate.fromDate,
|
|
toDate: dt(selectedDate.fromDate).add(1, "day").format("YYYY-MM-DD"),
|
|
})
|
|
|
|
setIsSelectingFrom(true)
|
|
}
|
|
|
|
setIsOpen(false)
|
|
}, [name, setValue, selectedDate])
|
|
|
|
function showOnFocus() {
|
|
setIsOpen(true)
|
|
}
|
|
|
|
function handleSelectDate(selected: Date) {
|
|
/* check if selected date is not before todays date,
|
|
which happens when "Enter" key is pressed in any other input field of the form */
|
|
if (!dt(selected).isBefore(dt(), "day")) {
|
|
if (isSelectingFrom) {
|
|
setValue(name, {
|
|
fromDate: dt(selected).format("YYYY-MM-DD"),
|
|
toDate: undefined,
|
|
})
|
|
setIsSelectingFrom(false)
|
|
} else if (!dt(selectedDate.fromDate).isSame(dt(selected))) {
|
|
const fromDate = dt(selectedDate.fromDate)
|
|
const toDate = dt(selected)
|
|
if (toDate.isAfter(fromDate)) {
|
|
setValue(name, {
|
|
fromDate: selectedDate.fromDate,
|
|
toDate: toDate.format("YYYY-MM-DD"),
|
|
})
|
|
} else {
|
|
setValue(name, {
|
|
fromDate: toDate.format("YYYY-MM-DD"),
|
|
toDate: selectedDate.fromDate,
|
|
})
|
|
}
|
|
setIsSelectingFrom(true)
|
|
}
|
|
}
|
|
}
|
|
const closeIfOutside = useCallback(
|
|
(target: HTMLElement) => {
|
|
if (ref.current && target && !ref.current.contains(target)) {
|
|
close()
|
|
}
|
|
},
|
|
[close, ref]
|
|
)
|
|
|
|
function closeOnBlur(evt: FocusEvent) {
|
|
if (isOpen) {
|
|
const target = evt.relatedTarget as HTMLElement
|
|
closeIfOutside(target)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(evt: Event) {
|
|
if (isOpen) {
|
|
const target = evt.target as HTMLElement
|
|
closeIfOutside(target)
|
|
}
|
|
}
|
|
document.body.addEventListener("click", handleClickOutside)
|
|
return () => {
|
|
document.body.removeEventListener("click", handleClickOutside)
|
|
}
|
|
}, [closeIfOutside, isOpen])
|
|
|
|
const selectedFromDate = dt(selectedDate.fromDate)
|
|
.locale(lang)
|
|
.format("ddd D MMM")
|
|
const selectedToDate = !!selectedDate.toDate
|
|
? dt(selectedDate.toDate).locale(lang).format("ddd D MMM")
|
|
: ""
|
|
|
|
return (
|
|
<div
|
|
className={styles.container}
|
|
onBlur={(e) => {
|
|
closeOnBlur(e.nativeEvent)
|
|
}}
|
|
data-isopen={isOpen}
|
|
ref={ref}
|
|
>
|
|
<button
|
|
className={styles.btn}
|
|
onFocus={showOnFocus}
|
|
onClick={() => setIsOpen(true)}
|
|
type="button"
|
|
>
|
|
<Body className={styles.body} asChild color="uiTextHighContrast">
|
|
<span>
|
|
{intl.formatMessage(
|
|
{ id: "{selectedFromDate} - {selectedToDate}" },
|
|
{
|
|
selectedFromDate,
|
|
selectedToDate,
|
|
}
|
|
)}
|
|
</span>
|
|
</Body>
|
|
</button>
|
|
<input {...register("date.fromDate")} type="hidden" />
|
|
<input {...register("date.toDate")} type="hidden" />
|
|
<div aria-modal className={styles.hideWrapper} role="dialog">
|
|
<DatePickerRangeDesktop
|
|
close={close}
|
|
handleOnSelect={handleSelectDate}
|
|
locales={locales}
|
|
// DayPicker lib needs Daterange in form as below to show appropriate UI
|
|
selectedDate={{
|
|
from: selectedDate.fromDate,
|
|
to: selectedDate.toDate,
|
|
}}
|
|
/>
|
|
<DatePickerRangeMobile
|
|
close={close}
|
|
handleOnSelect={handleSelectDate}
|
|
locales={locales}
|
|
// DayPicker lib needs Daterange in form as below to show appropriate UI
|
|
selectedDate={{
|
|
from: selectedDate.fromDate,
|
|
to: selectedDate.toDate,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|