71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { translateRaw } from 'translations';
|
|
import './Word.scss';
|
|
|
|
interface Props {
|
|
index: number;
|
|
word: string;
|
|
value: string;
|
|
isReadOnly: boolean;
|
|
onChange(index: number, value: string): void;
|
|
}
|
|
|
|
interface State {
|
|
isShowingWord: boolean;
|
|
}
|
|
|
|
export default class MnemonicWord extends React.Component<Props, State> {
|
|
public state = {
|
|
isShowingWord: false
|
|
};
|
|
|
|
public render() {
|
|
const { index, word, value, isReadOnly } = this.props;
|
|
const { isShowingWord } = this.state;
|
|
const readOnly = isReadOnly || isShowingWord;
|
|
|
|
return (
|
|
<div className="MnemonicWord">
|
|
<span className="MnemonicWord-number">{index + 1}.</span>
|
|
<div className="MnemonicWord-word input-group">
|
|
<input
|
|
className={classnames(
|
|
'MnemonicWord-word-input',
|
|
'form-control',
|
|
word === value && 'is-valid'
|
|
)}
|
|
value={readOnly ? word : value}
|
|
onChange={this.handleChange}
|
|
readOnly={readOnly}
|
|
/>
|
|
{!isReadOnly && (
|
|
<span
|
|
onClick={this.toggleShow}
|
|
aria-label={translateRaw('GEN_Aria_2')}
|
|
role="button"
|
|
className="MnemonicWord-word-toggle input-group-addon"
|
|
>
|
|
<i
|
|
className={classnames(
|
|
'fa',
|
|
isShowingWord && 'fa-eye-slash',
|
|
!isShowingWord && 'fa-eye'
|
|
)}
|
|
/>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleChange = (ev: React.FormEvent<HTMLInputElement>) => {
|
|
this.props.onChange(this.props.index, ev.currentTarget.value);
|
|
};
|
|
|
|
private toggleShow = () => {
|
|
this.setState({ isShowingWord: !this.state.isShowingWord });
|
|
};
|
|
}
|