54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { CellContext } from "@tanstack/react-table";
|
||
|
|
import { updateField } from "app/lib/update";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { TableInputContainer } from "./inputContainer";
|
||
|
|
|
||
|
|
|
||
|
|
export default function NumberInputCell(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,
|
||
|
|
number: Number(value),
|
||
|
|
column,
|
||
|
|
pathname
|
||
|
|
})
|
||
|
|
initialValue = value
|
||
|
|
setIsActive(false)
|
||
|
|
}
|
||
|
|
function handleExit() {
|
||
|
|
setValue(initialValue)
|
||
|
|
setIsActive(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TableInputContainer isActive={isActive} setIsActive={setIsActive}>
|
||
|
|
{isActive ?
|
||
|
|
<Input type="number"
|
||
|
|
onBlur={handleExit}
|
||
|
|
value={value}
|
||
|
|
autoFocus={true}
|
||
|
|
onChange={e => setValue(e.target.value)} // onBlur={handleClose}
|
||
|
|
onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
|
||
|
|
step={props.column.columnDef.meta.step}
|
||
|
|
/>
|
||
|
|
: <p>{value}</p>
|
||
|
|
}
|
||
|
|
</TableInputContainer>
|
||
|
|
)
|
||
|
|
}
|