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 | 1x 17x 17x 17x 17x 17x 17x 17x 1x 1x 1x 1x | import { memo } from 'react';
import type { CellPosition } from './types';
interface CellRendererProps {
row: number;
col: number;
value: string;
width: number;
height: number;
isSelected: boolean;
isActive: boolean;
isEditing: boolean;
isSearchMatch: boolean;
isCurrentMatch: boolean;
onMouseDown: (pos: CellPosition, e: React.MouseEvent) => void;
onMouseEnter: (pos: CellPosition) => void;
onDoubleClick: (pos: CellPosition) => void;
onContextMenu: (pos: CellPosition, e: React.MouseEvent) => void;
}
export const CellRenderer = memo(function CellRenderer({
row, col, value, width, height,
isSelected, isActive, isEditing, isSearchMatch, isCurrentMatch,
onMouseDown, onMouseEnter, onDoubleClick, onContextMenu,
}: CellRendererProps) {
let className = 'csv-cell';
if (isSelected) className += ' csv-cell--selected';
if (isActive) className += ' csv-cell--active';
if (isEditing) className += ' csv-cell--editing';
if (isSearchMatch) className += ' csv-cell--search-match';
if (isCurrentMatch) className += ' csv-cell--current-match';
return (
<div
className={className}
style={{ width, height, minWidth: width }}
onMouseDown={e => onMouseDown({ row, col }, e)}
onMouseEnter={() => onMouseEnter({ row, col })}
onDoubleClick={() => onDoubleClick({ row, col })}
onContextMenu={e => { e.preventDefault(); onContextMenu({ row, col }, e); }}
>
<span className="csv-cell-text">{isEditing ? '' : value}</span>
</div>
);
});
|