Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 2x 22x 22x 22x 22x 22x 22x 42x 42x 41x 33x 33x 8x 6x 5x 5x 4x 4x 2x 2x 22x 22x 22x 22x 22x | import { useEffect, useRef, type FC } from 'react';
import type { FoldrRow } from '../Foldr.ts';
export interface SheetFrameProps {
readonly src: string;
readonly rows: readonly FoldrRow[];
readonly index: string;
readonly isFirst: boolean;
/** Called the first time *any* frame receives focus — matches legacy boot. */
readonly onFirstFocus?: () => void;
readonly firstFocusUsed: boolean;
}
/**
* Wraps a single iframe. After the iframe's document becomes `complete`, we
* `postMessage({type:'multi', rows, index}, '*')` into it so the embedded
* single-sheet app can render its tab chrome. Matches the legacy
* `renderFrameContent` function.
*
* Notes preserved from legacy (see `multi/main.ls:85`):
* - 100 ms delay after `doc.readyState === 'complete'` before the postMessage.
* - The first iframe to mount receives focus exactly once via
* `contentWindow.focus()`.
* - Polling with `setTimeout(…, 1)` while the document is still loading.
*/
export const SheetFrame: FC<SheetFrameProps> = ({
src,
rows,
index,
isFirst,
onFirstFocus,
firstFocusUsed,
}) => {
const ref = useRef<HTMLIFrameElement | null>(null);
useEffect(() => {
// `ref.current` is always set by React before running this effect (the
// iframe mounts synchronously as the immediate child), so we skip the
// null guard. If that ever changes, the inner `node.contentDocument`
// access fails gracefully via the `!doc` early-return.
const node = ref.current as HTMLIFrameElement;
let cancelled = false;
let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
const tryPost = (): void => {
const doc = node.contentDocument;
if (!doc) return;
if (doc.readyState !== 'complete') {
timeoutHandle = setTimeout(tryPost, 1);
return;
}
timeoutHandle = setTimeout(() => {
if (cancelled) return;
const win = node.contentWindow;
if (!win) return;
win.postMessage(
JSON.stringify({ type: 'multi', rows, index }, null, 2),
'*',
);
if (isFirst && !firstFocusUsed) {
win.focus();
onFirstFocus?.();
}
}, 100);
};
tryPost();
return () => {
cancelled = true;
// `clearTimeout` on `undefined` is a no-op per WHATWG, so we skip the
// explicit null-check and keep the cleanup straight-line.
clearTimeout(timeoutHandle as ReturnType<typeof setTimeout>);
};
}, [src, rows, index, isFirst, firstFocusUsed, onFirstFocus]);
return <iframe ref={ref} key={src} src={src} />;
};
|