35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
|
|
interface TextValueFIllProps {
|
|
value: string | number;
|
|
multiLine: boolean;
|
|
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
|
}
|
|
|
|
const TextValueFIll: React.FC<TextValueFIllProps> = ({ value = "", multiLine, handlePropertyChange }) => {
|
|
const [textValue, setTextValue] = useState<string | number>(value);
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<label htmlFor="textValue">Value</label>
|
|
{multiLine ?
|
|
<textarea
|
|
onBlur={() => handlePropertyChange("value", textValue)}
|
|
id="textValue"
|
|
value={textValue}
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
|
onChange={e => setTextValue(e.target.value)}
|
|
></textarea>
|
|
: <input
|
|
onBlur={() => handlePropertyChange("value", textValue)}
|
|
id="textValue"
|
|
value={textValue}
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
|
onChange={e => setTextValue(e.target.value)}
|
|
/>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TextValueFIll |