55 lines
1.5 KiB
TypeScript
55 lines
1.5 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 { updateField } from "app/lib/update"
|
||
|
|
import { TableInputContainer } from "./inputContainer"
|
||
|
|
|
||
|
|
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() {
|
||
|
|
if (value === initialValue) {
|
||
|
|
setIsActive(false)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
updateField({
|
||
|
|
id,
|
||
|
|
table,
|
||
|
|
text: value,
|
||
|
|
column,
|
||
|
|
pathname
|
||
|
|
})
|
||
|
|
initialValue = value
|
||
|
|
setIsActive(false)
|
||
|
|
}
|
||
|
|
function handleExit() {
|
||
|
|
setValue(initialValue)
|
||
|
|
setIsActive(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TableInputContainer isActive={isActive} setIsActive={setIsActive}>
|
||
|
|
{isActive ?
|
||
|
|
<Input
|
||
|
|
value={value}
|
||
|
|
onChange={e => setValue(e.target.value)} // onBlur={handleClose}
|
||
|
|
autoFocus={true}
|
||
|
|
onBlur={handleExit}
|
||
|
|
onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
|
||
|
|
className="w-full"
|
||
|
|
/>
|
||
|
|
: <p>{value}</p>
|
||
|
|
}
|
||
|
|
</TableInputContainer>
|
||
|
|
)
|
||
|
|
}
|