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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| import { useEffect, useRef } from 'react'
| import cn from '@/utils/classnames'
| import { sleep } from '@/utils'
|
| type IProps = {
| placeholder?: string
| value: string
| onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
| className?: string
| wrapperClassName?: string
| minHeight?: number
| maxHeight?: number
| autoFocus?: boolean
| controlFocus?: number
| onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
| onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
| }
|
| const AutoHeightTextarea = (
| {
| ref: outerRef,
| value,
| onChange,
| placeholder,
| className,
| wrapperClassName,
| minHeight = 36,
| maxHeight = 96,
| autoFocus,
| controlFocus,
| onKeyDown,
| onKeyUp,
| }: IProps & {
| ref: React.RefObject<unknown>;
| },
| ) => {
| // eslint-disable-next-line react-hooks/rules-of-hooks
| const ref = outerRef || useRef<HTMLTextAreaElement>(null)
|
| const doFocus = () => {
| if (ref.current) {
| ref.current.setSelectionRange(value.length, value.length)
| ref.current.focus()
| return true
| }
| return false
| }
|
| const focus = async () => {
| if (!doFocus()) {
| let hasFocus = false
| await sleep(100)
| hasFocus = doFocus()
| if (!hasFocus)
| focus()
| }
| }
|
| useEffect(() => {
| if (autoFocus)
| focus()
| }, [])
| useEffect(() => {
| if (controlFocus)
| focus()
| }, [controlFocus])
|
| return (
| (<div className={`relative ${wrapperClassName}`}>
| <div className={cn(className, 'invisible overflow-y-auto whitespace-pre-wrap break-all')} style={{
| minHeight,
| maxHeight,
| paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
| }}>
| {!value ? placeholder : value.replace(/\n$/, '\n ')}
| </div>
| <textarea
| ref={ref}
| autoFocus={autoFocus}
| className={cn(className, 'absolute inset-0 resize-none overflow-auto')}
| style={{
| paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
| }}
| placeholder={placeholder}
| onChange={onChange}
| onKeyDown={onKeyDown}
| onKeyUp={onKeyUp}
| value={value}
| />
| </div>)
| )
| }
|
| AutoHeightTextarea.displayName = 'AutoHeightTextarea'
|
| export default AutoHeightTextarea
|
|
