From d1f23c62c251e3c82e98a84bee837400a0df83e4 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Sat, 22 Apr 2017 17:05:36 -0600
Subject: [PATCH] Start adding IPAField component for suggesting IPA chars

---
 src/Helper.js                          |  4 ++
 src/components/management/IPAField.jsx | 66 ++++++++++++++++++++++++++
 src/components/management/WordForm.jsx | 13 ++---
 src/sass/_styles.scss                  | 11 ++++-
 4 files changed, 83 insertions(+), 11 deletions(-)
 create mode 100644 src/components/management/IPAField.jsx

diff --git a/src/Helper.js b/src/Helper.js
index ff0496b..de99bb6 100644
--- a/src/Helper.js
+++ b/src/Helper.js
@@ -8,6 +8,10 @@ class Helper {
         return this.charAt(0).toUpperCase() + this.slice(1);
     }
   }
+
+  getLastLetter (string) {
+    return string.substr(string.length - 1, 1);
+  }
 }
 
 export default new Helper;
diff --git a/src/components/management/IPAField.jsx b/src/components/management/IPAField.jsx
new file mode 100644
index 0000000..01825b9
--- /dev/null
+++ b/src/components/management/IPAField.jsx
@@ -0,0 +1,66 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+import Helper from '../../Helper';
+
+export class IPAField extends Component {
+  constructor (props) {
+    super(props);
+
+    this.letterPossibilities = {
+      "a": ['aaa', 'wow']
+    }
+
+    this.state = {
+      value: ''
+    , isFocused: false
+    , shouldDisplay: false
+    }
+  }
+
+  checkDisplay () {
+    const lastLetter = Helper.getLastLetter(this.state.value).toLowerCase();
+    const letterHasSuggestions = this.letterPossibilities.hasOwnProperty(lastLetter);
+
+    this.setState({
+      shouldDisplay: this.state.isFocused && letterHasSuggestions
+    });
+  }
+
+  listSuggestions () {
+    if (this.state.shouldDisplay) {
+      return (
+        <div className='ipa-suggest' >
+          {this.letterPossibilities[this.props.lastTypedLetter].map(letter => {
+            return (
+              <a className='button is-small is-link'
+                onClick={() => this.props.replaceCharacter(letter)}>
+                {letter}
+              </a>
+            );
+          })}
+        </div>
+      );
+    }
+  }
+
+  render () {
+    return (
+      <div className='field'>
+        <label className='label'>Pronunciation</label>
+        <p className='control'>
+          <input className='input' type='text' placeholder='[prəˌnʌnsiˈeɪʃən]'
+            value={this.state.wordPronunciation}
+            onFocus={() => this.setState({ isFocused: true })}
+            onBlur={() => this.setState({ isFocused: false })}
+            onInput={event => {
+              this.setState({ value: event.target.value }, this.checkDisplay);
+            }}
+            onChange={() => this.props.onChange(this.state.value)} />
+
+          {this.listSuggestions()}
+        </p>
+      </div>
+    );
+  }
+}
diff --git a/src/components/management/WordForm.jsx b/src/components/management/WordForm.jsx
index 65e3cb3..02b3d52 100644
--- a/src/components/management/WordForm.jsx
+++ b/src/components/management/WordForm.jsx
@@ -1,6 +1,7 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
+import {IPAField} from './IPAField';
 import {Word} from '../../managers/Word';
 
 export class WordForm extends Component {
@@ -97,16 +98,8 @@ export class WordForm extends Component {
           </p>
         </div>
 
-        <div className='field'>
-          <label className='label'>Pronunciation</label>
-          <p className='control'>
-            <input className='input' type='text' placeholder='[prəˌnʌnsiˈeɪʃən]'
-              value={this.state.wordPronunciation}
-              onChange={(event) => {
-                this.setState({ wordPronunciation: event.target.value });
-              }} />
-          </p>
-        </div>
+        <IPAField
+          onChange={newValue => this.setState({ wordPronunciation: newValue })} />
 
         <div className='field'>
           <label className='label'>Part of Speech</label>
diff --git a/src/sass/_styles.scss b/src/sass/_styles.scss
index e07f7b9..b03de79 100644
--- a/src/sass/_styles.scss
+++ b/src/sass/_styles.scss
@@ -26,4 +26,13 @@
       @extend .modal-background;
     }
   }
-}
\ No newline at end of file
+}
+
+.ipa-suggest {
+  @extend .box;
+  position: absolute;
+  background-color: #FFFFFF;
+  border: 1px solid #CCCCFF;
+  font-size: 90%;
+  width: 200px;
+}