| 1 | import type React from "react"; |
| 2 | |
| 3 | interface GridCellProps { |
| 4 | value: string | number; |
| 5 | type?: "text" | "number"; |
| 6 | rowIndex: number; |
| 7 | colIndex: number; |
| 8 | placeholder?: string; |
| 9 | onUpdate: (value: string) => void; |
| 10 | onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void; |
| 11 | onFocus: () => void; |
| 12 | registerRef: (el: HTMLInputElement | null) => void; |
| 13 | isFocused?: boolean; |
| 14 | } |
| 15 | |
| 16 | export function GridCell({ |
| 17 | value, |
| 18 | type = "text", |
| 19 | placeholder = "", |
| 20 | onUpdate, |
| 21 | onKeyDown, |
| 22 | onFocus, |
| 23 | registerRef, |
| 24 | isFocused, |
| 25 | }: GridCellProps) { |
| 26 | return ( |
| 27 | <input |
| 28 | aria-label="grid cell control" |
| 29 | ref={registerRef} |
| 30 | type={type} |
| 31 | value={value} |
| 32 | onChange={(e) => onUpdate(e.target.value)} |
| 33 | onKeyDown={onKeyDown} |
| 34 | onFocus={onFocus} |
| 35 | className={`h-8 w-full border-0 bg-transparent px-2 py-1 text-sm outline-none ${type === "number" ? "text-right font-mono tabular-nums" : "text-left"} ${isFocused ? "bg-primary/5 ring-2 ring-primary ring-inset" : ""} [appearance:textfield] placeholder:text-muted-foreground/50 focus:bg-primary/5 focus:ring-2 focus:ring-primary focus:ring-inset [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none`} |
| 36 | placeholder={placeholder} |
| 37 | /> |
| 38 | ); |
| 39 | } |
| 40 |