Merged in fix/SW-2717-select-hotel-booking-codes- (pull request #2270)
fix: SW-2717 Updated filter display rules * fix: SW-2717 Updated filter display rules * fix: SW-2717 Fixed chip button trigger popover after next upgrade * SW-2717 Optimised code Approved-by: Erik Tiekstra
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
@@ -33,6 +33,7 @@ export default function BookingCodeFilter() {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [isDesktop, setIsDesktop] = useState(false)
|
||||
const displayAsPopover = useMediaQuery("(min-width: 768px)")
|
||||
const utils = trpc.useUtils()
|
||||
const {
|
||||
@@ -95,6 +96,11 @@ export default function BookingCodeFilter() {
|
||||
})
|
||||
)
|
||||
|
||||
// To fix the hyderation error
|
||||
useEffect(() => {
|
||||
setIsDesktop(displayAsPopover)
|
||||
}, [displayAsPopover])
|
||||
|
||||
if (hideFilter || !booking.bookingCode) {
|
||||
return null
|
||||
}
|
||||
@@ -115,8 +121,8 @@ export default function BookingCodeFilter() {
|
||||
color="CurrentColor"
|
||||
/>
|
||||
</ChipButton>
|
||||
{displayAsPopover ? (
|
||||
<Popover placement="bottom end">
|
||||
{isDesktop ? (
|
||||
<Popover placement="bottom end" isNonModal>
|
||||
<Dialog className={styles.dialog}>
|
||||
{({ close }) => {
|
||||
function handleChangeFilterValue(value: string) {
|
||||
|
||||
@@ -19,6 +19,7 @@ import styles from "./roomPackageFilter.module.css"
|
||||
export default function RoomPackageFilterModal() {
|
||||
const intl = useIntl()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
|
||||
<ChipButton variant="Outlined">
|
||||
|
||||
@@ -12,6 +12,7 @@ import styles from "./roomPackageFilter.module.css"
|
||||
export default function RoomPackageFilterPopover() {
|
||||
const intl = useIntl()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
|
||||
<ChipButton variant="Outlined">
|
||||
|
||||
Reference in New Issue
Block a user