108 lines
5.0 KiB
TypeScript
108 lines
5.0 KiB
TypeScript
/**
|
|
* 工作台标题的局部交互状态机：idle→selected→editing→saving，支持二次点击/F2编辑、Enter/失焦保存、Escape取消。
|
|
* 只管理草稿、焦点和提示，真正改名由异步onSave负责；组件本身不修改目录或画布文档。
|
|
*/
|
|
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import styles from "./editable-title.module.css";
|
|
|
|
/** editable控制能否进入编辑；title是宿主已采用值，draft只在一次编辑会话内使用，保存失败回editing重试。 */
|
|
export function EditableTitle({ title, editable, onSave, className = "" }: {
|
|
title: string;
|
|
editable: boolean;
|
|
onSave: (title: string) => Promise<void>;
|
|
className?: string;
|
|
}) {
|
|
const [mode, setMode] = useState<"idle" | "selected" | "editing" | "saving">("idle");
|
|
const [draft, setDraft] = useState(title);
|
|
const [error, setError] = useState("");
|
|
const shell = useRef<HTMLDivElement>(null);
|
|
const input = useRef<HTMLInputElement>(null);
|
|
const button = useRef<HTMLButtonElement>(null);
|
|
// ref防Enter和随后的blur重复调用；cancelled防Escape/已完成后的blur重新提交。
|
|
const pending = useRef(false);
|
|
const cancelled = useRef(false);
|
|
|
|
/** selected阶段才监听外侧pointerdown；离开此模式即退订，编辑/保存不由这条外侧点击逻辑擅自退出。 */
|
|
useEffect(() => {
|
|
if (mode !== "selected") return;
|
|
/** 只在实际DOM目标落在shell外时取消选择，标题内部点击保留进入编辑的机会。 */
|
|
const deselect = (event: PointerEvent) => {
|
|
if (event.target instanceof Node && !shell.current?.contains(event.target)) setMode("idle");
|
|
};
|
|
document.addEventListener("pointerdown", deselect);
|
|
return () => document.removeEventListener("pointerdown", deselect);
|
|
}, [mode]);
|
|
|
|
/** 进入editing后挂载的input才可聚焦/全选，不在渲染阶段直接访问未就绪DOM。 */
|
|
useEffect(() => {
|
|
if (mode === "editing") { input.current?.focus(); input.current?.select(); }
|
|
}, [mode]);
|
|
|
|
/** 每次从宿主最新title初始化草稿并清旧错误，不能沿用上次取消的输入。 */
|
|
function edit() {
|
|
if (!editable) return;
|
|
cancelled.current = false;
|
|
setDraft(title);
|
|
setError("");
|
|
setMode("editing");
|
|
}
|
|
/** 标记取消以抑制blur保存，回selected并下一帧把焦点还给标题按钮。 */
|
|
function cancel() {
|
|
cancelled.current = true;
|
|
setError("");
|
|
setMode("selected");
|
|
requestAnimationFrame(() => button.current?.focus());
|
|
}
|
|
/** 同步ref挡重复提交，trim后校验非空及UTF-8≤300字节；同名不发请求。
|
|
* 成功回idle，失败留草稿/错误重编辑，finally释放pending允许下一次明确尝试。 */
|
|
async function save() {
|
|
if (pending.current || cancelled.current) return;
|
|
const name = draft.trim();
|
|
if (!name || new TextEncoder().encode(name).length > 300) {
|
|
setError("名称不能为空，且不能超过 300 字节（约 100 个汉字）。");
|
|
input.current?.focus();
|
|
return;
|
|
}
|
|
if (name === title) { cancelled.current = true; setMode("idle"); return; }
|
|
pending.current = true;
|
|
setMode("saving");
|
|
setError("");
|
|
try {
|
|
await onSave(name);
|
|
cancelled.current = true;
|
|
setMode("idle");
|
|
} catch (error) {
|
|
setError(error instanceof Error ? error.message : "改名失败，请重试。");
|
|
setMode("editing");
|
|
} finally { pending.current = false; }
|
|
}
|
|
// saving保留input但只读；输入法组合不把Enter当提交，键盘事件停止冒泡避免触发画布快捷键。
|
|
return (
|
|
<div ref={shell} className={`${styles.shell} ${className}`}>
|
|
{mode === "editing" || mode === "saving" ? (
|
|
<input ref={input} className={styles.input} aria-label="编辑图谱名称" aria-invalid={Boolean(error)}
|
|
aria-describedby={error ? "graph-title-error" : undefined} aria-busy={mode === "saving"}
|
|
value={draft} readOnly={mode === "saving"} maxLength={300}
|
|
onChange={(event) => setDraft(event.target.value)} onBlur={() => void save()}
|
|
onKeyDown={(event) => {
|
|
event.stopPropagation();
|
|
if (event.nativeEvent.isComposing || mode === "saving") return;
|
|
if (event.key === "Enter") { event.preventDefault(); void save(); }
|
|
if (event.key === "Escape") { event.preventDefault(); cancel(); }
|
|
}} />
|
|
) : (
|
|
<button ref={button} type="button" className={styles.title} data-selected={mode === "selected"}
|
|
disabled={!editable} aria-label={`图谱名称：${title}`} aria-pressed={mode === "selected"}
|
|
title={editable ? `${title} · 点击选中，再次点击改名` : title}
|
|
onClick={() => mode === "selected" ? edit() : setMode("selected")}
|
|
onKeyDown={(event) => { if (event.key === "F2") { event.preventDefault(); edit(); } if (event.key === "Escape") setMode("idle"); }}>
|
|
{title}
|
|
</button>
|
|
)}
|
|
{error && <span id="graph-title-error" className={styles.error} role="alert">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|