feat: Introduce a generic inline rename input component for document editing

2025-12-03 12:00:57 +01:00
parent e1dd1990d7
commit e66451afbd
5 changed files with 59 additions and 64 deletions
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react';
 import { Link } from 'react-router-dom';
 import { EditIcon, IconX, CheckIcon, PlusIcon } from '../ui/icons';
+import InlineRenameInput from './components/InlineRenameInput';
 import SelectionAssignmentMenu, {
  SelectionAssignmentMenuItem,
  type NormalizedSelectionAssignmentItem,
@@ -631,38 +632,21 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
  }

  const renderTitleEditForm = (extraClassName?: string) => (
-    <form className={`doc-title-edit${extraClassName ? ` ${extraClassName}` : ''}`} onSubmit={submitTitleEdit}>
-      <input
-        value={titleDraft}
-        onChange={(event) => {
-          setTitleDraft(event.target.value);
-          if (titleError) {
-            setTitleError(null);
-          }
-        }}
-        onKeyDown={(event) => {
-          if (event.key === 'Escape') {
-            event.preventDefault();
-            cancelTitleEdit();
-          }
-        }}
-        aria-label="Document title"
-        autoFocus
-        disabled={titleSaving}
-      />
-      <button type="submit" className="icon-button icon-button--accent" disabled={titleSaving} aria-label="Save title">
-        <CheckIcon size={16} />
-      </button>
-      <button
-        type="button"
-        className="icon-button"
-        onClick={cancelTitleEdit}
-        disabled={titleSaving}
-        aria-label="Cancel"
-      >
-        <IconX size={16} />
-      </button>
-    </form>
+    <InlineRenameInput
+      value={titleDraft}
+      onChange={(value) => {
+        setTitleDraft(value);
+        if (titleError) {
+          setTitleError(null);
+        }
+      }}
+      onSubmit={() => submitTitleEdit({ preventDefault: () => { } } as any)}
+      onCancel={cancelTitleEdit}
+      isSaving={titleSaving}
+      className={`doc-title-edit${extraClassName ? ` ${extraClassName}` : ''}`}
+      aria-label="Document title"
+      autoFocus
+    />
  );

  const titleMetaDisplay = editableTitle && isTitleEditing
@@ -685,32 +669,21 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
    );

  const issuedDisplay = editableIssued && isIssuedEditing ? (
-    <form className="doc-issued-edit" onSubmit={submitIssuedEdit}>
-      <input
-        type="date"
-        value={issuedDraft}
-        onChange={(event) => {
-          setIssuedDraft(event.target.value);
-          if (issuedError) {
-            setIssuedError(null);
-          }
-        }}
-        aria-label="Issued on"
-        disabled={issuedSaving}
-      />
-      <button type="submit" className="icon-button icon-button--accent" disabled={issuedSaving} aria-label="Save issued date">
-        <CheckIcon size={16} />
-      </button>
-      <button
-        type="button"
-        className="icon-button"
-        onClick={cancelIssuedEdit}
-        disabled={issuedSaving}
-        aria-label="Cancel"
-      >
-        <IconX size={16} />
-      </button>
-    </form>
+    <InlineRenameInput
+      type="date"
+      value={issuedDraft}
+      onChange={(value) => {
+        setIssuedDraft(value);
+        if (issuedError) {
+          setIssuedError(null);
+        }
+      }}
+      onSubmit={() => submitIssuedEdit({ preventDefault: () => { } } as any)}
+      onCancel={cancelIssuedEdit}
+      isSaving={issuedSaving}
+      className="doc-issued-edit"
+      aria-label="Issued on"
+    />
  ) : (
    <>
      <span className="detail-meta__value">{issuedDateLabel || 'Not set'}</span>