HIsheR
72 lines
3.7 KiB
TypeScript
72 lines
3.7 KiB
TypeScript
import { effect, h } from '@ui-arch/frame';
|
||
import type { EditableProps } from './types.js';
|
||
|
||
/*** 行内编辑：静止态就是文字（hover 才露出可编辑暗示），点一下就地变输入框；Enter 提交、Esc 取消、失焦提交；validate 不过则留在编辑态并标红（与 form 同口径） ***/
|
||
export function editable(props: EditableProps): HTMLElement {
|
||
// —— 状态集中声明 ——
|
||
const value = props.value; // 唯一数据源：只有提交才写回，取消绝不落值
|
||
let editing = false; // 是否处于编辑态
|
||
let canceling = false; // Esc 触发的失焦不算提交（blur 让位一次）
|
||
let painted: string | null = null; // 上次静止态渲染的值；null 表示还没画过（effect 首跑必须画一次）
|
||
const root = h('div', { class: 'ua-editable' }) as HTMLElement;
|
||
const isDisabled = (): boolean => (typeof props.disabled === 'function' ? props.disabled() : !!props.disabled); // 布尔与信号两种入参统一判断
|
||
|
||
/*** 回到静止态并重画（提交 / 取消共用一条出口，避免两条路径各漏一半清理） ***/
|
||
const stop = (): void => { editing = false; painted = null; paint(); canceling = false; }; // 画完再复位：paint 里的 replaceChildren 会同步触发 blur，那时 canceling 必须仍为 true
|
||
|
||
/*** 提交：先去空白再校验；校验不过留在编辑态标红，过了才写回信号与回调 ***/
|
||
const commit = (raw: string, field: HTMLElement): void => {
|
||
const next = raw.trim();
|
||
const msg = props.validate?.(next) ?? null;
|
||
if (msg) {
|
||
field.setAttribute('aria-invalid', 'true');
|
||
const tip = root.querySelector('.ua-editable-error');
|
||
if (tip) tip.textContent = msg;
|
||
else root.append(h('span', { class: 'ua-editable-error', role: 'alert' }, msg));
|
||
return;
|
||
}
|
||
value(next);
|
||
props.onCommit?.(next);
|
||
stop();
|
||
};
|
||
|
||
/*** 画一遍：编辑态渲染输入控件并聚焦，静止态渲染整块可点的文字按钮 ***/
|
||
const paint = (): void => {
|
||
if (editing) {
|
||
const field = props.multiline
|
||
? h('textarea', { class: 'ua-editable-input', rows: 3, disabled: props.disabled }, value())
|
||
: h('input', { class: 'ua-editable-input', disabled: props.disabled, value: value() });
|
||
const el = field as HTMLInputElement | HTMLTextAreaElement;
|
||
el.addEventListener('keydown', ((e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') { e.preventDefault(); canceling = true; stop(); return; } // Esc：丢弃草稿
|
||
const enter = e.key === 'Enter' && (!props.multiline || e.ctrlKey || e.metaKey); // 多行只认 Ctrl/Cmd+Enter，换行留给 Enter
|
||
if (enter) { e.preventDefault(); commit(el.value, el); }
|
||
}) as EventListener); // 联合类型（input | textarea）取不到同一个重载，这里显式收窄
|
||
el.addEventListener('blur', () => {
|
||
if (canceling) { canceling = false; return; } // 卫语句：取消导致的失焦不提交
|
||
commit(el.value, el);
|
||
});
|
||
root.replaceChildren(el);
|
||
el.focus();
|
||
el.select?.();
|
||
return;
|
||
}
|
||
const text = value();
|
||
painted = text;
|
||
root.replaceChildren(h('button', {
|
||
type: 'button',
|
||
class: `ua-editable-view${text ? '' : ' is-empty'}`,
|
||
disabled: props.disabled,
|
||
title: text ? '点击编辑' : '点击填写',
|
||
'aria-label': `${props.label ?? '编辑'}：${text || '空'}`,
|
||
onClick: () => { if (isDisabled()) return; editing = true; paint(); }, // 卫语句：禁用态点了也不进编辑
|
||
}, text || props.placeholder || '点击填写'));
|
||
};
|
||
|
||
effect(() => {
|
||
const next = value();
|
||
if (!editing && next !== painted) paint(); // 外部改值只同步静止态，不打断正在编辑的草稿
|
||
});
|
||
return root;
|
||
}
|