47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
|
|
import { stopPropagation } from '../utils/keyboard';
|
|
import { HorseshoeEnabledContext } from './page';
|
|
|
|
type Modal500Props = {
|
|
requestClose: () => void;
|
|
children: ReactNode;
|
|
};
|
|
export function Modal500({ requestClose, children }: Modal500Props) {
|
|
return (
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<OverlayCenter>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
clickOutsideDeactivates: true,
|
|
onDeactivate: requestClose,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Modal
|
|
size="500"
|
|
variant="Background"
|
|
// Reset `--vojo-safe-top` for everything mounted inside the
|
|
// dialog. The Android status-bar inset is reserved by each
|
|
// page header's `padding-top: var(--vojo-safe-top)` for
|
|
// top-of-screen surfaces — but a centred 500px modal sits
|
|
// away from the screen edge, and the same padding inside it
|
|
// just adds dead space above its header.
|
|
style={{ ['--vojo-safe-top' as string]: '0px' }}
|
|
>
|
|
{/* PageRoot rendered inside the dialog (Settings,
|
|
SpaceSettings, RoomSettings) would otherwise pick up
|
|
the web horseshoe layout — void column + rounded
|
|
corners inside a fixed 500px shell. Disable horseshoe
|
|
for everything inside the modal. */}
|
|
<HorseshoeEnabledContext.Provider value={false}>
|
|
{children}
|
|
</HorseshoeEnabledContext.Provider>
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
);
|
|
}
|