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

fix: SW-1010 Fixed picker closed with invalid data

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-11-27 11:49:40 +01:00
parent bf60306236
commit e4c58d2b30
1 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/GuestsRoomsPicker/index.tsx
View File

@@ -21,18 +21,19 @@ import styles from "./guests-rooms-picker.module.css"
import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker" import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
export default function GuestsRoomsPickerForm() { export default function GuestsRoomsPickerForm() {
const { watch } = useFormContext() const { watch, trigger } = useFormContext()
const rooms = watch("rooms") as GuestsRoom[] const rooms = watch("rooms") as GuestsRoom[]
const checkIsDesktop = useMediaQuery("(min-width: 1367px)") const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
const [isDesktop, setIsDesktop] = useState(true) const [isDesktop, setIsDesktop] = useState(true)
const [isOpen, setIsOpen] = useState(true)
const [containerHeight, setContainerHeight] = useState(0) const [containerHeight, setContainerHeight] = useState(0)
const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later
const htmlElement = const htmlElement =
typeof window !== "undefined" ? document.querySelector("body") : null typeof window !== "undefined" ? document.querySelector("body") : null
//isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed". //isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed".
function setOverflowClip(isOpen: boolean) { async function setOverflowClip(isOpen: boolean) {
if (htmlElement) { if (htmlElement) {
if (isOpen) { if (isOpen) {
htmlElement.style.overflow = "visible" htmlElement.style.overflow = "visible"
@@ -42,6 +43,12 @@ export default function GuestsRoomsPickerForm() {
htmlElement.style.overflow = "clip !important" htmlElement.style.overflow = "clip !important"
} }
} }
if (!isOpen) {
const state = await trigger("rooms")
if (state) {
setIsOpen(isOpen)
}
}
} }
useEffect(() => { useEffect(() => {
@@ -82,8 +89,14 @@ export default function GuestsRoomsPickerForm() {
}, [childCount, isDesktop, updateHeight]) }, [childCount, isDesktop, updateHeight])
return isDesktop ? ( return isDesktop ? (
<DialogTrigger onOpenChange={setOverflowClip}> <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
<Trigger rooms={rooms} className={styles.triggerDesktop} /> <Trigger
rooms={rooms}
className={styles.triggerDesktop}
triggerFn={() => {
setIsOpen(true)
}}
/>
<Popover <Popover
placement="bottom start" placement="bottom start"
offset={36} offset={36}
@@ -101,8 +114,14 @@ export default function GuestsRoomsPickerForm() {
</Popover> </Popover>
</DialogTrigger> </DialogTrigger>
) : ( ) : (
<DialogTrigger> <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
<Trigger rooms={rooms} className={styles.triggerMobile} /> <Trigger
rooms={rooms}
className={styles.triggerMobile}
triggerFn={() => {
setIsOpen(true)
}}
/>
<Modal> <Modal>
<Dialog className={styles.pickerContainerMobile}> <Dialog className={styles.pickerContainerMobile}>
{({ close }) => <PickerForm rooms={rooms} onClose={close} />} {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
@@ -115,14 +134,20 @@ export default function GuestsRoomsPickerForm() {
function Trigger({ function Trigger({
rooms, rooms,
className, className,
triggerFn,
}: { }: {
rooms: GuestsRoom[] rooms: GuestsRoom[]
className: string className: string
triggerFn?: () => void
}) { }) {
const intl = useIntl() const intl = useIntl()
return ( return (
<Button className={`${className} ${styles.btn}`} type="button"> <Button
className={`${className} ${styles.btn}`}
type="button"
onPress={triggerFn}
>
<Body> <Body>
{rooms.map((room, i) => ( {rooms.map((room, i) => (
<span key={i}> <span key={i}>