42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { classNames } from '../button';
|
||
|
|
|
||
|
|
export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
|
||
|
|
const [editing, setEditing] = useState(false);
|
||
|
|
const [value, setValue] = useState(initialValue);
|
||
|
|
|
||
|
|
const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>
|
||
|
|
|
||
|
|
const onConfirm = () => {
|
||
|
|
onChange(value);
|
||
|
|
setEditing(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
const onCancel = () => {
|
||
|
|
setValue(initialValue);
|
||
|
|
setEditing(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderForm() {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-row">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
className="px-2 py-0 h-5 max-w-48"
|
||
|
|
onChange={(e) => setValue(e.target.value)}
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
<>
|
||
|
|
<CheckIcon color='green' className="h-5 w-5 mx-2" onClick={onConfirm} />
|
||
|
|
<XMarkIcon color='red' className="h-5 w-5 mx-2" onClick={onCancel} />
|
||
|
|
</>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
editing ? (renderForm()) : (renderText())
|
||
|
|
);
|
||
|
|
}
|