30 lines
892 B
TypeScript
30 lines
892 B
TypeScript
import { useState } from "react";
|
|
import type { InputHTMLAttributes, MouseEvent, ReactElement } from "react";
|
|
import { IconEye, IconEyeClose } from "~assets/icons";
|
|
|
|
type InputHiddenProps = Partial<InputHTMLAttributes<HTMLInputElement>> & {
|
|
suffix?: ReactElement
|
|
}
|
|
|
|
function InputHidden(props: InputHiddenProps) {
|
|
const [type, setType] = useState<"text" | "password">("password");
|
|
|
|
const onSwitchType = (ev: MouseEvent) => {
|
|
ev.preventDefault();
|
|
|
|
setType(type === "text" ? "password" : "text");
|
|
}
|
|
|
|
return (
|
|
<div className="input-group">
|
|
<input type={type} placeholder="隐藏信息" {...props} />
|
|
{props.suffix && props.suffix}
|
|
<button className="btn primary" onClick={onSwitchType} title={type === "text" ? "隐藏" : "显示"}>
|
|
{type === "text" ? <IconEyeClose /> : <IconEye />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InputHidden;
|