shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract table toolbar component
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-24 21:58:39 +02:00
parent 73e84ee703
commit 126c673a2d
3 changed files with 82 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

68
website/src/features/toolboxes/modules/TableModule.jsx
View file

@ -1,14 +1,12 @@
// 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 { TextExchangeActions } from "./TextExchangeActions.jsx";
import { cellAddress, columnIndexToName, evaluateTable, parseCellAddress } from "./tableFormulaEngine.js";
import { HeaderLabelInput, TableRow } from "./TableGridParts.jsx";
import { TableToolbar } from "./TableToolbar.jsx";
import {
DEFAULT_COLUMNS,
DEFAULT_ROWS,
MAX_COLUMNS,
MAX_ROWS,
clampCellPosition,
cleanCells,
cleanLabels,
@ -411,69 +409,7 @@ export function TableModule({ toolboxId, moduleId, context, textExchangeOpen })
<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>
<TableToolbar rows={data.rows} columns={data.columns} textContent={textContent} onResize={resize} onCopy={copyTsv} />
<div className="table-grid-wrap legacy-scrollbar">
<div
className="table-grid"