You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
23 lines
644 B
JavaScript
23 lines
644 B
JavaScript
import React, { useCallback } from 'react';
|
|
import { Icon, Input } from 'semantic-ui-react';
|
|
import { useToggle } from '../../../hooks';
|
|
|
|
const InputPassword = React.forwardRef((props, ref) => {
|
|
const [isVisible, toggleVisible] = useToggle();
|
|
|
|
const handleToggleClick = useCallback(() => {
|
|
toggleVisible();
|
|
}, [toggleVisible]);
|
|
|
|
return (
|
|
<Input
|
|
{...props} // eslint-disable-line react/jsx-props-no-spreading
|
|
ref={ref}
|
|
type={isVisible ? 'text' : 'password'}
|
|
icon={<Icon link name={isVisible ? 'eye' : 'eye slash'} onClick={handleToggleClick} />}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export default React.memo(InputPassword);
|