Spaces:
Sleeping
Sleeping
File size: 3,418 Bytes
f871fed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | 'use client'
import { useState, useRef, useEffect, type RefObject } from 'react'
import { cn } from '@/lib/utils'
interface InlineEditProps {
value: string
onSave: (value: string) => void | Promise<void>
className?: string
inputClassName?: string
placeholder?: string
multiline?: boolean
emptyText?: string
}
export function InlineEdit({
value,
onSave,
className,
inputClassName,
placeholder,
multiline = false,
emptyText = 'Click to edit'
}: InlineEditProps) {
const [isEditing, setIsEditing] = useState(false)
const [editValue, setEditValue] = useState(value)
const [isSaving, setIsSaving] = useState(false)
const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus()
inputRef.current.select()
}
}, [isEditing])
useEffect(() => {
setEditValue(value)
}, [value])
const handleSave = async () => {
if (editValue.trim() === value.trim()) {
setIsEditing(false)
return
}
setIsSaving(true)
try {
await onSave(editValue.trim())
setIsEditing(false)
} catch {
// Reset on error
setEditValue(value)
} finally {
setIsSaving(false)
}
}
const handleCancel = () => {
setEditValue(value)
setIsEditing(false)
}
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !multiline) {
e.preventDefault()
handleSave()
} else if (e.key === 'Escape') {
e.preventDefault()
handleCancel()
}
}
if (!isEditing) {
return (
<button
type="button"
className={cn(
"cursor-pointer hover:bg-muted/50 rounded px-2 py-1 -mx-2 -my-1 transition-colors text-left w-full",
className
)}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
setIsEditing(true)
}}
>
{value || <span className="text-muted-foreground">{emptyText}</span>}
</button>
)
}
if (multiline) {
return (
<textarea
ref={inputRef as RefObject<HTMLTextAreaElement>}
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => {
if (!isSaving && editValue.trim() !== value.trim()) {
handleSave()
} else if (editValue.trim() === value.trim()) {
setIsEditing(false)
}
}}
className={cn(
"px-2 py-1 bg-background border rounded focus:outline-none focus:ring-2 focus:ring-primary w-full",
"min-h-[60px] resize-none",
inputClassName
)}
placeholder={placeholder}
disabled={isSaving}
/>
)
}
return (
<input
ref={inputRef as RefObject<HTMLInputElement>}
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={handleKeyDown}
onBlur={() => {
if (!isSaving && editValue.trim() !== value.trim()) {
handleSave()
} else if (editValue.trim() === value.trim()) {
setIsEditing(false)
}
}}
className={cn(
"px-2 py-1 bg-background border rounded focus:outline-none focus:ring-2 focus:ring-primary w-full",
inputClassName
)}
placeholder={placeholder}
disabled={isSaving}
/>
)
}
|