mini-programs/src/components/EditModal/index.tsx

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;
  invalidCharacters: string;
  onSave: (value: string) => void;
  onCancel: () => void;
  validationMessage?: string;
}

const EditModal: React.FC<EditModalProps> = ({
  visible,
  title,
  type,
  placeholder,
  initialValue,
  maxLength,
  invalidCharacters = "",
  onSave,
  onCancel,
  validationMessage,
}) => {
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);
  const [isIllegal, setIsIllegal] = useState(false);

  // 使用全局键盘状态
  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);
      const valid =
        initialValue.length >= 2 && initialValue.length <= maxLength;
      setIsValid(valid);
    }
  }, [visible, initialValue]);

  const createExcludeRegex = (chars: string) => {
    // 转义正则表达式特殊字符
    const escapedChars = chars.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

    // 构建负向字符类正则表达式
    // ^[^...]*$ 匹配不包含任何指定字符的完整字符串
    const pattern = `[${escapedChars}]`;

    return new RegExp(pattern);
  };
  const handle_input_change = (e: any) => {
    const new_value = e.detail.value;
    setValue(new_value);

    const illegal =
      /\b(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER|CREATE|EXEC|DECLARE)\b|('|--|\/\*|\*\/|;|#)|(=|'|"|`|\\|\|\|&&)|\bOR\s+['"]?[\w]+['"]?\s*=\s*['"]?[\w]+['"]?|\bUNION\s+SELECT\b|\bDROP\s+TABLE\b|\bINSERT\s+INTO\b|\bUPDATE\s+[\w]+\s+SET\b|\bDELETE\s+FROM\b/i.test(
        new_value
      );
    setIsIllegal(illegal);
    // 验证输入
    const valid =
      new_value.length >= 2 &&
      new_value.length <= maxLength &&
      !createExcludeRegex(invalidCharacters).test(new_value);
    setIsValid(valid);
  };

  const handle_save = () => {
    if (!isValid) {
      Taro.showToast({
        title: validationMessage || `请填写 2-${maxLength} 个字符`,
        icon: "none",
        duration: 2000,
      });
      return;
    }
    if (isIllegal) {
      Taro.showToast({
        title: "输入的字符非法",
        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}
                />
                <View className="char_count">
                  <Text
                    className={`count_text ${
                      value.length > maxLength && "un-valid"
                    }`}
                  >
                    {value.length}/{maxLength}
                  </Text>
                </View>
              </>
            ) : (
              <>
                <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 && "un-valid"
                    }`}
                  >
                    {value.length}/{maxLength}
                  </Text>
                </View>
              </>
            )}
          </View>

          {/* 验证提示 */}
          {isIllegal ? (
            <View className="validation_message">
              <Text className="validation_text illegal">输入的字符非法</Text>
            </View>
          ) : (
            !isValid && (
              <View className="validation_message">
                <Text className="validation_text">
                  {validationMessage || `请填写 2-${maxLength} 个字符`}
                </Text>
              </View>
            )
          )}
        </View>

        {/* 底部按钮 */}
        <View className="modal_footer">
          <View
            className={`save_button ${!isValid || isIllegal ? "disabled" : ""}`}
            onClick={handle_save}
          >
            <Text className="save_text">保存</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default EditModal;