refactor(react/collections/table): deduplicate editing

This commit is contained in:
Elian Doran 2025-09-11 21:51:02 +03:00
parent cb84e4c7b6
commit 62452b61b1
No known key found for this signature in database
3 changed files with 49 additions and 50 deletions

View File

@ -2,10 +2,9 @@ import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
import FBranch from "../../../entities/fbranch";
import FNote from "../../../entities/fnote";
import BoardApi from "./api";
import { BoardViewContext } from ".";
import { BoardViewContext, TitleEditor } from ".";
import { ContextMenuEvent } from "../../../menus/context_menu";
import { openNoteContextMenu } from "./context_menu";
import FormTextBox from "../../react/FormTextBox";
export default function Card({
api,
@ -59,28 +58,10 @@ export default function Card({
{!isEditing ? (
<>{note.title}</>
) : (
<FormTextBox
inputRef={editorRef}
<TitleEditor
currentValue={note.title}
onKeyDown={(e) => {
if (e.key === "Enter") {
const newTitle = e.currentTarget.value;
if (newTitle !== note.title) {
api.renameCard(note.noteId, newTitle);
}
api.dismissEditingTitle();
}
if (e.key === "Escape") {
api.dismissEditingTitle();
}
}}
onBlur={(newTitle) => {
if (newTitle !== note.title) {
api.renameCard(note.noteId, newTitle);
}
api.dismissEditingTitle();
}}
save={newTitle => api.renameCard(note.noteId, newTitle)}
dismiss={() => api.dismissEditingTitle()}
/>
)}
</div>

View File

@ -1,11 +1,10 @@
import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
import FBranch from "../../../entities/fbranch";
import FNote from "../../../entities/fnote";
import { BoardViewContext } from ".";
import { BoardViewContext, TitleEditor } from ".";
import branches from "../../../services/branches";
import { openColumnContextMenu } from "./context_menu";
import { ContextMenuEvent } from "../../../menus/context_menu";
import FormTextBox from "../../react/FormTextBox";
import Icon from "../../react/Icon";
import { t } from "../../../services/i18n";
import BoardApi from "./api";
@ -171,31 +170,11 @@ export default function Column({
/>
</>
) : (
<>
<FormTextBox
inputRef={editorRef}
<TitleEditor
currentValue={column}
onKeyDown={(e) => {
if (e.key === "Enter") {
const newTitle = e.currentTarget.value;
if (newTitle !== column) {
api.renameColumn(column, newTitle);
}
context.setColumnNameToEdit?.(undefined);
}
if (e.key === "Escape") {
context.setColumnNameToEdit?.(undefined);
}
}}
onBlur={(newTitle) => {
if (newTitle !== column) {
api.renameColumn(column, newTitle);
}
context.setColumnNameToEdit?.(undefined);
}}
save={newTitle => api.renameColumn(column, newTitle)}
dismiss={() => context.setColumnNameToEdit?.(undefined)}
/>
</>
)}
</h3>

View File

@ -242,3 +242,42 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
</div>
)
}
export function TitleEditor({ currentValue, save, dismiss }: {
currentValue: string,
save: (newValue: string) => void,
dismiss: () => void
}) {
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, [ inputRef ]);
return (
<FormTextBox
inputRef={inputRef}
currentValue={currentValue}
onKeyDown={(e) => {
if (e.key === "Enter") {
const newValue = e.currentTarget.value;
if (newValue !== currentValue) {
save(newValue);
}
dismiss();
}
if (e.key === "Escape") {
dismiss();
}
}}
onBlur={(newValue) => {
if (newValue !== currentValue) {
save(newValue);
}
dismiss();
}}
/>
)
}