phrase refactoring

src/ts/component/form/phrase.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import { getRange, setRange } from 'selection-ranges';
 import { Icon } from 'Component';
-import { keyboard, translate, Storage } from 'Lib';
+import { keyboard, Storage } from 'Lib';
 import { popupStore } from 'Store';
 import Constant from 'json/constant.json';
 
@@ -12,6 +12,7 @@ interface Props {
 	readonly?: boolean;
 	isHidden?: boolean;
 	checkPin?: boolean;
+	placeholder?: string;
 	onKeyDown?: (e: React.KeyboardEvent) => void;
 	onChange?: (phrase: string) => void;
 	onToggle?: (isHidden: boolean) => void;
@@ -49,8 +50,8 @@ class Phrase extends React.Component<Props, State> {
 	};
 
 	node = null;
-	placeholder = null;
-	entry = null;
+	refEntry = null;
+	refPlaceholder = null;
 	range = null;
 
 	constructor (props: Props) {
@@ -67,7 +68,7 @@ class Phrase extends React.Component<Props, State> {
 	};
 
 	render () {
-		const { readonly, className, onCopy } = this.props;
+		const { readonly, className, onCopy, placeholder } = this.props;
 		const { isHidden, hasError, phrase } = this.state;
 		const cn = [ 'phraseWrapper', className ];
 
@@ -90,6 +91,19 @@ class Phrase extends React.Component<Props, State> {
 			return <span className={[ 'word', cn ].join(' ')} key={index}>{word}</span>;
 		};
 
+		let placeholderEl = null;
+		if (placeholder) {
+			placeholderEl = (
+				<div 
+					ref={ref => this.refPlaceholder = ref} 
+					id="placeholder"
+					className="placeholder"
+				>
+					{placeholder}
+				</div>
+			);
+		};
+
 		return (
 			<div 
 				ref={ref => this.node = ref}
@@ -100,7 +114,8 @@ class Phrase extends React.Component<Props, State> {
 					{!phrase.length ? <span className="word" /> : ''}
 					{phrase.map(renderWord)}
 					<span 
-						id="entry" 
+						ref={ref => this.refEntry = ref}
+						id="entry"
 						contentEditable={true}
 						suppressContentEditableWarning={true} 
 						onKeyDown={this.onKeyDown}
@@ -114,7 +129,7 @@ class Phrase extends React.Component<Props, State> {
 					</span>
 				</div>
 
-				<div id="placeholder" className="placeholder">{translate('phrasePlaceholder')}</div>
+				{placeholderEl}
 				<Icon className={isHidden ? 'see' : 'hide'} onClick={this.onToggle} />
 				<Icon className="copy" onClick={onCopy} />
 			</div>
@@ -124,24 +139,15 @@ class Phrase extends React.Component<Props, State> {
 	componentDidMount () {
 		const { value, isHidden } = this.props;
 
-		this.init();
 		this.setState({ isHidden });
 		this.setValue(value);
 		this.focus();
 	};
 
 	componentDidUpdate () {
-		this.init();
 		this.placeholderCheck();
 	};
 
-	init () {
-		const node = $(this.node);
-
-		this.placeholder = node.find('#placeholder');
-		this.entry = node.find('#entry');
-	};
-
 	onClick (e: any) {
 		this.focus();
 
@@ -152,13 +158,14 @@ class Phrase extends React.Component<Props, State> {
 
 	onKeyDown (e: React.KeyboardEvent) {
 		const { onKeyDown } = this.props;
+		const entry = $(this.refEntry);
 
 		keyboard.shortcut('space, enter', e, () => e.preventDefault());
 
 		keyboard.shortcut('backspace', e, () => {
 			e.stopPropagation();
 
-			const range = getRange(this.entry.get(0));
+			const range = getRange(entry.get(0));
 			if (range.start || range.end) {
 				return;
 			};
@@ -253,16 +260,18 @@ class Phrase extends React.Component<Props, State> {
 	};
 
 	focus () {
-		this.entry.trigger('focus');
-		setRange(this.entry.get(0), this.range || { start: 0, end: 0 });
+		const entry = $(this.refEntry);
+
+		entry.trigger('focus');
+		setRange(entry.get(0), this.range || { start: 0, end: 0 });
 	};
 
 	clear () {
-		this.entry.text('');
+		$(this.refEntry).text('');
 	};
 
 	getEntryValue () {
-		return this.normalizeWhiteSpace(this.entry.text()).toLowerCase();
+		return this.normalizeWhiteSpace($(this.refEntry).text()).toLowerCase();
 	};
 
 	normalizeWhiteSpace = (val: string) => {
@@ -285,11 +294,11 @@ class Phrase extends React.Component<Props, State> {
 	};
 
 	placeholderHide () {
-		this.placeholder.hide();
+		$(this.refPlaceholder).hide();
 	};
 
 	placeholderShow () {
-		this.placeholder.show();
+		$(this.refPlaceholder).show();
 	};
 
 };

src/ts/component/page/auth/login.tsx

@@ -35,7 +35,6 @@ const PageAuthLogin = observer(class PageAuthLogin extends React.Component<I.Pag
 
 	render () {
 		const { error } = this.state;
-		const { config } = commonStore;
 		const { accounts } = authStore;
 		const length = accounts.length;
 
@@ -54,6 +53,7 @@ const PageAuthLogin = observer(class PageAuthLogin extends React.Component<I.Pag
 								onChange={this.onChange} 
 								onKeyDown={this.onKeyDownPhrase}
 								isHidden={true} 
+								placeholder={translate('phrasePlaceholder')}
 							/>
 						</div>
 						<div className="buttons">