mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
9e6bcf1846
* removed daisy from config * removed tw-elements artefact * removed comments from tailwind config * removed safelist * migrated to tailwind4 and daisyui5 * deleted tailwind.config.js which is not eeded anymore * 3.0.79 * version number * fixed broken layouts * more fixing * more layout fixing * tested theming * small fixes * adapt snapshots to changes * package.json: add unit test update script * more ui refactoring & theme controller * ui improvements * package-lock.json * fix linting * fixed tabs * fix linting * fixed typing --------- Co-authored-by: mahula <lenzmath@posteo.de>
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { DomEvent } from 'leaflet'
|
|
import { createRef, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
/**
|
|
* @category Templates
|
|
*/
|
|
export function MapOverlayPage({
|
|
children,
|
|
className,
|
|
backdrop,
|
|
card = true,
|
|
}: {
|
|
children: React.ReactNode
|
|
className?: string
|
|
backdrop?: boolean
|
|
card?: boolean
|
|
}) {
|
|
const closeScreen = () => {
|
|
navigate(`/${window.location.search ? window.location.search : ''}`)
|
|
}
|
|
|
|
const navigate = useNavigate()
|
|
|
|
const overlayRef = createRef<HTMLDivElement>()
|
|
const backdropRef = createRef<HTMLDivElement>()
|
|
|
|
useEffect(() => {
|
|
if (overlayRef.current !== null) {
|
|
DomEvent.disableClickPropagation(overlayRef.current)
|
|
DomEvent.disableScrollPropagation(overlayRef.current)
|
|
}
|
|
if (backdropRef.current !== null && backdrop) {
|
|
DomEvent.disableClickPropagation(backdropRef.current)
|
|
DomEvent.disableScrollPropagation(backdropRef.current)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [overlayRef, backdropRef])
|
|
|
|
return (
|
|
<div className={`tw:absolute tw:h-full tw:w-full tw:m-auto ${backdrop ? 'tw:z-2000' : ''}`}>
|
|
<div
|
|
ref={backdropRef}
|
|
className={`${backdrop ? 'tw:backdrop-brightness-75' : ''} tw:h-full tw:w-full tw:grid tw:place-items-center tw:m-auto`}
|
|
>
|
|
<div
|
|
ref={overlayRef}
|
|
className={`${card ? 'tw:card tw:card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
|
|
>
|
|
{children}
|
|
<button
|
|
className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2'
|
|
onClick={() => closeScreen()}
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|