TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-04-29 09:23:08 +00:00
Code Activity

JSON editor note fix (#3260)

Browse Source
This commit is contained in:
Bas van den Berg 2025-03-19 12:04:58 +01:00 committed by GitHub
parent 6072e72974
commit 6fa198147b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 127 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/app/json-editor/_components/Note.tsx
View File

@ -66,16 +66,47 @@ function Note({
});
}, [script, setScript]);
return (
<>
<h3 className="text-xl font-semibold">Notes</h3>
{script.notes.map((note, index) => (
<NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
))}
<Button type="button" size="sm" onClick={addNote}>
<PlusCircle className="mr-2 h-4 w-4" /> Add Note
</Button>
</>
);
}
const NoteItem = memo(
({ note, index }: { note: Script["notes"][number]; index: number }) => (
({
note,
index,
updateNote,
removeNote,
}: {
note: Script["notes"][number];
index: number;
updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
removeNote: (index: number) => void;
}) => {
const inputRef = useRef<HTMLInputElement | null>(null);
const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
updateNote(index, "text", e.target.value);
setTimeout(() => {
inputRef.current?.focus();
}, 0);
}, [index, updateNote]);
return (
<div className="space-y-2 border p-4 rounded">
<Input
placeholder="Note Text"
value={note.text}
onChange={(e) => updateNote(index, "text", e.target.value)}
ref={(el) => {
inputRefs.current[index] = el;
}}
onChange={handleTextChange}
ref={inputRef}
/>
<Select
value={note.type}
@ -109,22 +140,11 @@ function Note({
<Trash2 className="mr-2 h-4 w-4" /> Remove Note
</Button>
</div>
),
);
}
);
NoteItem.displayName = 'NoteItem';
return (
<>
<h3 className="text-xl font-semibold">Notes</h3>
{script.notes.map((note, index) => (
<NoteItem key={index} note={note} index={index} />
))}
<Button type="button" size="sm" onClick={addNote}>
<PlusCircle className="mr-2 h-4 w-4" /> Add Note
</Button>
</>
);
}
export default memo(Note);