113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
interface InlineEditInputProps {
|
|
value: number;
|
|
onSave: (value: number) => Promise<void>;
|
|
formatDisplay?: (value: number) => string;
|
|
min?: number;
|
|
step?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
type Status = 'idle' | 'editing' | 'saving' | 'success' | 'error';
|
|
|
|
export default function InlineEditInput({
|
|
value,
|
|
onSave,
|
|
formatDisplay = (v) => String(v),
|
|
min,
|
|
step,
|
|
className = '',
|
|
disabled = false,
|
|
}: InlineEditInputProps) {
|
|
const [status, setStatus] = useState<Status>('idle');
|
|
const [editValue, setEditValue] = useState('');
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const savingRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (status === 'editing' && inputRef.current) {
|
|
inputRef.current.focus();
|
|
inputRef.current.select();
|
|
}
|
|
}, [status]);
|
|
|
|
const startEditing = () => {
|
|
if (disabled) return;
|
|
setEditValue(String(value));
|
|
setStatus('editing');
|
|
};
|
|
|
|
const cancel = () => {
|
|
setStatus('idle');
|
|
};
|
|
|
|
const save = async () => {
|
|
if (savingRef.current) return;
|
|
|
|
const parsed = Number(editValue);
|
|
if (isNaN(parsed)) {
|
|
setStatus('idle');
|
|
return;
|
|
}
|
|
if (parsed === value) {
|
|
setStatus('idle');
|
|
return;
|
|
}
|
|
|
|
savingRef.current = true;
|
|
setStatus('saving');
|
|
try {
|
|
await onSave(parsed);
|
|
setStatus('success');
|
|
setTimeout(() => setStatus('idle'), 1500);
|
|
} catch {
|
|
setStatus('error');
|
|
setTimeout(() => setStatus('idle'), 1500);
|
|
} finally {
|
|
savingRef.current = false;
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
save();
|
|
} else if (e.key === 'Escape') {
|
|
cancel();
|
|
}
|
|
};
|
|
|
|
if (status === 'editing' || status === 'saving') {
|
|
return (
|
|
<input
|
|
ref={inputRef}
|
|
type="number"
|
|
value={editValue}
|
|
onChange={(e) => setEditValue(e.target.value)}
|
|
onBlur={save}
|
|
onKeyDown={handleKeyDown}
|
|
min={min}
|
|
step={step}
|
|
disabled={status === 'saving'}
|
|
className={`w-24 rounded border border-blue-300 bg-white px-2 py-0.5 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-blue-500 ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span
|
|
onClick={startEditing}
|
|
className={`inline-flex items-center gap-1 ${
|
|
disabled
|
|
? 'cursor-default text-gray-400'
|
|
: 'cursor-pointer rounded px-1 py-0.5 hover:bg-blue-50 hover:text-blue-700'
|
|
} ${className}`}
|
|
>
|
|
{formatDisplay(value)}
|
|
{status === 'success' && <span className="text-green-600">✓</span>}
|
|
{status === 'error' && <span className="text-red-600">✗</span>}
|
|
</span>
|
|
);
|
|
}
|