61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { Cell, CellContext, Table } from "@tanstack/react-table"
|
|
import { useState, useEffect } from "react"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Check, CircleX } from "lucide-react"
|
|
import { updateTextField } from "app/lib/update"
|
|
|
|
export const TextInputCell = (props: CellContext<any, any>) => {
|
|
let initialValue = props.getValue()
|
|
const [value, setValue] = useState(initialValue)
|
|
const [isActive, setIsActive] = useState(false)
|
|
|
|
const table = props.table.options.meta.tableName
|
|
const id = props.row.original.id
|
|
const column = props.column.id
|
|
const pathname = props.table.options.meta.pathname
|
|
|
|
function handleConfirm() {
|
|
updateTextField({
|
|
id,
|
|
table,
|
|
text: value,
|
|
column,
|
|
pathname
|
|
})
|
|
initialValue = value
|
|
handleClose()
|
|
}
|
|
function handleClose() {
|
|
setValue(initialValue)
|
|
setIsActive(false)
|
|
}
|
|
function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
|
|
if (event.code === "Enter") {
|
|
handleConfirm()
|
|
}
|
|
}
|
|
|
|
|
|
return (<div
|
|
onDoubleClick={() => setIsActive(prev => !prev)}
|
|
className="w-full h-fit flex items-center justify-center"
|
|
>
|
|
{isActive ?
|
|
<div className="flex flex-col">
|
|
<Input
|
|
value={value}
|
|
onChange={e => setValue(e.target.value)} // onBlur={handleClose}
|
|
autoFocus={true}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<div className="flex flex-row justify-end gap-1 w-full pt-2">
|
|
<Button variant="outline" className="p-2 h-fit" onClick={handleConfirm}><Check size="1rem" /></Button>
|
|
<Button variant="outline" className="p-2 h-fit" onClick={handleClose}><CircleX size="1rem" /></Button>
|
|
</div>
|
|
</div>
|
|
: <p>{value}</p>
|
|
}
|
|
</div>)
|
|
}
|