65 lines
1.5 KiB
JavaScript
65 lines
1.5 KiB
JavaScript
import React, { useLayoutEffect, useRef } from "react";
|
|
|
|
const EditElement = (props) => {
|
|
const {
|
|
className,
|
|
handleEditValue,
|
|
value,
|
|
setShowInputEle,
|
|
showInputEle,
|
|
handleFocus,
|
|
handleBlur,
|
|
i,
|
|
} = props;
|
|
const MIN_TEXTAREA_HEIGHT = 32;
|
|
const textareaRef = useRef(null);
|
|
|
|
useLayoutEffect(() => {
|
|
// Reset height to shrink on delete
|
|
textareaRef.current.style.height = "inherit";
|
|
// Set height
|
|
textareaRef.current.style.height = `${Math.max(
|
|
textareaRef.current.scrollHeight,
|
|
MIN_TEXTAREA_HEIGHT
|
|
)}px`;
|
|
}, [value]);
|
|
|
|
return (
|
|
<div>
|
|
{showInputEle ? (
|
|
<div
|
|
style={{ width: "100%" }}
|
|
onBlur={(e) => handleBlur(e, i)}
|
|
tabIndex="0"
|
|
></div>
|
|
) : (
|
|
<div
|
|
style={{ width: "100%" }}
|
|
onClick={() => handleFocus("plain-div onCLick, i", i)}
|
|
onBlur={(e) => handleBlur(e, i)}
|
|
className="outer-div"
|
|
tabIndex="0"
|
|
>
|
|
<textarea
|
|
ref={textareaRef}
|
|
name={"text-box"}
|
|
type="text"
|
|
style={{
|
|
minHeight: MIN_TEXTAREA_HEIGHT,
|
|
resize: "none",
|
|
color: "#4e4e4e",
|
|
letterSpacing: ".02rem",
|
|
}}
|
|
value={value}
|
|
className="edit-ele-input"
|
|
onChange={(e) => handleEditValue(e, i)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditElement;
|