Expand IPAField customization options

src/components/management/IPAField.jsx

@@ -109,24 +109,44 @@ export class IPAField extends Component {
       this.setState({ value: val }, () => {
         this.field.focus();
         this.field.setSelectionRange(pos, pos);
+
+        if (this.props.onInput) {
+          this.props.onInput(this.state.value);
+        }
       });
     }
   }
 
+  onChange () {
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  }
+
   render () {
     return (
       <div className='field'>
-        <label className='label'>Pronunciation</label>
+        <label className='label' htmlFor={ this.props.id || null }>
-        <p className='control'>
+          { this.props.label || 'Pronunciation' }
-          <input className='input' type='text'
+        </label>
-            placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
+        {
+          this.props.helpText
+          && (
+            <p className='help'>
+              { this.props.helpText }
+            </p>
+          )
+        }
+        <div className='control'>
+          <input className='input' id={ this.props.id || null } type='text'
+            placeholder={ this.props.placeholder || '[prə.ˌnʌn.si.ˈeɪ.ʃən]' }
             disabled={ !!this.props.isDisplayOnly }
             ref={ (input) => this.field = input }
             value={ this.state.value }
             onInput={ (event) => this.onInput(event) }
             onKeyDown={ (event) => this.onInput(event) }
-            onChange={ () => this.props.onChange(this.state.value) } />
+            onChange={ () => this.onChange() } />
-        </p>
+        </div>
         { this.showButtons() }
       </div>
     );