ResultCell.tsx48 lines · main

1	import { Expand } from 'lucide-react'
2	import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
3
4	import { formatCellValue, isLargeValue } from './Results.utils'
5
6	interface ResultCellProps {
7	column: string
8	value: unknown
9	onContextMenu: (e: React.MouseEvent, column: string, value: unknown) => void
10	onExpand: (column: string, value: unknown) => void
11	}
12
13	export const ResultCell = ({ column, value, onContextMenu, onExpand }: ResultCellProps) => {
14	const showExpand = isLargeValue(value)
15
16	return (
17	<div
18	className={cn(
19	'group/cell relative flex items-center h-full font-mono text-xs w-full whitespace-pre',
20	value === null && 'text-foreground-lighter'
21	)}
22	onContextMenu={(e) => {
23	e.preventDefault()
24	onContextMenu(e, column, value)
25	}}
26	>
27	{formatCellValue(value)}
28	{showExpand && (
29	<Tooltip>
30	<TooltipTrigger asChild>
31	<Button
32	type="default"
33	size="tiny"
34	className="absolute right-1 top-1/2 -translate-y-1/2 px-1 opacity-0 group-hover/cell:opacity-100 focus-visible:opacity-100"
35	icon={<Expand size={10} />}
36	aria-label="View full cell content"
37	onClick={(e) => {
38	e.stopPropagation()
39	onExpand(column, value)
40	}}
41	/>
42	</TooltipTrigger>
43	<TooltipContent side="left">View full cell content</TooltipContent>
44	</Tooltip>
45	)}
46	</div>
47	)
48	}