Start adding IPAField component for suggesting IPA chars

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;

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>
+    );
+  }
+}

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>

src/sass/_styles.scss

@@ -26,4 +26,13 @@
       @extend .modal-background;
     }
   }
-}
+}
+
+.ipa-suggest {
+  @extend .box;
+  position: absolute;
+  background-color: #FFFFFF;
+  border: 1px solid #CCCCFF;
+  font-size: 90%;
+  width: 200px;
+}