// Either self contained, or controlled component for having a password field // with a toggle to turn it into a visible text field. // Pass `isVisible` and `handleToggleVisibility` to control the visibility // yourself, otherwise all visibiility changes are managed in internal state. import React from 'react'; import './TogglablePassword.scss'; import { Input, TextArea } from 'components/ui'; interface Props { // Shared props className?: string; value: string; placeholder?: string; name?: string; disabled?: boolean; ariaLabel?: string; toggleAriaLabel?: string; isValid?: boolean; isVisible?: boolean; validity?: 'valid' | 'invalid' | 'semivalid'; // Textarea-only props isTextareaWhenVisible?: boolean; rows?: number; onEnter?(): void; // Shared callbacks onChange?(ev: React.FormEvent): void; onFocus?(ev: React.FocusEvent): void; onBlur?(ev: React.FocusEvent): void; handleToggleVisibility?(): void; } interface State { isVisible: boolean; } export default class TogglablePassword extends React.PureComponent { public state: State = { isVisible: !!this.props.isVisible }; public componentWillReceiveProps(nextProps: Props) { if (this.props.isVisible !== nextProps.isVisible) { this.setState({ isVisible: !!nextProps.isVisible }); } } public render() { const { className, value, placeholder, name, disabled, ariaLabel, toggleAriaLabel, validity, isTextareaWhenVisible, isValid, onChange, onFocus, onBlur, handleToggleVisibility } = this.props; const { isVisible } = this.state; const validClass = validity ? `is-${validity}` : isValid === null || isValid === undefined ? '' : isValid ? 'is-valid' : 'is-invalid'; return (
{isTextareaWhenVisible && isVisible ? (