jaredandClaude Opus 5
af244bba75
Event handlers typed as React.MouseEvent, join errors as Error, the service-worker session setter as strings, the UIA policy map and the webkitAudioContext probe as narrow shapes. No behaviour change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import FocusTrap from 'focus-trap-react';
|
|
import { as, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
|
|
import React, { ReactNode } from 'react';
|
|
import { ModalWide } from '../styles/Modal.css';
|
|
import { stopPropagation } from '../utils/keyboard';
|
|
|
|
export type RenderViewerProps = {
|
|
src: string;
|
|
alt: string;
|
|
requestClose: () => void;
|
|
};
|
|
|
|
type ImageOverlayProps = RenderViewerProps & {
|
|
viewer: boolean;
|
|
renderViewer: (props: RenderViewerProps) => ReactNode;
|
|
};
|
|
|
|
export const ImageOverlay = as<'div', ImageOverlayProps>(
|
|
({ src, alt, viewer, requestClose, renderViewer, ...props }, ref) => (
|
|
<Overlay {...props} ref={ref} open={viewer} backdrop={<OverlayBackdrop />}>
|
|
<OverlayCenter>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
onDeactivate: () => requestClose(),
|
|
clickOutsideDeactivates: true,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Modal
|
|
className={ModalWide}
|
|
size="500"
|
|
onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
|
|
>
|
|
{renderViewer({
|
|
src,
|
|
alt,
|
|
requestClose,
|
|
})}
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
),
|
|
);
|