80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useContext, useRef } from "react"
|
|
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { SidePeekContext } from "@/components/SidePeeks/SidePeekProvider"
|
|
|
|
import Button from "../Button"
|
|
import SidePeekSEO from "./SidePeekSEO"
|
|
|
|
import styles from "./sidePeek.module.css"
|
|
|
|
import type { SidePeekProps } from "./sidePeek"
|
|
|
|
export default function SidePeek({
|
|
children,
|
|
title,
|
|
contentKey,
|
|
handleClose,
|
|
isOpen,
|
|
openInRoot = false,
|
|
}: React.PropsWithChildren<SidePeekProps>) {
|
|
const intl = useIntl()
|
|
const rootDiv = useRef<HTMLDivElement>(null)
|
|
|
|
const context = useContext(SidePeekContext)
|
|
function onClose() {
|
|
const closeHandler = handleClose || context?.handleClose
|
|
closeHandler && closeHandler(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div ref={openInRoot ? null : rootDiv}>
|
|
<ModalOverlay
|
|
UNSTABLE_portalContainer={rootDiv.current || undefined}
|
|
className={styles.overlay}
|
|
isOpen={
|
|
isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
|
|
}
|
|
onOpenChange={onClose}
|
|
isDismissable
|
|
>
|
|
<Modal className={styles.modal}>
|
|
<Dialog className={styles.dialog} aria-label={title}>
|
|
<aside className={styles.sidePeek}>
|
|
<header className={styles.header}>
|
|
{title ? (
|
|
<Typography variant="Title/md" className={styles.heading}>
|
|
<h2>{title}</h2>
|
|
</Typography>
|
|
) : null}
|
|
<Button
|
|
aria-label={intl.formatMessage({ id: "Close" })}
|
|
className={styles.closeButton}
|
|
intent="text"
|
|
onPress={onClose}
|
|
>
|
|
<MaterialIcon
|
|
icon="close"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
</Button>
|
|
</header>
|
|
<div className={styles.sidePeekContent}>{children}</div>
|
|
</aside>
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</div>
|
|
|
|
<SidePeekSEO title={title}>{children}</SidePeekSEO>
|
|
</>
|
|
)
|
|
}
|