49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
|
|
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from "react"
|
|
import Popup from "@/components/popup";
|
|
import { Button, Image, Text, Textarea, View } from "@tarojs/components"
|
|
import "./ModifyModal.scss"
|
|
|
|
interface Params{
|
|
title?: string,
|
|
save: (value: any)=>void, // 确定保存
|
|
}
|
|
export default memo(forwardRef((props:any,ref)=>{
|
|
const {title="修改昵称"} = props;
|
|
const [value, setValue] = useState("");
|
|
useEffect(()=>{
|
|
setValue(props.value);
|
|
},[props.value])
|
|
// popup输入长度
|
|
const handleTextareaInput = (ev:any)=>{
|
|
setValue(ev.detail.value.slice(0,20));
|
|
}
|
|
// 重置
|
|
const handleTextareaReset = ()=>{
|
|
setValue("");
|
|
}
|
|
const [textareaBottom, setTextareaBottom] = useState(0);
|
|
const handleBlur = ()=>{
|
|
setTextareaBottom(0);
|
|
}
|
|
const handleFocus = (ev)=>{
|
|
setTextareaBottom(ev.detail.height);
|
|
}
|
|
const [modalShow,setModalShow] = useState(false);
|
|
useImperativeHandle(ref, ()=>({setModalShow}))
|
|
return (
|
|
<Popup onClose={()=>setModalShow(false)} title={title} show={modalShow}>
|
|
<View style={{marginBottom: `${textareaBottom}px`}} className="modify-ickname-content">
|
|
<View className="modify-ickname-input">
|
|
<Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20}/>
|
|
<Text>{value?.length}/20</Text>
|
|
</View>
|
|
<Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
|
|
<View className="modify-ickname-operation">
|
|
<Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
|
|
<Button onClick={()=>props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
|
|
</View>
|
|
</View>
|
|
</Popup>
|
|
)
|
|
})) |