141 lines
No EOL
3.8 KiB
TypeScript
141 lines
No EOL
3.8 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
|
|
interface EditableCellProps {
|
|
value: string;
|
|
onInput: (value: string) => void;
|
|
focusedCell: string | null;
|
|
setFocusedCell: (cellKey: string | null) => void;
|
|
cellKey: string;
|
|
inputType?: 'text' | 'textarea';
|
|
onFocus?: () => void;
|
|
onBlur?: () => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function EditableCell({
|
|
value,
|
|
onInput,
|
|
focusedCell,
|
|
setFocusedCell,
|
|
cellKey,
|
|
inputType = 'text',
|
|
onFocus,
|
|
onBlur,
|
|
placeholder = '',
|
|
className = ''
|
|
}: EditableCellProps) {
|
|
const [localValue, setLocalValue] = useState(value);
|
|
const [isExternalUpdate, setIsExternalUpdate] = useState(false);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
// Update local value when prop changes (including external updates)
|
|
useEffect(() => {
|
|
if (value !== localValue) {
|
|
setLocalValue(value);
|
|
setIsExternalUpdate(true);
|
|
}
|
|
}, [value, localValue]);
|
|
|
|
// Reset external update flag after a short delay
|
|
useEffect(() => {
|
|
if (isExternalUpdate) {
|
|
const timer = setTimeout(() => {
|
|
setIsExternalUpdate(false);
|
|
}, 100);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isExternalUpdate]);
|
|
|
|
// Handle focus when this cell becomes focused
|
|
useEffect(() => {
|
|
if (focusedCell === cellKey) {
|
|
const element = inputType === 'textarea' ? textareaRef.current : inputRef.current;
|
|
if (element) {
|
|
element.focus();
|
|
// Select all text when focusing, but not during external updates
|
|
if (!isExternalUpdate) {
|
|
element.select();
|
|
}
|
|
}
|
|
}
|
|
}, [focusedCell, cellKey, inputType, isExternalUpdate]);
|
|
|
|
const handleInput = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const newValue = e.target.value;
|
|
console.log('Input event:', newValue);
|
|
setLocalValue(newValue);
|
|
}, []);
|
|
|
|
const commitInput = useCallback(() => {
|
|
console.log('Committing input:', localValue);
|
|
onInput(localValue);
|
|
}, [localValue, onInput]);
|
|
|
|
const handleFocus = useCallback(() => {
|
|
console.log('Focus gained for key:', cellKey);
|
|
setFocusedCell(cellKey);
|
|
onFocus?.();
|
|
}, [cellKey, setFocusedCell, onFocus]);
|
|
|
|
const handleBlur = useCallback(() => {
|
|
console.log('Focus lost');
|
|
setFocusedCell(null);
|
|
commitInput();
|
|
onBlur?.();
|
|
}, [setFocusedCell, commitInput, onBlur]);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && inputType === 'text') {
|
|
// For text inputs, commit on Enter
|
|
e.preventDefault();
|
|
commitInput();
|
|
setFocusedCell(null);
|
|
} else if (e.key === 'Escape') {
|
|
// Reset to original value on Escape
|
|
setLocalValue(value);
|
|
setFocusedCell(null);
|
|
}
|
|
}, [inputType, commitInput, setFocusedCell, value]);
|
|
|
|
const baseClassName = `
|
|
w-full px-2 py-1 border-none outline-none resize-none
|
|
focus:ring-2 focus:ring-blue-500 focus:ring-inset
|
|
${className}
|
|
`.trim();
|
|
|
|
if (inputType === 'textarea') {
|
|
return (
|
|
<div className="editable-cell">
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={localValue}
|
|
onChange={handleInput}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder}
|
|
className={`${baseClassName} min-h-[2rem] max-h-32`}
|
|
rows={1}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="editable-cell">
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={localValue}
|
|
onChange={handleInput}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder}
|
|
className={baseClassName}
|
|
/>
|
|
</div>
|
|
);
|
|
} |