Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 2x 2x 2x 2x 2x 7x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 5x 5x 5x 5x 5x 6x 3x 6x 2x | import React, { useEffect } from "react";
import Input from "../Input/Input";
import { IconEye, IconEyeClosed } from "@tabler/icons-react";
import { PasswordProps } from "./Password.types";
import Text from "../Text/Text";
const Password: React.FC<PasswordProps> = ({
label,
placeholder,
value,
onChange,
size,
variant,
hasError,
errorMessage,
className,
style,
color,
"data-testid": dataTestId,
"data-testid-eye-icon": dataTestIdEyeIcon,
...props
}) => {
const [showPassword, setShowPassword] = React.useState(false);
const inputRef = React.useRef<HTMLInputElement>(null);
useEffect(() => {
// if (!inputRef.current) return;
const inputElement = inputRef.current!;
const selectionEnd = inputElement.value.length;
const scrollTop = inputElement.scrollTop;
inputElement.setSelectionRange(selectionEnd, selectionEnd);
inputElement.scrollTop = scrollTop;
}, [showPassword, inputRef]);
const _onIconEyeClick = () => {
setShowPassword((togglePassword) => !togglePassword);
};
return (
<div
data-testid={dataTestId}
className={className}
style={style}
{...props}
>
<Input
color={color}
ref={inputRef}
type={showPassword ? "text" : "password"}
label={label}
placeholder={placeholder}
value={value}
variant={variant}
size={size}
trailingIcon={
<div data-testid={dataTestIdEyeIcon} onClick={_onIconEyeClick}>
{showPassword ? (
<IconEye />
) : (
<IconEyeClosed />
)}
</div>
}
onChange={onChange}
/>
{hasError && <Text color={color} size="small" style={{marginTop:"0.25rem"}}>{errorMessage}</Text>}
</div>
);
};
export default Password;
|