| import clsx from 'clsx'; |
| import { useState } from 'react'; |
|
|
| import { useTableStore } from '@/store/tableStore'; |
|
|
| import { Input } from './ui/input'; |
| import { |
| Select, |
| SelectContent, |
| SelectItem, |
| SelectTrigger, |
| SelectValue, |
| } from './ui/select'; |
|
|
| interface TableCellInputProps { |
| tableId: string; |
| options?: string[]; |
| rowIndex: number; |
| columnId: string; |
| columnType: 'text' | 'number' | 'select'; |
| initialValue: string; |
| } |
|
|
| export default function TableCellInput({ |
| tableId, |
| options, |
| rowIndex, |
| columnId, |
| columnType, |
| initialValue, |
| }: TableCellInputProps) { |
| const { editCell } = useTableStore(); |
| const [value, setValue] = useState(initialValue); |
| const [isEditable, setIsEditable] = useState(false); |
|
|
| const finishEditing = () => { |
| editCell(tableId, rowIndex, columnId, value); |
| setIsEditable(false); |
| }; |
|
|
| const onKeyDown = ( |
| e: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement> |
| ) => { |
| if (e.key === 'Enter' || e.key === 'Escape') { |
| e.preventDefault(); |
| finishEditing(); |
| } |
| }; |
|
|
| const handleDoubleClick = ( |
| e: React.MouseEvent<HTMLInputElement | HTMLSelectElement> |
| ) => { |
| e.preventDefault(); |
| if (isEditable) return; |
| setIsEditable(true); |
| }; |
|
|
| const renderInput = () => { |
| switch (columnType) { |
| case 'number': |
| return ( |
| <Input |
| type="number" |
| value={value} |
| onBlur={finishEditing} |
| onChange={(e) => setValue(e.target.value)} |
| onKeyDown={onKeyDown} |
| readOnly={!isEditable} |
| className={clsx('border-none', { 'cursor-pointer': !isEditable })} |
| onDoubleClick={handleDoubleClick} |
| /> |
| ); |
| case 'select': |
| return ( |
| <Select |
| value={value} |
| onOpenChange={(open) => { |
| if (!open) { |
| finishEditing(); |
| } |
| }} |
| onValueChange={(newValue) => setValue(newValue)} |
| > |
| <SelectTrigger className="w-[180px]"> |
| <SelectValue placeholder="Select" /> |
| </SelectTrigger> |
| <SelectContent> |
| {options?.map((option) => ( |
| <SelectItem key={option} value={option}> |
| {option} |
| </SelectItem> |
| ))} |
| </SelectContent> |
| </Select> |
| ); |
| case 'text': |
| default: |
| return ( |
| <Input |
| value={value} |
| onBlur={finishEditing} |
| onChange={(e) => setValue(e.target.value)} |
| onKeyDown={onKeyDown} |
| readOnly={!isEditable} |
| className={clsx('border-none', { 'cursor-pointer': !isEditable })} |
| onDoubleClick={handleDoubleClick} |
| /> |
| ); |
| } |
| }; |
|
|
| return renderInput(); |
| } |
|
|
