63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { Textarea, View } from '@tarojs/components'
|
|
import { memo, useEffect, useMemo, useRef, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import styles from './index.module.scss'
|
|
import { usePropsValue } from '@/use/useCommon'
|
|
|
|
// 其他说明
|
|
interface Param {
|
|
title?: string
|
|
onChange?: (val: string) => void
|
|
placeholder?: string
|
|
defaultValue?: string
|
|
onlyRead?: boolean
|
|
maxLength?: number
|
|
customClassName?: string
|
|
customStyle?: React.CSSProperties
|
|
}
|
|
const TextareaEnhance = (props: Param) => {
|
|
const { onChange: _onChange, title = '', placeholder = '请输入', defaultValue, onlyRead = false, maxLength = 200, customStyle, customClassName } = props
|
|
const [number, setNumber] = useState(0)
|
|
const [show, setShow] = useState(false)
|
|
// 最大长度
|
|
const countRef = useRef(maxLength)
|
|
const [value, setValue] = usePropsValue({
|
|
value: defaultValue,
|
|
defaultValue: '',
|
|
onChange: (res) => {
|
|
_onChange?.(res)
|
|
},
|
|
})
|
|
const getDesc = (value = '') => {
|
|
let res = value
|
|
if (value.length > countRef.current) {
|
|
res = value.slice(0, countRef.current)
|
|
}
|
|
setNumber(res.length)
|
|
setValue(res)
|
|
// setDescData({ ...descData, number: res.length, value: res })
|
|
}
|
|
|
|
useEffect(() => {
|
|
getDesc(defaultValue)
|
|
}, [defaultValue])
|
|
|
|
const toggleShowRealTextarea = (show) => {
|
|
setShow(show)
|
|
// setDescData({ ...descData, show })
|
|
}
|
|
return (
|
|
<View className={styles.other_desc}>
|
|
<View className={styles.title}>{title}</View>
|
|
<View className={styles.textarea}>
|
|
{(show && !onlyRead)
|
|
? <Textarea autoFocus value={value} onBlur={() => toggleShowRealTextarea(false)} style={customStyle} className={classnames(styles.textarea_con, customClassName)} cursorSpacing={100} maxlength={countRef.current} onInput={e => getDesc(e.detail.value)}></Textarea>
|
|
: <View className={classnames(styles.textarea_con_pretend, value && styles.textarea_con_pretend_ed, customClassName)} style={customStyle} onClick={() => toggleShowRealTextarea(true)}>{value || placeholder}</View>
|
|
}
|
|
<View className={styles.descDataNum}>{`${number}/${countRef.current}`}</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
export default memo(TextareaEnhance)
|