password-input.react.js
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

password-input.react.js
View Options

	// @flow

	import * as React from 'react';

	import SWMansionIcon, {
	type Icon,
	} from 'lib/components/SWMansionIcon.react.js';

	import css from './password-input.css';
	import Button from '../components/button.react.js';
	import Input, { type BaseInputProps } from '../modals/input.react.js';

	type PasswordInputProps = BaseInputProps;

	function PasswordInput(props: PasswordInputProps, ref): React.Node {
	const [htmlInputType, setHtmlInputType] = React.useState<'password' \| 'text'>(
	'password',
	);

	const onToggleShowPassword = React.useCallback(() => {
	setHtmlInputType(oldType => (oldType === 'password' ? 'text' : 'password'));
	}, []);

	const icon: Icon = htmlInputType === 'password' ? 'eye-open' : 'eye-closed';

	return (
	<div className={css.wrapper}>
	<Input
	className={css.input}
	{...props}
	placeholder="Password"
	type={htmlInputType}
	ref={ref}
	/>
	<Button className={css.button} onClick={onToggleShowPassword}>
	<SWMansionIcon size={24} icon={icon} />
	</Button>
	</div>
	);
	}

	const ForwardedPasswordInput: React.AbstractComponent<
	PasswordInputProps,
	HTMLInputElement,
	> = React.forwardRef<PasswordInputProps, HTMLInputElement>(PasswordInput);

	export default ForwardedPasswordInput;