add the eye button to show/hide mnemonic

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

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

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

Loading…
Cancel
Save