From 49e7788a596435f882587095c5db3a169b36fedd Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Mon, 21 Aug 2017 14:38:25 -0600
Subject: [PATCH] Update Phonotactics fields to multiline entries

---
 .../EditLinguisticsForm.jsx                   | 96 ++++++++++++-------
 .../management/EditDictionaryModal/index.jsx  | 18 ++--
 2 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx b/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
index 73abce8..c0c8c02 100644
--- a/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
+++ b/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
@@ -95,42 +95,72 @@ export const EditLinguisticsForm = ({
       <div className='columns'>
 
         <div className='column'>
-          <IPAField label='Onset' id='editOnset'
-            helpText='Separate phonemes/groups with a space'
-            placeholder='consonants blends'
-            value={ onset }
-            onInput={ (newValue) => {
-              editDictionaryModal.setState({
-                onset: newValue,
-                hasChanged: newValue != editDictionaryModal.props.details.phonology.phonotactics.onset.join(' '),
-              });
-            }} />
+          <div className='field'>
+            <label className='label' htmlFor='editOnset'>
+              Onset
+            </label>
+            <p className='help'>
+              Put each phoneme or group on a separate line
+            </p>
+            <div className='control'>
+              <textarea className='textarea' id='editOnset'
+                placeholder={ `none\nconsonant blends\n...` }
+                value={ onset }
+                onInput={ (event) => {
+                  editDictionaryModal.setState({
+                    onset: event.target.value,
+                    hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.onset.join('\n'),
+                  });
+                }}
+              />
+            </div>
+          </div>
         </div>
 
         <div className='column'>
-          <IPAField label='Nucleus' id='editNucleus'
-            helpText='Separate phonemes/groups with a space'
-            placeholder='vowels'
-            value={ nucleus }
-            onInput={ (newValue) => {
-              editDictionaryModal.setState({
-                nucleus: newValue,
-                hasChanged: newValue != editDictionaryModal.props.details.phonology.phonotactics.nucleus.join(' '),
-              });
-            }} />
+        <div className='field'>
+            <label className='label' htmlFor='editNucleus'>
+              Nucleus
+            </label>
+            <p className='help'>
+              Put each phoneme or group on a separate line
+            </p>
+            <div className='control'>
+              <textarea className='textarea' id='editNucleus'
+                placeholder={ `vowels\nvowel blends\n...` }
+                value={ nucleus }
+                onInput={ (event) => {
+                  editDictionaryModal.setState({
+                    nucleus: event.target.value,
+                    hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.nucleus.join('\n'),
+                  });
+                }}
+              />
+            </div>
+          </div>
         </div>
 
         <div className='column'>
-          <IPAField label='Coda' id='editCoda'
-            helpText='Separate phonemes/groups with a space'
-            placeholder='any'
-            value={ coda }
-            onInput={ (newValue) => {
-              editDictionaryModal.setState({
-                coda: newValue,
-                hasChanged: newValue != editDictionaryModal.props.details.phonology.phonotactics.coda.join(' '),
-              });
-            }} />
+        <div className='field'>
+            <label className='label' htmlFor='editCoda'>
+              Coda
+            </label>
+            <p className='help'>
+              Put each phoneme or group on a separate line
+            </p>
+            <div className='control'>
+              <textarea className='textarea' id='editCoda'
+                placeholder={ `consonants\nconsonant blends\n...` }
+                value={ coda }
+                onInput={ (event) => {
+                  editDictionaryModal.setState({
+                    coda: event.target.value,
+                    hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.coda.join('\n'),
+                  });
+                }}
+              />
+            </div>
+          </div>
         </div>
 
       </div>
@@ -149,10 +179,10 @@ export const EditLinguisticsForm = ({
               <textarea className='textarea' id='editExceptions'
                 placeholder='Vowel blends are not allowed in the onset, and [e], including blends with [e] comprising it, is not allowed in the coda.'
                 value={ exceptions }
-                onInput={ (newValue) => {
+                onInput={ (event) => {
                   editDictionaryModal.setState({
-                    exceptions: newValue,
-                    hasChanged: newValue != editDictionaryModal.props.details.phonology.exceptions.join(' '),
+                    exceptions: event.target.value,
+                    hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.exceptions,
                   });
                 }}
               />
diff --git a/src/components/management/EditDictionaryModal/index.jsx b/src/components/management/EditDictionaryModal/index.jsx
index e3b94a9..9629fef 100644
--- a/src/components/management/EditDictionaryModal/index.jsx
+++ b/src/components/management/EditDictionaryModal/index.jsx
@@ -28,9 +28,9 @@ export class EditDictionaryModal extends Component {
       consonants: props.details.phonology.consonants.join(' '),
       vowels: props.details.phonology.vowels.join(' '),
       blends: props.details.phonology.blends.join(' '),
-      onset: props.details.phonology.phonotactics.onset.join(' '),
-      nucleus: props.details.phonology.phonotactics.nucleus.join(' '),
-      coda: props.details.phonology.phonotactics.coda.join(' '),
+      onset: props.details.phonology.phonotactics.onset.join('\n'),
+      nucleus: props.details.phonology.phonotactics.nucleus.join('\n'),
+      coda: props.details.phonology.phonotactics.coda.join('\n'),
       exceptions: props.details.phonology.phonotactics.exceptions,
 
       hasChanged: false,
@@ -154,20 +154,20 @@ export class EditDictionaryModal extends Component {
         .map((value) => { return value.trim() });
     }
 
-    if (this.state.onset !== this.props.details.phonology.phonotactics.onset.join(' ')) {
-      updatedDetails['onset'] = this.state.onset.split(' ')
+    if (this.state.onset !== this.props.details.phonology.phonotactics.onset.join('\n')) {
+      updatedDetails['onset'] = this.state.onset.split('\n')
         .filter((value) => { return value !== '' })
         .map((value) => { return value.trim() });
     }
 
-    if (this.state.nucleus !== this.props.details.phonology.phonotactics.nucleus.join(' ')) {
-      updatedDetails['nucleus'] = this.state.nucleus.split(' ')
+    if (this.state.nucleus !== this.props.details.phonology.phonotactics.nucleus.join('\n')) {
+      updatedDetails['nucleus'] = this.state.nucleus.split('\n')
         .filter((value) => { return value !== '' })
         .map((value) => { return value.trim() });
     }
 
-    if (this.state.coda !== this.props.details.phonology.phonotactics.coda.join(' ')) {
-      updatedDetails['coda'] = this.state.coda.split(' ')
+    if (this.state.coda !== this.props.details.phonology.phonotactics.coda.join('\n')) {
+      updatedDetails['coda'] = this.state.coda.split('\n')
         .filter((value) => { return value !== '' })
         .map((value) => { return value.trim() });
     }