nshop-front-m/src/components/theme/ui/PasswordInput.tsx

"use client";

import React, {useState} from "react";
import clsx from "clsx";
type InputType = 'text' | 'password';
function PasswordInput({
    placeholder,
    onChange,
    onBlur,
    name,
    error,
    ref
}: {
    // 用于react-hook-form时，推荐使用useForm的 defaultValues 对整个表单设置默认值
    placeholder: string;
    // 用于react-hook-form时，React 事件处理器类型定义中的“双变（bivariance）”特性 和返回值void的兼容性，使typescript没有提示类型错误
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => void;
    name: string;
    error?: string;
    ref?: React.Ref<HTMLInputElement>;
}) {
    const [inputType, setInputType] = useState<InputType>('password');
    const changeType = () => {
        if(inputType === 'text') {
            setInputType('password');
        }
         if(inputType === 'password') {
            setInputType('text');
        }
    };
    return (
        <div className="w-full">
            <div className="relative w-full">
                <input className="ly-input w-full" 
                    type={inputType}
                    placeholder={placeholder}
                    onChange={onChange}
                    onBlur={onBlur}
                    name={name}
                    ref={ref}
                />
                
                <div className="absolute top-1/2 right-3 -translate-y-1/2 w-4 h-4" onClick={changeType}>
                    <svg className={clsx("block w-full h-full icon-eyehide",{
                        "hidden": inputType !== 'password'
                    })} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path fill="none" stroke="#000000" strokeWidth="1.5" strokeLinecap="round" d="M3.28587 6C2.07945 7 1.33325 8 1.33325 8C1.33325 8 4.31802 12 7.99992 12C8.45655 12 8.90245 11.9385 9.33325 11.8307M6.67719 4.16667C7.10472 4.06053 7.54705 4 7.99992 4C11.6818 4 14.6666 8 14.6666 8C14.6666 8 13.9204 9 12.714 10">
                        </path>
                        <path fill="none" stroke="#000000" strokeWidth="1.3333333333333333" strokeLinejoin="round" strokeLinecap="round" d="M6.77132 6.87372C6.49929 7.17032 6.33325 7.56575 6.33325 7.99995C6.33325 8.92042 7.07945 9.66662 7.99992 9.66662C8.45415 9.66662 8.86595 9.48489 9.16658 9.19018">
                        </path>
                        <path fill="none"  stroke="#000000"strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" d="M14 14L2 2">
                        </path>
                    </svg> 
                    <svg className={clsx("block w-full h-full icon-eyeshow",{
                        "hidden": inputType !== 'text'
                    })} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path stroke="#000000" d="M7.99992 12C11.6818 12 14.6666 8 14.6666 8C14.6666 8 11.6818 4 7.99992 4C4.31802 4 1.33325 8 1.33325 8C1.33325 8 4.31802 12 7.99992 12Z" fill="none" strokeWidth="1.5">
                        </path>
                        <path stroke="#000000" d="M7.99992 9.66665C8.92039 9.66665 9.66658 8.92045 9.66658 7.99998C9.66658 7.07951 8.92039 6.33331 7.99992 6.33331C7.07945 6.33331 6.33325 7.07951 6.33325 7.99998C6.33325 8.92045 7.07945 9.66665 7.99992 9.66665Z" fill="none" strokeWidth="1.5" strokeLinejoin="round">
                        </path>
                    </svg>
                </div>

            </div>
            
            {error && <p className="text-red-500 text-ly-12">{error}</p>}
        </div> 
    );
}
// 设置 displayName，便于调试
PasswordInput.displayName = 'PasswordInput';

export default PasswordInput;