refactor(react/collections/table): deduplicate editing

apps/client/src/widgets/collections/board/card.tsx

@@ -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
+                <TitleEditor
-                    inputRef={editorRef}
                     currentValue={note.title}
-                    onKeyDown={(e) => {
+                    save={newTitle => api.renameCard(note.noteId, newTitle)}
-                        if (e.key === "Enter") {
+                    dismiss={() => api.dismissEditingTitle()}
-                            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();
-                    }}
                 />
             )}
         </div>

apps/client/src/widgets/collections/board/column.tsx

@@ -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({
                         />
                     </>
                 ) : (
-                    <>
+                    <TitleEditor
-                        <FormTextBox
+                        currentValue={column}
-                            inputRef={editorRef}
+                        save={newTitle => api.renameColumn(column, newTitle)}
-                            currentValue={column}
+                        dismiss={() => context.setColumnNameToEdit?.(undefined)}
-                            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);
-                            }}
-                        />
-                    </>
                 )}
             </h3>
 

apps/client/src/widgets/collections/board/index.tsx

@@ -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();
+            }}
+        />
+    )
+}