parent
3df33e1a86
commit
a1564da303
@ -0,0 +1,17 @@
|
|||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
composes: input from '~Components/Form/TextInput.css';
|
||||||
|
|
||||||
|
padding: 6px 30px 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -25px;
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
@ -0,0 +1,9 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'container': string;
|
||||||
|
'input': string;
|
||||||
|
'toggle': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
@ -0,0 +1,46 @@
|
|||||||
|
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;
|
Loading…
Reference in new issue