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
642 B
JavaScript
23 lines
642 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 [isHidden, toggleHidden] = useToggle(true);
|
|
|
|
const handleToggleClick = useCallback(() => {
|
|
toggleHidden();
|
|
}, [toggleHidden]);
|
|
|
|
return (
|
|
<Input
|
|
{...props} // eslint-disable-line react/jsx-props-no-spreading
|
|
ref={ref}
|
|
type={isHidden ? 'password' : 'text'}
|
|
icon={<Icon link name={isHidden ? 'eye slash' : 'eye'} onClick={handleToggleClick} />}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export default React.memo(InputPassword);
|