64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
|
|
interface InlineInputProps {
|
|
value: string
|
|
onSave: (val: string) => Promise<void>
|
|
className?: string
|
|
type?: 'text' | 'number'
|
|
}
|
|
|
|
export function InlineInput({ value, onSave, className, type = 'text' }: InlineInputProps) {
|
|
const [isEditing, setIsEditing] = useState(false)
|
|
const [currentValue, setCurrentValue] = useState(value)
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
|
|
useEffect(() => {
|
|
setCurrentValue(value)
|
|
}, [value])
|
|
|
|
useEffect(() => {
|
|
if (isEditing && inputRef.current) {
|
|
inputRef.current.focus()
|
|
}
|
|
}, [isEditing])
|
|
|
|
const handleBlur = async () => {
|
|
setIsEditing(false)
|
|
if (currentValue !== value) {
|
|
await onSave(currentValue)
|
|
}
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
handleBlur()
|
|
}
|
|
}
|
|
|
|
if (isEditing) {
|
|
return (
|
|
<input
|
|
ref={inputRef}
|
|
type={type}
|
|
step={type === 'number' ? '0.01' : undefined}
|
|
value={currentValue}
|
|
onChange={(e) => setCurrentValue(e.target.value)}
|
|
onBlur={handleBlur}
|
|
onKeyDown={handleKeyDown}
|
|
className={`bg-white/10 text-white border border-primary px-1 rounded outline-none w-full ${className}`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span
|
|
onClick={() => setIsEditing(true)}
|
|
className={`cursor-pointer hover:bg-white/5 rounded px-1 transition ${className}`}
|
|
>
|
|
{value || <span className="italic text-slate-500">Klicken zum Bearbeiten</span>}
|
|
</span>
|
|
)
|
|
}
|