Added Edit Dictionary form and manipulation of dictionary settings plus Checkboxes to go with it! Also added the ability to disable input fields.

src/components/Checkbox.JSX

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Input} from './Input';
+
+import {Button} from './Button';
+
+export class Checkbox extends Input {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || false,
+      isDisabled: props.isDisabled || false
+    };
+  }
+  
+  // Whenever the input changes we update the value state of this component
+  handleOnChange(event) {
+    this.setState({
+      value: event.target.checked
+    });
+  }
+
+  render() {
+    return (
+      <label>
+        <span>
+          {this.props.name}
+          {this.showHelperLink()}
+        </span>
+        <input type="checkbox" onChange={this.handleOnChange} checked={(this.state.value) ? 'checked' : null} disabled={(this.state.isDisabled) ? 'disabled' : null} />
+      </label>
+    );
+  }
+}
+
+Checkbox.defaultProps = {
+  doValidate: false
+};

src/components/EditDictionaryForm.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {Input} from './Input';
+import {TextArea} from './TextArea';
+import {Checkbox} from './Checkbox';
+import {Button} from './Button';
+import {FixedPage} from './FixedPage';
+
+export class EditDictionaryForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // Declare local variables as null until mounted.
+    this.nameField = null;
+    this.descriptionField = null;
+    this.partsOfSpeechField = null;
+    this.allowDuplicatesField = null;
+    this.caseSensitiveField = null;
+    this.sortByEquivalentField = null;
+    this.isCompleteField = null;
+    this.isPublicField = null;
+  }
+
+  saveOnClose() {
+    this.props.saveChanges({
+      name: this.nameField.state.value,
+      description: this.descriptionField.state.value,
+      partsOfSpeech: this.partsOfSpeechField.state.value,
+      allowDuplicates: this.allowDuplicatesField.state.value,
+      caseSensitive: this.caseSensitiveField.state.value,
+      sortByEquivalent: this.sortByEquivalentField.state.value,
+      isComplete: this.isCompleteField.state.value,
+      isPublic: this.isPublicField.state.value
+    });
+  }
+
+  render() {
+    return (
+      <FixedPage buttonClasses='right' buttonText='Edit Dictionary' onHide={() => this.saveOnClose()}>
+        
+        <h2>Edit Dictionary</h2>
+
+        <div className='settings-column'>
+
+          <Input name='Dictionary Name'
+            value={this.props.details.name}
+            ref={(inputComponent) => this.nameField = inputComponent} />
+
+          <TextArea name='Dictionary Details'
+            value={this.props.details.description}
+            ref={(inputComponent) => this.descriptionField = inputComponent} />
+
+          <Input name='Parts of Speech'
+            value={this.props.settings.partsOfSpeech}
+            ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
+
+          <Checkbox name='Allow Duplicates'
+            value={this.props.settings.allowDuplicates}
+            ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
+
+          <Checkbox name='Case-Sensitive'
+            value={this.props.settings.caseSensitive}
+            ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
+
+          <Checkbox name='Sort by Definition'
+            value={this.props.settings.sortByEquivalent}
+            ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
+
+          <Checkbox name='Dictionary Is Complete'
+            value={this.props.settings.isComplete}
+            ref={(inputComponent) => this.isCompleteField = inputComponent} />
+
+          <Checkbox name='Dictionary Is Public'
+            value={this.props.settings.isPublic}
+            ref={(inputComponent) => this.isPublicField = inputComponent} />
+
+        </div>
+
+      </FixedPage>
+    );
+  }
+}

src/components/FixedPage.jsx

@@ -10,6 +10,7 @@ export class FixedPage extends React.Component {
       display: false
     };
 
+    this.show = this.show.bind(this);
     this.hide = this.hide.bind(this);
   }
 
@@ -41,7 +42,7 @@ export class FixedPage extends React.Component {
     } else {
       return (
         <Button classes={this.props.buttonClasses}
-          action={() => this.show()}
+          action={this.show}
           label={this.props.buttonText} />
       );
     }
@@ -54,6 +55,10 @@ export class FixedPage extends React.Component {
   }
 
   hide() {
+    if (this.props.onHide) {
+      this.props.onHide();
+    }
+
     this.setState({
       display: false
     });

src/components/Input.jsx

@@ -13,7 +13,8 @@ export class Input extends React.Component {
     // };
 
     this.state = {
-      value: props.value || ''
+      value: props.value || '',
+      isDisabled: props.isDisabled || false
     };
 
     // Bind listeners
@@ -49,6 +50,12 @@ export class Input extends React.Component {
     this.setState({value: ''});
   }
 
+  toggleFieldEnabled() {
+    this.setState({
+      isDisabled: !this.state.isDisabled
+    })
+  }
+
   render() {
     return (
       <label>
@@ -56,7 +63,7 @@ export class Input extends React.Component {
           {this.props.name}
           {this.showHelperLink()}
         </span>
-        <input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
+        <input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} disabled={(this.state.isDisabled) ? 'disabled' : null} value={this.state.value} />
       </label>
     );
   }

src/components/TextArea.jsx

@@ -41,7 +41,7 @@ export class TextArea extends Input {
 
         </span>
 
-        <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
+        <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} disabled={(this.state.isDisabled) ? 'disabled' : null} value={this.state.value} />
 
       </label>
     );

src/index.jsx

@@ -8,7 +8,7 @@ import {Header} from './components/Header';
 import {Footer} from './components/Footer';
 import {WordForm} from './components/WordForm';
 import {Button} from './components/Button';
-import {FixedPage} from './components/FixedPage';
+import {EditDictionaryForm} from './components/EditDictionaryForm';
 import {Dictionary} from './components/Dictionary';
 
 import {dynamicSort} from './js/helpers';
@@ -52,15 +52,26 @@ class Lexiconga extends React.Component {
     this.previousDictionary = {};
   }
 
-  changeDictionaryName() {
-    // To change elements within the dictionary object, you can set it to
-    // a variable, manipulate the variable, then use setState() to set
-    // the object equal to the changed variable.
-    let updateDictionary = this.state.currentDictionary;
-    updateDictionary.name = 'something else'
+  saveChanges(changesObject) {
+    let updatedDetails = this.state.details;
+    let updatedSettings = this.state.settings;
+
+    updatedDetails.name = changesObject.name;
+    updatedDetails.description = changesObject.description;
+
+    updatedSettings.partsOfSpeech = changesObject.partsOfSpeech;
+    updatedSettings.allowDuplicates = changesObject.allowDuplicates;
+    updatedSettings.caseSensitive = changesObject.caseSensitive;
+    updatedSettings.sortByEquivalent = changesObject.sortByEquivalent;
+    updatedSettings.isComplete = changesObject.isComplete;
+    updatedSettings.isPublic = changesObject.isPublic;
+
     this.setState({
-      currentDictionary: updateDictionary
-    })
+      details: updatedDetails,
+      settings: updatedSettings
+    }, () => {
+      this.saveLocalDictionary();
+    });
   }
 
   sortWords(array) {
@@ -230,9 +241,10 @@ class Lexiconga extends React.Component {
             action={() => this.loadLocalDictionary()}
             label='Load Dictionary' />
 
-          <FixedPage buttonClasses='right' buttonText='Edit Dictionary'>
-
-          </FixedPage>
+          <EditDictionaryForm
+            details={this.state.details}
+            settings={this.state.settings}
+            saveChanges={(changesObject) => this.saveChanges(changesObject)} />
 
           <Dictionary
             details={this.state.details}

src/sass/_styles.scss

@@ -90,6 +90,7 @@ td:last-child, th:last-child {
 }
 
 .column {
+    display: block;
     float: left;
     margin: $column-margin;
 }
@@ -469,11 +470,8 @@ searchTerm {
     width: 50%;
 }
 
-.settingsCol {
-    display: block;
-    float: left;
-    width: 30%;
-    min-width: 260px;
-    max-width: 400px;
-    margin: 0 30px 0 0;
+.settings-column {
+    @extend .left-column;
+
+    margin-right: $column-margin * 2;
 }