627 lines
25 KiB
JavaScript
627 lines
25 KiB
JavaScript
// Rôle : fournit l'outil tableau avec cellules libres, formules simples et échange TSV.
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { Icon } from "../../../components/Icon.jsx";
|
|
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
|
import { TextExchangeActions } from "./TextExchangeActions.jsx";
|
|
import { cellAddress, columnIndexToName, evaluateTable, parseCellAddress } from "./tableFormulaEngine.js";
|
|
|
|
const DEFAULT_ROWS = 10;
|
|
const DEFAULT_COLUMNS = 6;
|
|
const MAX_ROWS = 50;
|
|
const MAX_COLUMNS = 20;
|
|
const MIN_COLUMN_WIDTH = 96;
|
|
const MAX_COLUMN_WIDTH = 220;
|
|
const MIN_ROW_HEADER_WIDTH = 42;
|
|
const MAX_ROW_HEADER_WIDTH = 180;
|
|
|
|
function cleanCells(cells, rows, columns) {
|
|
const nextCells = {};
|
|
for (let rowIndex = 0; rowIndex < rows; rowIndex += 1) {
|
|
for (let columnIndex = 0; columnIndex < columns; columnIndex += 1) {
|
|
const address = cellAddress(rowIndex, columnIndex);
|
|
const value = String(cells?.[address] || "");
|
|
if (value.trim()) nextCells[address] = value;
|
|
}
|
|
}
|
|
return nextCells;
|
|
}
|
|
|
|
function cleanLabels(labels, length, getFallback) {
|
|
const nextLabels = {};
|
|
for (let index = 0; index < length; index += 1) {
|
|
const value = String(labels?.[index] || "").slice(0, 80);
|
|
if (value.trim() && value !== String(getFallback(index))) nextLabels[index] = value;
|
|
}
|
|
return nextLabels;
|
|
}
|
|
|
|
function estimateTextWidth(value, minWidth, maxWidth) {
|
|
const length = String(value || "").length;
|
|
return Math.min(maxWidth, Math.max(minWidth, 24 + length * 8));
|
|
}
|
|
|
|
function getColumnWidths(data, evaluatedCells) {
|
|
return Array.from({ length: data.columns }, (_, columnIndex) => {
|
|
let width = estimateTextWidth(data.columnLabels?.[columnIndex] || columnIndexToName(columnIndex), MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH);
|
|
for (let rowIndex = 0; rowIndex < data.rows; rowIndex += 1) {
|
|
const address = cellAddress(rowIndex, columnIndex);
|
|
const value = evaluatedCells[address]?.display || data.cells[address] || "";
|
|
width = Math.max(width, estimateTextWidth(value, MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH));
|
|
}
|
|
return width;
|
|
});
|
|
}
|
|
|
|
function getRowHeaderWidth(data) {
|
|
return Array.from({ length: data.rows }, (_, rowIndex) => data.rowLabels?.[rowIndex] || rowIndex + 1)
|
|
.reduce((width, label) => Math.max(width, estimateTextWidth(label, MIN_ROW_HEADER_WIDTH, MAX_ROW_HEADER_WIDTH)), MIN_ROW_HEADER_WIDTH);
|
|
}
|
|
|
|
function getSelectionBounds(selection) {
|
|
if (!selection?.anchor || !selection?.focus) return null;
|
|
return {
|
|
startRow: Math.min(selection.anchor.rowIndex, selection.focus.rowIndex),
|
|
endRow: Math.max(selection.anchor.rowIndex, selection.focus.rowIndex),
|
|
startColumn: Math.min(selection.anchor.columnIndex, selection.focus.columnIndex),
|
|
endColumn: Math.max(selection.anchor.columnIndex, selection.focus.columnIndex)
|
|
};
|
|
}
|
|
|
|
function isCellSelected(selection, rowIndex, columnIndex) {
|
|
const bounds = getSelectionBounds(selection);
|
|
return Boolean(bounds && rowIndex >= bounds.startRow && rowIndex <= bounds.endRow && columnIndex >= bounds.startColumn && columnIndex <= bounds.endColumn);
|
|
}
|
|
|
|
function isMultiCellSelection(selection) {
|
|
const bounds = getSelectionBounds(selection);
|
|
return Boolean(bounds && (bounds.startRow !== bounds.endRow || bounds.startColumn !== bounds.endColumn));
|
|
}
|
|
|
|
function clampCellPosition(rowIndex, columnIndex, rows, columns) {
|
|
return {
|
|
rowIndex: Math.min(rows - 1, Math.max(0, rowIndex)),
|
|
columnIndex: Math.min(columns - 1, Math.max(0, columnIndex))
|
|
};
|
|
}
|
|
|
|
function getRangeAddresses(selection) {
|
|
const bounds = getSelectionBounds(selection);
|
|
if (!bounds) return [];
|
|
const addresses = [];
|
|
for (let rowIndex = bounds.startRow; rowIndex <= bounds.endRow; rowIndex += 1) {
|
|
for (let columnIndex = bounds.startColumn; columnIndex <= bounds.endColumn; columnIndex += 1) {
|
|
addresses.push(cellAddress(rowIndex, columnIndex));
|
|
}
|
|
}
|
|
return addresses;
|
|
}
|
|
|
|
function getFormulaRangeText(selection) {
|
|
const addresses = getRangeAddresses(selection);
|
|
if (!addresses.length) return "";
|
|
return addresses.length === 1 ? addresses[0] : `(${addresses.join("+")})`;
|
|
}
|
|
|
|
export function TableModule({ toolboxId, moduleId, context, editing }) {
|
|
const data = context.normalizeTableData(context.getModuleData(toolboxId, moduleId, { rows: DEFAULT_ROWS, columns: DEFAULT_COLUMNS, cells: {} }));
|
|
const textContent = context.moduleText?.table || {};
|
|
const [editingCell, setEditingCell] = useState("");
|
|
const [highlightedCell, setHighlightedCell] = useState("");
|
|
const [selection, setSelection] = useState(null);
|
|
const draggingSelectionRef = useRef(false);
|
|
const formulaSelectionRef = useRef(null);
|
|
const inputRefs = useRef(new Map());
|
|
const highlightTimeoutRef = useRef(0);
|
|
const evaluatedCells = useMemo(() => evaluateTable(data.cells, data), [data]);
|
|
const columnWidths = useMemo(() => getColumnWidths(data, evaluatedCells), [data, evaluatedCells]);
|
|
const rowHeaderWidth = useMemo(() => getRowHeaderWidth(data), [data]);
|
|
|
|
useEffect(() => {
|
|
function stopSelectionDrag() {
|
|
if (formulaSelectionRef.current) {
|
|
const formulaSelection = formulaSelectionRef.current;
|
|
formulaSelectionRef.current = null;
|
|
draggingSelectionRef.current = false;
|
|
insertFormulaReferenceSelection(formulaSelection);
|
|
return;
|
|
}
|
|
draggingSelectionRef.current = false;
|
|
}
|
|
|
|
window.addEventListener("pointerup", stopSelectionDrag);
|
|
return () => window.removeEventListener("pointerup", stopSelectionDrag);
|
|
});
|
|
|
|
function save(nextData) {
|
|
context.setModuleData(toolboxId, moduleId, nextData, "table");
|
|
}
|
|
|
|
function setCellValue(address, value) {
|
|
const nextCells = { ...data.cells };
|
|
if (String(value || "").trim()) {
|
|
nextCells[address] = value;
|
|
} else {
|
|
delete nextCells[address];
|
|
}
|
|
save({ ...data, cells: nextCells });
|
|
}
|
|
|
|
function clearSelection(rowIndex, columnIndex) {
|
|
const nextCells = { ...data.cells };
|
|
const bounds = getSelectionBounds(selection) || {
|
|
startRow: rowIndex,
|
|
endRow: rowIndex,
|
|
startColumn: columnIndex,
|
|
endColumn: columnIndex
|
|
};
|
|
|
|
for (let selectedRowIndex = bounds.startRow; selectedRowIndex <= bounds.endRow; selectedRowIndex += 1) {
|
|
for (let selectedColumnIndex = bounds.startColumn; selectedColumnIndex <= bounds.endColumn; selectedColumnIndex += 1) {
|
|
delete nextCells[cellAddress(selectedRowIndex, selectedColumnIndex)];
|
|
}
|
|
}
|
|
|
|
save({ ...data, cells: nextCells });
|
|
const focusedAddress = cellAddress(rowIndex, columnIndex);
|
|
window.requestAnimationFrame(() => inputRefs.current.get(focusedAddress)?.focus());
|
|
}
|
|
|
|
function resize(rows, columns) {
|
|
save({
|
|
rows,
|
|
columns,
|
|
cells: cleanCells(data.cells, rows, columns),
|
|
rowLabels: cleanLabels(data.rowLabels, rows, (rowIndex) => rowIndex + 1),
|
|
columnLabels: cleanLabels(data.columnLabels, columns, columnIndexToName)
|
|
});
|
|
}
|
|
|
|
function setColumnLabel(columnIndex, value) {
|
|
const nextLabels = { ...data.columnLabels };
|
|
const nextValue = String(value || "").slice(0, 80);
|
|
if (nextValue.trim() && nextValue !== columnIndexToName(columnIndex)) {
|
|
nextLabels[columnIndex] = nextValue;
|
|
} else {
|
|
delete nextLabels[columnIndex];
|
|
}
|
|
save({ ...data, columnLabels: nextLabels });
|
|
}
|
|
|
|
function setRowLabel(rowIndex, value) {
|
|
const nextLabels = { ...data.rowLabels };
|
|
const nextValue = String(value || "").slice(0, 80);
|
|
if (nextValue.trim() && nextValue !== String(rowIndex + 1)) {
|
|
nextLabels[rowIndex] = nextValue;
|
|
} else {
|
|
delete nextLabels[rowIndex];
|
|
}
|
|
save({ ...data, rowLabels: nextLabels });
|
|
}
|
|
|
|
function registerInput(address, element) {
|
|
if (element) {
|
|
inputRefs.current.set(address, element);
|
|
} else {
|
|
inputRefs.current.delete(address);
|
|
}
|
|
}
|
|
|
|
function getActiveFormulaInput() {
|
|
if (!editingCell) return null;
|
|
const input = inputRefs.current.get(editingCell);
|
|
const value = data.cells[editingCell] || "";
|
|
return input && value.startsWith("=") ? input : null;
|
|
}
|
|
|
|
function focusCell(rowIndex, columnIndex, options = {}) {
|
|
const position = clampCellPosition(rowIndex, columnIndex, data.rows, data.columns);
|
|
const address = cellAddress(position.rowIndex, position.columnIndex);
|
|
window.requestAnimationFrame(() => {
|
|
const input = inputRefs.current.get(address);
|
|
input?.focus();
|
|
if (options.select) {
|
|
input?.select();
|
|
} else {
|
|
input?.setSelectionRange(input.value.length, input.value.length);
|
|
}
|
|
});
|
|
}
|
|
|
|
function startEditing(address, initialValue = null, options = {}) {
|
|
const nextValue = initialValue == null ? data.cells[address] || "" : initialValue;
|
|
if (initialValue != null) setCellValue(address, initialValue);
|
|
setEditingCell(address);
|
|
window.requestAnimationFrame(() => {
|
|
const input = inputRefs.current.get(address);
|
|
input?.focus();
|
|
if (options.select) {
|
|
input?.select();
|
|
} else {
|
|
const position = options.caret ?? nextValue.length;
|
|
input?.setSelectionRange(position, position);
|
|
}
|
|
});
|
|
}
|
|
|
|
function stopEditing(address) {
|
|
setEditingCell("");
|
|
const parsed = parseCellAddress(address);
|
|
if (parsed) focusCell(parsed.rowIndex, parsed.columnIndex);
|
|
}
|
|
|
|
function insertFormulaText(text, options = {}) {
|
|
const input = getActiveFormulaInput();
|
|
if (!input || !text) return false;
|
|
|
|
const currentValue = data.cells[editingCell] || "";
|
|
const start = options.start ?? input.selectionStart ?? currentValue.length;
|
|
const end = options.end ?? input.selectionEnd ?? start;
|
|
const nextValue = `${currentValue.slice(0, start)}${text}${currentValue.slice(end)}`;
|
|
setCellValue(editingCell, nextValue);
|
|
setHighlightedCell(options.highlightedCell || text);
|
|
window.clearTimeout(highlightTimeoutRef.current);
|
|
highlightTimeoutRef.current = window.setTimeout(() => setHighlightedCell(""), 700);
|
|
window.requestAnimationFrame(() => {
|
|
input.focus();
|
|
input.setSelectionRange(start + text.length, start + text.length);
|
|
});
|
|
return true;
|
|
}
|
|
|
|
function insertFormulaReferenceSelection(formulaSelection) {
|
|
const text = getFormulaRangeText({ anchor: formulaSelection.anchor, focus: formulaSelection.focus });
|
|
insertFormulaText(text, {
|
|
start: formulaSelection.start,
|
|
end: formulaSelection.end,
|
|
highlightedCell: cellAddress(formulaSelection.focus.rowIndex, formulaSelection.focus.columnIndex)
|
|
});
|
|
}
|
|
|
|
function getTsv(bounds = null) {
|
|
const rows = [];
|
|
const startRow = bounds?.startRow ?? 0;
|
|
const endRow = bounds?.endRow ?? data.rows - 1;
|
|
const startColumn = bounds?.startColumn ?? 0;
|
|
const endColumn = bounds?.endColumn ?? data.columns - 1;
|
|
|
|
for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
|
|
const columns = [];
|
|
for (let columnIndex = startColumn; columnIndex <= endColumn; columnIndex += 1) {
|
|
columns.push(evaluatedCells[cellAddress(rowIndex, columnIndex)]?.display || "");
|
|
}
|
|
rows.push(columns.join("\t"));
|
|
}
|
|
return rows.join("\n");
|
|
}
|
|
|
|
async function copyTsv() {
|
|
const text = getTsv(isMultiCellSelection(selection) ? getSelectionBounds(selection) : null);
|
|
if (!await context.copyText(text)) return;
|
|
context.notify?.(textContent.copiedTitle || "Tableau copié");
|
|
}
|
|
|
|
async function copySelection(event) {
|
|
if (!selection || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "c") return;
|
|
event.preventDefault();
|
|
const text = getTsv(getSelectionBounds(selection));
|
|
if (!await context.copyText(text)) return;
|
|
context.notify?.(textContent.copiedTitle || "Tableau copié");
|
|
}
|
|
|
|
function selectCell(rowIndex, columnIndex, extend = false) {
|
|
const cell = { rowIndex, columnIndex };
|
|
setSelection((currentSelection) => extend && currentSelection?.anchor
|
|
? { anchor: currentSelection.anchor, focus: cell }
|
|
: { anchor: cell, focus: cell });
|
|
}
|
|
|
|
function extendSelection(rowIndex, columnIndex) {
|
|
const cell = { rowIndex, columnIndex };
|
|
setSelection((currentSelection) => currentSelection?.anchor
|
|
? { anchor: currentSelection.anchor, focus: cell }
|
|
: { anchor: cell, focus: cell });
|
|
}
|
|
|
|
function startFormulaSelection(rowIndex, columnIndex) {
|
|
const input = getActiveFormulaInput();
|
|
const formulaCell = parseCellAddress(editingCell);
|
|
if (!input || (formulaCell?.rowIndex === rowIndex && formulaCell?.columnIndex === columnIndex)) return false;
|
|
const cell = { rowIndex, columnIndex };
|
|
formulaSelectionRef.current = {
|
|
anchor: cell,
|
|
focus: cell,
|
|
start: input.selectionStart ?? (data.cells[editingCell] || "").length,
|
|
end: input.selectionEnd ?? input.selectionStart ?? (data.cells[editingCell] || "").length
|
|
};
|
|
setSelection({ anchor: cell, focus: cell });
|
|
draggingSelectionRef.current = true;
|
|
return true;
|
|
}
|
|
|
|
function extendFormulaSelection(rowIndex, columnIndex) {
|
|
if (!formulaSelectionRef.current) return false;
|
|
const focus = { rowIndex, columnIndex };
|
|
formulaSelectionRef.current = { ...formulaSelectionRef.current, focus };
|
|
setSelection({ anchor: formulaSelectionRef.current.anchor, focus });
|
|
return true;
|
|
}
|
|
|
|
function handleCellKeyDown(event, rowIndex, columnIndex, address, isEditing) {
|
|
if (!isEditing && (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "c") {
|
|
copySelection(event);
|
|
return;
|
|
}
|
|
|
|
if (!isEditing && event.key === "Delete") {
|
|
event.preventDefault();
|
|
clearSelection(rowIndex, columnIndex);
|
|
return;
|
|
}
|
|
|
|
if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
formulaSelectionRef.current = null;
|
|
draggingSelectionRef.current = false;
|
|
setEditingCell("");
|
|
setSelection({ anchor: { rowIndex, columnIndex }, focus: { rowIndex, columnIndex } });
|
|
focusCell(rowIndex, columnIndex);
|
|
return;
|
|
}
|
|
|
|
if (!isEditing && event.key === "Enter") {
|
|
event.preventDefault();
|
|
startEditing(address, null, { select: true });
|
|
return;
|
|
}
|
|
|
|
const deltas = {
|
|
ArrowUp: [-1, 0],
|
|
ArrowDown: [1, 0],
|
|
ArrowLeft: [0, -1],
|
|
ArrowRight: [0, 1],
|
|
Enter: [event.shiftKey ? -1 : 1, 0],
|
|
Tab: [0, event.shiftKey ? -1 : 1]
|
|
};
|
|
const delta = deltas[event.key];
|
|
if (!delta) {
|
|
if (!isEditing && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
|
|
event.preventDefault();
|
|
startEditing(address, event.key, { caret: event.key.length });
|
|
}
|
|
return;
|
|
}
|
|
|
|
const input = event.currentTarget;
|
|
const valueLength = input.value.length;
|
|
const caretStart = input.selectionStart ?? valueLength;
|
|
const caretEnd = input.selectionEnd ?? caretStart;
|
|
const hasTextSelection = caretStart !== caretEnd;
|
|
const isHorizontalArrow = event.key === "ArrowLeft" || event.key === "ArrowRight";
|
|
const canMoveHorizontal = event.key === "ArrowLeft" ? caretStart === 0 : caretEnd === valueLength;
|
|
const shouldNavigate = !isEditing || event.key === "Tab" || event.key === "Enter" || event.shiftKey || !isHorizontalArrow || (!hasTextSelection && canMoveHorizontal);
|
|
|
|
if (!shouldNavigate) return;
|
|
|
|
event.preventDefault();
|
|
setEditingCell("");
|
|
const nextCell = clampCellPosition(rowIndex + delta[0], columnIndex + delta[1], data.rows, data.columns);
|
|
if (event.shiftKey && event.key.startsWith("Arrow")) {
|
|
extendSelection(nextCell.rowIndex, nextCell.columnIndex);
|
|
} else {
|
|
selectCell(nextCell.rowIndex, nextCell.columnIndex);
|
|
}
|
|
focusCell(nextCell.rowIndex, nextCell.columnIndex);
|
|
}
|
|
|
|
return (
|
|
<div className="table-module">
|
|
{editing && (
|
|
<div className="module-add-panel table-exchange-panel">
|
|
<TextExchangeActions type="table" data={data} context={context} textContent={textContent} exportLabel="Exporter TSV" onImport={(nextData) => context.setModuleData(toolboxId, moduleId, nextData, "table")} />
|
|
</div>
|
|
)}
|
|
<div className="notepad-toolbar table-toolbar" aria-label={textContent.toolbarLabel || "Actions du tableau"}>
|
|
<div className="notepad-format-controls table-controls">
|
|
<div className="notepad-toolbar-group" role="group" aria-label={textContent.rowActionsLabel || "Lignes"}>
|
|
<button
|
|
className="notepad-toolbar-button"
|
|
type="button"
|
|
onClick={() => resize(Math.min(MAX_ROWS, data.rows + 1), data.columns)}
|
|
disabled={data.rows >= MAX_ROWS}
|
|
aria-label={textContent.addRowTitle || "Ajouter une ligne"}
|
|
title={textContent.addRowTitle || "Ajouter une ligne"}
|
|
>
|
|
<Icon name="add-row" />
|
|
</button>
|
|
<button
|
|
className="notepad-toolbar-button danger"
|
|
type="button"
|
|
onClick={() => resize(Math.max(1, data.rows - 1), data.columns)}
|
|
disabled={data.rows <= 1}
|
|
aria-label={textContent.removeRowTitle || "Supprimer la dernière ligne"}
|
|
title={textContent.removeRowTitle || "Supprimer la dernière ligne"}
|
|
>
|
|
<Icon name="remove-row" />
|
|
</button>
|
|
</div>
|
|
<div className="notepad-toolbar-group" role="group" aria-label={textContent.columnActionsLabel || "Colonnes"}>
|
|
<button
|
|
className="notepad-toolbar-button"
|
|
type="button"
|
|
onClick={() => resize(data.rows, Math.min(MAX_COLUMNS, data.columns + 1))}
|
|
disabled={data.columns >= MAX_COLUMNS}
|
|
aria-label={textContent.addColumnTitle || "Ajouter une colonne"}
|
|
title={textContent.addColumnTitle || "Ajouter une colonne"}
|
|
>
|
|
<Icon name="add-column" />
|
|
</button>
|
|
<button
|
|
className="notepad-toolbar-button danger"
|
|
type="button"
|
|
onClick={() => resize(data.rows, Math.max(1, data.columns - 1))}
|
|
disabled={data.columns <= 1}
|
|
aria-label={textContent.removeColumnTitle || "Supprimer la dernière colonne"}
|
|
title={textContent.removeColumnTitle || "Supprimer la dernière colonne"}
|
|
>
|
|
<Icon name="remove-column" />
|
|
</button>
|
|
</div>
|
|
<div className="notepad-toolbar-group table-size-group" aria-label={textContent.sizeLabel || "Taille du tableau"}>
|
|
<span className="table-size-indicator">{data.rows} x {data.columns}</span>
|
|
</div>
|
|
</div>
|
|
<div className="notepad-toolbar-group table-copy-group">
|
|
<button
|
|
className="notepad-toolbar-button table-copy-button"
|
|
type="button"
|
|
onClick={copyTsv}
|
|
aria-label={textContent.copyTitle || "Copier les valeurs"}
|
|
title={textContent.copyTitle || "Copier les valeurs"}
|
|
>
|
|
<Icon name="copy" />
|
|
<span>{textContent.copyTitle || "Copier les valeurs"}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<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) => setColumnLabel(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}
|
|
onRowLabelChange={setRowLabel}
|
|
onFocus={(cell) => {
|
|
const parsed = parseCellAddress(cell);
|
|
if (parsed && !selection) selectCell(parsed.rowIndex, parsed.columnIndex);
|
|
}}
|
|
onBlur={(cell) => {
|
|
if (editingCell === cell) setEditingCell("");
|
|
}}
|
|
onCellChange={setCellValue}
|
|
onFormulaSelectionStart={startFormulaSelection}
|
|
onFormulaSelectionExtend={extendFormulaSelection}
|
|
onSelectCell={selectCell}
|
|
onExtendSelection={extendSelection}
|
|
draggingSelectionRef={draggingSelectionRef}
|
|
onCellKeyDown={handleCellKeyDown}
|
|
onStartEditing={startEditing}
|
|
registerInput={registerInput}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TableRow({ rowIndex, columns, cells, evaluatedCells, editingCell, highlightedCell, textContent, rowLabel, selection, onRowLabelChange, onFocus, onBlur, onCellChange, onFormulaSelectionStart, onFormulaSelectionExtend, onSelectCell, onExtendSelection, draggingSelectionRef, onCellKeyDown, onStartEditing, registerInput }) {
|
|
return (
|
|
<>
|
|
<HeaderLabelInput
|
|
className="table-row-header table-header-input"
|
|
value={rowLabel || String(rowIndex + 1)}
|
|
fallback={String(rowIndex + 1)}
|
|
onSave={(value) => onRowLabelChange(rowIndex, value)}
|
|
aria-label={`${textContent.rowLabel || "Intitulé de ligne"} ${rowIndex + 1}`}
|
|
title={`${rowIndex + 1} - ${textContent.rowFormulaTitle || "Référence conservée dans les formules"}`}
|
|
/>
|
|
{Array.from({ length: columns }, (_, columnIndex) => {
|
|
const address = cellAddress(rowIndex, columnIndex);
|
|
const rawValue = cells[address] || "";
|
|
const evaluated = evaluatedCells[address];
|
|
const isEditing = editingCell === address;
|
|
const isFormula = rawValue.startsWith("=");
|
|
const displayValue = isEditing ? rawValue : evaluated?.display || rawValue;
|
|
const className = [
|
|
"table-cell-input",
|
|
isEditing ? "is-editing" : "",
|
|
isFormula ? "is-formula" : "",
|
|
evaluated?.error && evaluated.error !== "empty" && !isEditing ? "has-error" : "",
|
|
isCellSelected(selection, rowIndex, columnIndex) ? "is-selected" : "",
|
|
highlightedCell === address ? "is-referenced" : ""
|
|
].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<input
|
|
key={address}
|
|
ref={(element) => registerInput(address, element)}
|
|
className={className}
|
|
value={displayValue}
|
|
onMouseDown={(event) => {
|
|
if (onFormulaSelectionStart(rowIndex, columnIndex)) {
|
|
event.preventDefault();
|
|
} else {
|
|
draggingSelectionRef.current = true;
|
|
onSelectCell(rowIndex, columnIndex, event.shiftKey);
|
|
}
|
|
}}
|
|
onDoubleClick={() => onStartEditing(address, null, { select: true })}
|
|
onMouseEnter={() => {
|
|
if (onFormulaSelectionExtend(rowIndex, columnIndex)) return;
|
|
if (draggingSelectionRef.current) onExtendSelection(rowIndex, columnIndex);
|
|
}}
|
|
onFocus={() => onFocus(address)}
|
|
onBlur={() => onBlur(address)}
|
|
onChange={(event) => onCellChange(address, event.target.value)}
|
|
onKeyDown={(event) => onCellKeyDown(event, rowIndex, columnIndex, address, isEditing)}
|
|
aria-label={`${textContent.cellLabel || "Cellule"} ${address}`}
|
|
title={evaluated?.error && evaluated.error !== "empty" ? textContent.errorTitle || "Formule invalide" : address}
|
|
inputMode="text"
|
|
readOnly={!isEditing}
|
|
spellCheck="false"
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function HeaderLabelInput({ className, value, fallback, onSave, ...props }) {
|
|
const inlineEdit = useInlineEdit({
|
|
value,
|
|
onCommit: onSave,
|
|
transform: (draft) => String(draft || ""),
|
|
blurOnEscape: true
|
|
});
|
|
|
|
return (
|
|
<input
|
|
{...inlineEdit.getInputProps({
|
|
...props,
|
|
className,
|
|
onFocus: (event) => {
|
|
if (value === fallback) window.requestAnimationFrame(() => event.target.select());
|
|
},
|
|
spellCheck: "false"
|
|
})}
|
|
/>
|
|
);
|
|
}
|