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

Polish calculator large number display

Browse source
This commit is contained in:
Shinuwa 2026-08-09 17:37:05 +02:00
parent 117b7b79e1
commit 4ec7955b25
3 changed files with 70 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
website/src/features/toolboxes/modules/CalculatorModule.jsx
View file

@ -22,6 +22,18 @@ function formatResult(value) {
return Number.parseFloat(value.toFixed(6)).toString();
}
function formatDisplayResult(value) {
if (!Number.isFinite(value)) return "";
return new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 6 }).format(Number.parseFloat(value.toFixed(6)));
}
function getResultLengthClass(value) {
const length = formatResult(value).replace(/[^\d]/g, "").length;
if (length >= 16) return "is-compact";
if (length >= 12) return "is-long";
return "";
}
function getChildren(entries, parentId) {
return entries.filter((entry) => (entry.parentId || "") === parentId);
}
@ -151,9 +163,9 @@ export function CalculatorModule({ toolboxId, moduleId, context, editing }) {
<span>{textContent.expressionLabel || "Calcul"}</span>
<input value={expression} onChange={(event) => setExpression(event.target.value)} placeholder={textContent.expressionPlaceholder || "10*10"} inputMode="decimal" />
</label>
<div className="calculator-result" aria-live="polite">
<div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`} aria-live="polite">
<span>{textContent.resultLabel || "Résultat"}</span>
<strong>{result == null ? "-" : formatResult(result)}</strong>
<strong>{result == null ? "-" : formatDisplayResult(result)}</strong>
</div>
<label>
<span>{textContent.labelLabel || "Libellé"}</span>
@ -233,13 +245,16 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
{entry.id === editingId ? (
<>
<span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
<strong>{formatResult(entry.value)}</strong>
<strong>{formatDisplayResult(entry.value)}</strong>
</span>
<EditableCalculatorLabel entry={entry} textContent={textContent} onRename={onRename} onDone={() => setEditingId("")} />
</>
) : (
<button className="tool-split-entry-summary" type="button" onClick={() => onUse(entry)} title={textContent.useEntryTitle || "Utiliser comme base"}>
<span><strong>{formatResult(entry.value)}</strong> {entry.label}</span>
<span>
<strong>{formatDisplayResult(entry.value)}</strong>
{entry.label && <em>{entry.label}</em>}
</span>
</button>
)}
<button type="button" onClick={() => setEditingId(entry.id === editingId ? "" : entry.id)} aria-label={`${textContent.renameTitle || "Renommer"} ${entry.label}`} title={textContent.renameTitle || "Renommer"}>