75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React, { useCallback, useState } from 'react'
|
|
import { View } from '@tarojs/components'
|
|
import { TextArea } from '@nutui/nutui-react-taro';
|
|
|
|
import './index.scss'
|
|
|
|
interface TitleTextareaProps {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
maxLength?: number
|
|
placeholder?: string
|
|
onFocus?: () => void
|
|
onBlur?: () => void
|
|
}
|
|
|
|
const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
|
value='',
|
|
onChange,
|
|
maxLength = 20,
|
|
placeholder = '好的标题更吸引人哦',
|
|
onFocus,
|
|
onBlur
|
|
}) => {
|
|
const isOverflow = value.length > maxLength
|
|
// const [isFocused, setIsFocused] = useState(false)
|
|
|
|
// const showPlaceholder = !isFocused && !value
|
|
|
|
const handleChange = useCallback((values) => {
|
|
// if (values.length > maxLength ) {
|
|
// const newValues = values.slice(0, maxLength)
|
|
// onChange(newValues)
|
|
// return;
|
|
// }
|
|
onChange(values)
|
|
}, [onChange])
|
|
|
|
const handleFocus = useCallback(() => {
|
|
// setIsFocused(true)
|
|
onFocus?.()
|
|
}, [onFocus])
|
|
|
|
const handleBlur = useCallback(() => {
|
|
// setIsFocused(false)
|
|
onBlur?.()
|
|
}, [onBlur])
|
|
|
|
return (
|
|
<View className='title-input-wrapper'>
|
|
<View className='title-input-box'>
|
|
<TextArea
|
|
className='title-input'
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onInput={(e) => handleChange(e.detail.value)}
|
|
// maxlength={maxLength}
|
|
placeholderClass='title-input-placeholder'
|
|
autoSize={true}
|
|
onFocus={handleFocus}
|
|
onBlur={handleBlur}
|
|
/>
|
|
{/* {showPlaceholder && (
|
|
<View className='title-input-placeholder-custom'>
|
|
{placeholder}
|
|
</View>
|
|
)} */}
|
|
</View>
|
|
<View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
|
|
{value.length}/{maxLength}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default TitleTextarea
|