hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-10 03:16:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: handle Textarea component ref warning in react 19 (#16818)

Browse Source
This commit is contained in:
Joel
2025-03-26 14:55:02 +08:00
committed by GitHub
parent c451f54925
commit 032d849f17
5 changed files with 75 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/app/components/base/chat/chat/chat-input-area/hooks.ts
View File

@@ -3,23 +3,22 @@ import {
useRef,
useState,
} from 'react'
import type { TextAreaRef } from 'rc-textarea'
export const useTextAreaHeight = () => {
const wrapperRef = useRef<HTMLDivElement>(null)
const textareaRef = useRef<TextAreaRef>(null)
const textareaRef = useRef<HTMLTextAreaElement | undefined>(undefined)
const textValueRef = useRef<HTMLDivElement>(null)
const holdSpaceRef = useRef<HTMLDivElement>(null)
const [isMultipleLine, setIsMultipleLine] = useState(false)
const handleComputeHeight = useCallback(() => {
const textareaElement = textareaRef.current?.resizableTextArea.textArea
const textareaElement = textareaRef.current
if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) {
const { width: wrapperWidth } = wrapperRef.current.getBoundingClientRect()
const { height: textareaHeight } = textareaElement.getBoundingClientRect()
const { width: textValueWidth } = textValueRef.current.getBoundingClientRect()
const { width: holdSpaceWidth } = holdSpaceRef.current.getBoundingClientRect()
if (textareaHeight > 32) {
setIsMultipleLine(true)
}

10
web/app/components/base/chat/chat/chat-input-area/index.tsx
View File

@@ -3,7 +3,7 @@ import {
useRef,
useState,
} from 'react'
import Textarea from 'rc-textarea'
import Textarea from 'react-textarea-autosize'
import { useTranslation } from 'react-i18next'
import Recorder from 'js-audio-recorder'
import type {
@@ -174,18 +174,18 @@ const ChatInputArea = ({
{query}
</div>
<Textarea
ref={textareaRef}
ref={ref => textareaRef.current = ref as any}
className={cn(
'body-lg-regular w-full bg-transparent p-1 leading-6 text-text-tertiary outline-none',
'body-lg-regular w-full resize-none bg-transparent p-1 leading-6 text-text-tertiary outline-none',
)}
placeholder={t('common.chat.inputPlaceholder') || ''}
autoFocus
autoSize={{ minRows: 1 }}
minRows={1}
onResize={handleTextareaResize}
value={query}
onChange={(e) => {
setQuery(e.target.value)
handleTextareaResize()
setTimeout(handleTextareaResize, 0)
}}
onKeyDown={handleKeyDown}
onPaste={handleClipboardPasteFile}