🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/textareaEnhance/index.module.scss

@@ -1,36 +1,36 @@
-.other_desc{
-    // padding: 0 20px;
+.other_desc {
+  box-sizing: border-box;
+  .title {
+    font-size: $font_size;
+    font-weight: 500;
+  }
+  .textarea {
+    position: relative;
+    height: 165.4px;
+    .descDataNum {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      font-size: 22px;
+      color: #ababab;
+    }
+  }
+  .textarea_con,
+  .textarea_con_pretend {
+    background-color: #f3f3f3;
+    border: 2px solid #e6e6e6;
+    border-radius: 10px;
+    width: 100%;
+    font-size: 25px;
+    height: 165.4px;
+    padding: 20px 20px 30px 20px;
     box-sizing: border-box;
-    .title{
-        font-size: $font_size;
-        font-weight: 700;
-    }
-    .textarea{
-        position: relative;
-        height: 165.4px;
-        .descDataNum{
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            font-size: 22px;
-            color: #ABABAB;
-        }
-    }
-    .textarea_con, .textarea_con_pretend{
-        background-color: #f3f3f3;
-        border: 2px solid #e6e6e6;
-        border-radius: 10px;
-        width: 100%;
-        font-size: 25px;
-        height: 165.4px;
-        padding: 20px 20px 30px 20px;
-        box-sizing: border-box;
-        margin-top: 20px;
-    }
-    .textarea_con_pretend{
-        color: $color_font_two;
-    }
-    .textarea_con_pretend_ed{
-        color: #000;
-    }
-}
+    margin-top: 20px;
+  }
+  .textarea_con_pretend {
+    color: $color_font_two;
+  }
+  .textarea_con_pretend_ed {
+    color: #000;
+  }
+}

src/components/textareaEnhance/index.tsx

@@ -1,7 +1,8 @@
 import { Textarea, View } from '@tarojs/components'
-import { memo, useEffect, useMemo, useState } from 'react'
+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 {
@@ -9,22 +10,32 @@ interface Param {
   onChange?: (val: string) => void
   placeholder?: string
   defaultValue?: string
-  onlyRead?: false|true
+  onlyRead?: boolean
+  maxLength?: number
+  customClassName?: string
+  customStyle?: React.CSSProperties
 }
-const TextareaEnhance = ({ onChange, title = '', placeholder = '请输入', defaultValue, onlyRead = false }: Param) => {
-  const [descData, setDescData] = useState({
-    number: 0,
-    value: '',
-    count: 200,
-    show: false,
+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 > descData.count) {
-      res = value.slice(0, descData.count)
+    if (value.length > countRef.current) {
+      res = value.slice(0, countRef.current)
     }
-    setDescData({ ...descData, number: res.length, value: res })
-    onChange?.(res)
+    setNumber(res.length)
+    setValue(res)
+    // setDescData({ ...descData, number: res.length, value: res })
   }
 
   useEffect(() => {
@@ -32,17 +43,18 @@ const TextareaEnhance = ({ onChange, title = '', placeholder = '请输入', defa
   }, [defaultValue])
 
   const toggleShowRealTextarea = (show) => {
-    setDescData({ ...descData, show })
+    setShow(show)
+    // setDescData({ ...descData, show })
   }
   return (
     <View className={styles.other_desc}>
       <View className={styles.title}>{title}</View>
       <View className={styles.textarea}>
-        {(descData.show && !onlyRead)
-          ? <Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={e => getDesc(e.detail.value)}></Textarea>
-          : <View className={classnames(styles.textarea_con_pretend, descData.value && styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value || placeholder}</View>
+        {(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}>{`${descData.number}/${descData.count}`}</View>
+        <View className={styles.descDataNum}>{`${number}/${countRef.current}`}</View>
       </View>
     </View>
   )