92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
// Rôle : rend la grille du tableau et connecte les cellules aux handlers du module.
|
|
import { columnIndexToName, parseCellAddress } from "./tableFormulaEngine.js";
|
|
import { HeaderLabelInput, TableRow } from "./TableGridParts.jsx";
|
|
|
|
export function TableGrid({
|
|
data,
|
|
textContent,
|
|
evaluatedCells,
|
|
editingCell,
|
|
highlightedCell,
|
|
selection,
|
|
movePreview,
|
|
columnWidths,
|
|
rowHeaderWidth,
|
|
draggingSelectionRef,
|
|
onColumnLabelChange,
|
|
onRowLabelChange,
|
|
onCellChange,
|
|
onFormulaSelectionStart,
|
|
onFormulaSelectionExtend,
|
|
onStartMoveSelection,
|
|
onMoveSelection,
|
|
onSelectCell,
|
|
onExtendSelection,
|
|
onPasteSelection,
|
|
onCellKeyDown,
|
|
onStartEditing,
|
|
onEditingCellClear,
|
|
registerInput
|
|
}) {
|
|
return (
|
|
<div className="table-grid-wrap legacy-scrollbar">
|
|
<div
|
|
className="table-grid"
|
|
style={{
|
|
"--table-columns": `${rowHeaderWidth}px ${columnWidths.map((width) => `minmax(${width}px, 1fr)`).join(" ")}`,
|
|
"--table-min-width": `${rowHeaderWidth + columnWidths.reduce((total, width) => total + width, 0)}px`
|
|
}}
|
|
role="grid"
|
|
aria-label={textContent.gridLabel || "Tableau"}
|
|
>
|
|
<span className="table-corner" aria-hidden="true" />
|
|
{Array.from({ length: data.columns }, (_, columnIndex) => (
|
|
<HeaderLabelInput
|
|
className="table-header-cell table-header-input"
|
|
key={columnIndex}
|
|
value={data.columnLabels?.[columnIndex] || columnIndexToName(columnIndex)}
|
|
fallback={columnIndexToName(columnIndex)}
|
|
onSave={(value) => onColumnLabelChange(columnIndex, value)}
|
|
aria-label={`${textContent.columnLabel || "Intitulé de colonne"} ${columnIndexToName(columnIndex)}`}
|
|
title={`${columnIndexToName(columnIndex)} - ${textContent.columnFormulaTitle || "Référence conservée dans les formules"}`}
|
|
/>
|
|
))}
|
|
{Array.from({ length: data.rows }, (_, rowIndex) => (
|
|
<TableRow
|
|
key={rowIndex}
|
|
rowIndex={rowIndex}
|
|
columns={data.columns}
|
|
cells={data.cells}
|
|
evaluatedCells={evaluatedCells}
|
|
editingCell={editingCell}
|
|
highlightedCell={highlightedCell}
|
|
textContent={textContent}
|
|
rowLabel={data.rowLabels?.[rowIndex] || ""}
|
|
selection={selection}
|
|
movePreview={movePreview}
|
|
onRowLabelChange={onRowLabelChange}
|
|
onFocus={(cell) => {
|
|
const parsed = parseCellAddress(cell);
|
|
if (parsed && !selection) onSelectCell(parsed.rowIndex, parsed.columnIndex);
|
|
}}
|
|
onBlur={(cell) => {
|
|
if (editingCell === cell) onEditingCellClear();
|
|
}}
|
|
onCellChange={onCellChange}
|
|
onFormulaSelectionStart={onFormulaSelectionStart}
|
|
onFormulaSelectionExtend={onFormulaSelectionExtend}
|
|
onStartMoveSelection={onStartMoveSelection}
|
|
onMoveSelection={onMoveSelection}
|
|
onSelectCell={onSelectCell}
|
|
onExtendSelection={onExtendSelection}
|
|
onPasteSelection={onPasteSelection}
|
|
draggingSelectionRef={draggingSelectionRef}
|
|
onCellKeyDown={onCellKeyDown}
|
|
onStartEditing={onStartEditing}
|
|
registerInput={registerInput}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|