Extract table toolbar component
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
This commit is contained in:
parent
73e84ee703
commit
126c673a2d
3 changed files with 82 additions and 73 deletions
|
|
@ -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"
|
||||
|
|
|
|||
71
website/src/features/toolboxes/modules/TableToolbar.jsx
Normal file
71
website/src/features/toolboxes/modules/TableToolbar.jsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// Rôle : rend la barre d'actions du module Table pour taille, lignes, colonnes et copie.
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { MAX_COLUMNS, MAX_ROWS } from "./tableUtils.js";
|
||||
|
||||
export function TableToolbar({ rows, columns, textContent, onResize, onCopy }) {
|
||||
return (
|
||||
<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={() => onResize(Math.min(MAX_ROWS, rows + 1), columns)}
|
||||
disabled={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={() => onResize(Math.max(1, rows - 1), columns)}
|
||||
disabled={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={() => onResize(rows, Math.min(MAX_COLUMNS, columns + 1))}
|
||||
disabled={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={() => onResize(rows, Math.max(1, columns - 1))}
|
||||
disabled={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">{rows} x {columns}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notepad-toolbar-group table-copy-group">
|
||||
<button
|
||||
className="notepad-toolbar-button table-copy-button"
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue