You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.3 KiB
47 lines
1.3 KiB
import React, { SyntheticEvent, useCallback, useState } from 'react';
|
|
import IconButton from 'Components/Link/IconButton';
|
|
import { icons } from 'Helpers/Props';
|
|
import translate from 'Utilities/String/translate';
|
|
import TextInput from './TextInput';
|
|
import styles from './PrivacyTextInput.css';
|
|
|
|
interface PrivacyTextInputProps {
|
|
className: string;
|
|
}
|
|
|
|
function PrivacyTextInput(props: PrivacyTextInputProps) {
|
|
const { className = styles.input, ...otherProps } = props;
|
|
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
const toggleVisibility = useCallback(() => {
|
|
setIsVisible(!isVisible);
|
|
}, [isVisible, setIsVisible]);
|
|
|
|
// Prevent a user from copying (or cutting) the password from the input
|
|
const onCopy = useCallback((event: SyntheticEvent) => {
|
|
event.preventDefault();
|
|
event.nativeEvent.stopImmediatePropagation();
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<TextInput
|
|
className={className}
|
|
{...otherProps}
|
|
onCopy={onCopy}
|
|
type={isVisible ? 'text' : 'password'}
|
|
/>
|
|
|
|
<IconButton
|
|
className={styles.toggle}
|
|
name={isVisible ? icons.VIEW : icons.HIDE}
|
|
title={translate('Toggle')}
|
|
onPress={toggleVisibility}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PrivacyTextInput;
|