add the eye button to show/hide mnemonic

pull/691/head
Audric Ackermann 6 years ago
parent 47101c85f7
commit 1da1da80e9

@ -126,6 +126,10 @@
} }
} }
&-input-floating-label-show-hide {
padding-right: 20px;
}
&-input-with-label-container { &-input-with-label-container {
height: 46.5px; height: 46.5px;
width: 280px; width: 280px;
@ -170,7 +174,7 @@
bottom: 0px; bottom: 0px;
} }
button { .session-icon-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
interface Props { interface Props {
label: string; label: string;
@ -21,6 +22,9 @@ export class SessionInput extends React.PureComponent<Props, State> {
super(props); super(props);
this.updateInputValue = this.updateInputValue.bind(this); this.updateInputValue = this.updateInputValue.bind(this);
this.renderEnableShowHideButton = this.renderEnableShowHideButton.bind(
this
);
this.state = { this.state = {
inputValue: '', inputValue: '',
@ -54,20 +58,35 @@ export class SessionInput extends React.PureComponent<Props, State> {
onChange={e => { onChange={e => {
this.updateInputValue(e); this.updateInputValue(e);
}} }}
className={classNames(
enableShowHide ? 'session-input-floating-label-show-hide' : ''
)}
/> />
<button
{this.renderEnableShowHideButton(enableShowHide)}
<hr />
</div>
);
}
private renderEnableShowHideButton(enableShowHide: boolean | undefined) {
if (enableShowHide) {
return (
<SessionIconButton
iconType={SessionIconType.Eye}
iconSize={SessionIconSize.Small}
iconPadded={false}
onClick={() => { onClick={() => {
this.setState({ this.setState({
forceShow: !this.state.forceShow, forceShow: !this.state.forceShow,
}); });
}} }}
className={classNames(enableShowHide ? '' : 'hidden')} />
> );
SHOW }
</button>
<hr /> return undefined;
</div>
);
} }
private updateInputValue(e: any) { private updateInputValue(e: any) {

Loading…
Cancel
Save