blob: ca2a52ef979e11a5d7cbe4fce68c5cb95e43eabf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import { forwardRef, useEffect, useState } from "react";
function autoGrow(field, initialValue = null) {
let fieldHeight = initialValue ?? field.style.height;
if (field.scrollHeight > field.clientHeight) {
fieldHeight = field.scrollHeight + "px";
}
return fieldHeight;
}
function isSetHeightNeeded(e) {
const key = e.key;
const isBackspace = key === "Backspace";
const isDelete = key === "Delete";
const isCtrlZ = e.ctrlKey && e.key === "z";
const isCut = e.ctrlKey && e.key === "x";
return isBackspace || isDelete || isCtrlZ || isCut;
}
function TextArea(
{ value, name, onBlurHandler, onChangeHandler, additionalClasses },
ref
) {
const [fieldHeight, setFieldHeight] = useState();
const classNames = additionalClasses
? `form__textarea ${additionalClasses}`
: "form__textarea";
useEffect(() => {
ref && setFieldHeight(autoGrow(ref.current));
}, [ref]);
return (
<textarea
ref={ref}
className={classNames}
name={name}
value={value}
onChange={(e) => {
onChangeHandler(e);
setFieldHeight(autoGrow(e.target));
}}
onKeyDown={(e) => {
if (isSetHeightNeeded(e)) setFieldHeight(autoGrow(e.target, "auto"));
}}
onBlur={onBlurHandler}
style={{ height: fieldHeight }}
/>
);
}
export default forwardRef(TextArea);
|
