ScarriffleandClaude Opus 5
637f5f4a70
Bisher musste man dafuer die ganze Buchung aufmachen. Jetzt steht in der Notiz-Spalte ein Feld: hineinschreiben, Enter oder wegklicken - fertig. Escape nimmt die Aenderung zurueck, leeren loescht die Notiz. Und sie steht nicht mehr doppelt da. Die dritte Zeile unter der Buchung zeigte dieselbe Notiz wie die neue Spalte; sie faellt weg, der Verwendungszweck darueber bleibt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
40 lines
1.2 KiB
React
40 lines
1.2 KiB
React
import { useEffect, useState } from "react";
|
||
|
||
// Kleines, editierbares Textfeld. Speichert beim Verlassen und bei Enter, aber
|
||
// nur wenn sich etwas geändert hat – wie EditableAmount daneben, nur ohne die
|
||
// Betragsrechnerei. Escape nimmt die Änderung zurück.
|
||
export default function EditableText({ value, onSave, placeholder, maxLength }) {
|
||
const [val, setVal] = useState(value || "");
|
||
// Von aussen neu geladen (etwa nach dem Speichern): Stand übernehmen.
|
||
useEffect(() => { setVal(value || ""); }, [value]);
|
||
|
||
function commit() {
|
||
const neu = val.trim();
|
||
if (neu !== (value || "")) onSave(neu);
|
||
}
|
||
|
||
return (
|
||
<input
|
||
type="text"
|
||
value={val}
|
||
placeholder={placeholder}
|
||
maxLength={maxLength}
|
||
// Der ganze Text als Tooltip: Die Spalte ist schmal, die Notiz darf lang sein.
|
||
title={val || undefined}
|
||
onChange={(e) => setVal(e.target.value)}
|
||
onBlur={commit}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
commit();
|
||
e.target.blur();
|
||
}
|
||
if (e.key === "Escape") {
|
||
setVal(value || "");
|
||
e.target.blur();
|
||
}
|
||
}}
|
||
/>
|
||
);
|
||
}
|