101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
|
|
import { useIntl } from 'react-intl'
|
|
|
|
import usePopStateHandler from '@scandic-hotels/common/hooks/usePopStateHandler'
|
|
import useSetOverflowVisibleOnRA from '@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA'
|
|
|
|
import { IconButton } from '../../IconButton'
|
|
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
|
import { Typography } from '../../Typography'
|
|
|
|
import SidePeekSEO from './SidePeekSEO'
|
|
|
|
import styles from './sidePeekSelfControlled.module.css'
|
|
|
|
interface SidePeekSelfControlledProps extends React.PropsWithChildren {
|
|
title: string
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function SidePeekSelfControlled({
|
|
children,
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
}: SidePeekSelfControlledProps) {
|
|
const intl = useIntl()
|
|
|
|
function handleClose(moveBack = false) {
|
|
if (moveBack) {
|
|
window.history.back()
|
|
} else {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
// Only register popstate handler when open
|
|
usePopStateHandler(() => handleClose(), isOpen)
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
window.history.pushState(null, '', window.location.href)
|
|
}
|
|
}, [isOpen])
|
|
|
|
return (
|
|
<>
|
|
<ModalOverlay
|
|
className={styles.overlay}
|
|
isDismissable
|
|
onOpenChange={() => handleClose(true)}
|
|
isOpen={isOpen}
|
|
>
|
|
<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}
|
|
<IconButton
|
|
theme="Black"
|
|
style="Muted"
|
|
onPress={() => handleClose(true)}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: 'Close',
|
|
})}
|
|
>
|
|
<MaterialIcon
|
|
icon="close"
|
|
size={24}
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
</IconButton>
|
|
</header>
|
|
<div className={styles.sidePeekContent}>{children}</div>
|
|
<KeepBodyVisible />
|
|
</aside>
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
|
|
<SidePeekSEO title={title}>{children}</SidePeekSEO>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function KeepBodyVisible() {
|
|
const toggle = useSetOverflowVisibleOnRA()
|
|
useEffect(() => {
|
|
toggle(true)
|
|
return () => toggle(false)
|
|
}, [toggle])
|
|
return null
|
|
}
|