156 lines
4.2 KiB
TypeScript
156 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, Textarea, Input, Picker } from '@tarojs/components';
|
|
import Taro from '@tarojs/taro';
|
|
import './EditModal.scss';
|
|
import { useKeyboardHeight } from '@/store/keyboardStore'
|
|
|
|
interface EditModalProps {
|
|
visible: boolean;
|
|
title: string;
|
|
type: string;
|
|
placeholder: string;
|
|
initialValue: string;
|
|
maxLength: number;
|
|
onSave: (value: string) => void;
|
|
onCancel: () => void;
|
|
validationMessage?: string;
|
|
}
|
|
|
|
const EditModal: React.FC<EditModalProps> = ({
|
|
visible,
|
|
title,
|
|
type,
|
|
placeholder,
|
|
initialValue,
|
|
maxLength,
|
|
onSave,
|
|
onCancel,
|
|
validationMessage
|
|
}) => {
|
|
const [value, setValue] = useState(initialValue);
|
|
const [isValid, setIsValid] = useState(true);
|
|
|
|
// 使用全局键盘状态
|
|
const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
|
|
// 使用全局键盘状态监听
|
|
useEffect(() => {
|
|
// 初始化全局键盘监听器
|
|
initializeKeyboardListener()
|
|
|
|
// 添加本地监听器
|
|
const removeListener = addListener((height, visible) => {
|
|
console.log('AiImportPopup 收到键盘变化:', height, visible)
|
|
})
|
|
|
|
return () => {
|
|
removeListener()
|
|
}
|
|
}, [initializeKeyboardListener, addListener])
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setValue(initialValue);
|
|
}
|
|
}, [visible, initialValue]);
|
|
|
|
const handle_input_change = (e: any) => {
|
|
const new_value = e.detail.value;
|
|
setValue(new_value);
|
|
|
|
// 验证输入
|
|
const valid = new_value.length >= 2 && new_value.length <= maxLength;
|
|
setIsValid(valid);
|
|
};
|
|
|
|
const handle_save = () => {
|
|
if (!isValid) {
|
|
Taro.showToast({
|
|
title: validationMessage || `请填写 2-${maxLength} 个字符`,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
onSave(value);
|
|
};
|
|
|
|
const handle_cancel = () => {
|
|
setValue(initialValue);
|
|
onCancel();
|
|
};
|
|
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View className="edit_modal_overlay">
|
|
<View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
|
|
{/* 标题栏 */}
|
|
<View className="modal_header">
|
|
<Text className="modal_title">{title}</Text>
|
|
<View className="close_button" onClick={handle_cancel}>
|
|
<View className="close_icon">
|
|
<View className="close_line"></View>
|
|
<View className="close_line"></View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 内容区域 */}
|
|
<View className="modal_content">
|
|
{/* 文本输入区域 */}
|
|
<View className="input_container">
|
|
|
|
{type === 'nickname' ? (
|
|
<Input
|
|
className="text_input nickname_input"
|
|
value={value}
|
|
type="nickname"
|
|
placeholder={placeholder}
|
|
maxlength={maxLength}
|
|
onInput={handle_input_change}
|
|
adjustPosition={false}
|
|
confirmType="done"
|
|
autoFocus={true}
|
|
/>
|
|
) : (
|
|
<>
|
|
<Textarea
|
|
className="text_input"
|
|
value={value}
|
|
placeholder={placeholder}
|
|
maxlength={maxLength}
|
|
onInput={handle_input_change}
|
|
autoFocus={true}
|
|
adjustPosition={false}
|
|
/>
|
|
<View className="char_count">
|
|
<Text className="count_text">{value.length}/{maxLength}</Text>
|
|
</View>
|
|
</>
|
|
)}
|
|
</View>
|
|
|
|
{/* 验证提示 */}
|
|
{!isValid && (
|
|
<View className="validation_message">
|
|
<Text className="validation_text">
|
|
{validationMessage || `请填写 2-${maxLength} 个字符`}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* 底部按钮 */}
|
|
<View className="modal_footer">
|
|
<View className="save_button" onClick={handle_save}>
|
|
<Text className="save_text">保存</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EditModal; |