File size: 2,887 Bytes
9b906ea | 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import React from "react";
import { cn } from "#/utils/utils";
import {
readScrollFadeState,
type ScrollFadeState,
} from "#/utils/scroll-fade-state";
export { readScrollFadeState };
const FADE_WIDTH_CLASS = "w-10";
interface MarkdownTableScrollProps {
children: React.ReactNode;
}
export function MarkdownTableScroll({ children }: MarkdownTableScrollProps) {
const scrollRef = React.useRef<HTMLDivElement>(null);
const [fadeState, setFadeState] = React.useState<ScrollFadeState>({
left: false,
right: false,
});
const updateFadeState = React.useCallback(() => {
const element = scrollRef.current;
if (!element) {
return;
}
setFadeState(readScrollFadeState(element));
}, []);
React.useLayoutEffect(() => {
updateFadeState();
const element = scrollRef.current;
if (!element) {
return undefined;
}
const resizeObserver = new ResizeObserver(updateFadeState);
resizeObserver.observe(element);
const table = element.firstElementChild;
if (table) {
resizeObserver.observe(table);
}
return () => resizeObserver.disconnect();
}, [updateFadeState, children]);
return (
<div className="relative max-w-full">
<div
ref={scrollRef}
data-testid="markdown-table-scroll"
onScroll={updateFadeState}
className="max-w-full overflow-x-auto custom-scrollbar-always"
>
{children}
</div>
{/* The fades blend into whatever surface the table sits on, which differs
between the chat stream and cards like the markdown artifact preview.
Set `--oh-scroll-fade-from` on any ancestor to match another surface.
The value is inlined at both edges because Tailwind only extracts
classes from literal strings, not interpolated constants. */}
<div
aria-hidden
data-testid="markdown-table-scroll-fade-left"
data-visible={fadeState.left ? "true" : "false"}
className={cn(
"pointer-events-none absolute inset-y-0 left-0 z-10",
FADE_WIDTH_CLASS,
"bg-gradient-to-r from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent",
"transition-opacity duration-300 ease-out motion-reduce:transition-none",
fadeState.left ? "opacity-100" : "opacity-0",
)}
/>
<div
aria-hidden
data-testid="markdown-table-scroll-fade-right"
data-visible={fadeState.right ? "true" : "false"}
className={cn(
"pointer-events-none absolute inset-y-0 right-0 z-10",
FADE_WIDTH_CLASS,
"bg-gradient-to-l from-[var(--oh-scroll-fade-from,var(--oh-color-base))] to-transparent",
"transition-opacity duration-300 ease-out motion-reduce:transition-none",
fadeState.right ? "opacity-100" : "opacity-0",
)}
/>
</div>
);
}
|