From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/base/auto-height-textarea/index.tsx | 126 +++++++++++++++++++-----------------------
1 files changed, 57 insertions(+), 69 deletions(-)
diff --git a/app/components/base/auto-height-textarea/index.tsx b/app/components/base/auto-height-textarea/index.tsx
index da412a1..f55db79 100644
--- a/app/components/base/auto-height-textarea/index.tsx
+++ b/app/components/base/auto-height-textarea/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
import cn from '@/utils/classnames'
import { sleep } from '@/utils'
@@ -16,80 +16,68 @@
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 AutoHeightTextarea = forwardRef(
+ (
+ { value, onChange, placeholder, className, wrapperClassName, minHeight = 36, maxHeight = 96, autoFocus, controlFocus, onKeyDown, onKeyUp }: IProps,
+ outerRef: any,
+ ) => {
+ // 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
+ const doFocus = () => {
+ if (ref.current) {
+ ref.current.setSelectionRange(value.length, value.length)
+ ref.current.focus()
+ return true
+ }
+ return false
}
- return false
- }
- const focus = async () => {
- if (!doFocus()) {
- let hasFocus = false
- await sleep(100)
- hasFocus = doFocus()
- if (!hasFocus)
+ 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])
- 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={{
+ return (
+ <div className={`relative ${wrapperClassName}`}>
+ <div className={cn(className, 'invisible whitespace-pre-wrap break-all overflow-y-auto')} style={{
+ minHeight,
+ maxHeight,
paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
- }}
- placeholder={placeholder}
- onChange={onChange}
- onKeyDown={onKeyDown}
- onKeyUp={onKeyUp}
- value={value}
- />
- </div>)
- )
-}
+ }}>
+ {!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'
--
Gitblit v1.8.0