tianji/src/client/components/EditableText.tsx

39 lines
994 B
TypeScript
Raw Normal View History

2024-01-07 14:42:55 +00:00
import { Input } from 'antd';
import clsx from 'clsx';
import React, { useState } from 'react';
import { useWatch } from '../hooks/useWatch';
interface EditableTextProps {
className?: string;
enable?: boolean;
defaultValue: string;
onSave: (text: string) => void;
}
export const EditableText: React.FC<EditableTextProps> = React.memo((props) => {
const [text, setText] = useState(props.defaultValue);
const enable = props.enable ?? true;
useWatch([props.defaultValue], () => {
setText(props.defaultValue);
});
return (
<>
{enable ? (
<Input
className={clsx(
props.className,
2024-03-22 16:45:21 +00:00
'rounded-none border-0 p-0 !shadow-none outline-0'
2024-01-07 14:42:55 +00:00
)}
value={text}
onChange={(e) => setText(e.target.value)}
onBlur={(e) => props.onSave(e.target.value)}
/>
) : (
<span className={props.className}>{text}</span>
)}
</>
);
});
EditableText.displayName = 'EditableText';