From 16193c1bf4974dde760a6cdeaf031e7eafbd23b4 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Tue, 15 Nov 2016 21:57:10 -0700
Subject: [PATCH] Added untested Dropdown for select fields. Added some more
 comments.

---
 src/components/Dropdown.jsx     | 53 +++++++++++++++++++++++++++++++++
 src/components/EditWordForm.jsx |  1 +
 src/components/FixedPage.jsx    |  2 ++
 src/components/Footer.jsx       |  1 +
 src/components/Header.jsx       |  1 +
 src/components/InfoDisplay.jsx  |  1 +
 6 files changed, 59 insertions(+)
 create mode 100644 src/components/Dropdown.jsx

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
new file mode 100644
index 0000000..17f77d3
--- /dev/null
+++ b/src/components/Dropdown.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {Input} from './Input';
+
+export class Dropdown extends Input {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || false
+    , isDisabled: props.isDisabled || false
+    };
+  }
+  
+  // Whenever the input changes, update the value state of this component
+  handleOnChange(event) {
+    this.setState({
+      value: event.target.checked
+    });
+  }
+
+  parseOptions (optionsString) {
+    let results = [];
+    let options = optionsString.split(',');
+
+    options.forEach((option) => {
+      results.push(
+        <option>
+          {option.trim()}
+        </option>
+      );
+    });
+
+    return results;
+  }
+
+  render() {
+    return (
+      <label>
+        <span>
+          {this.props.name}
+          {this.showHelperLink()}
+        </span>
+        <select onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
+          {this.parseOptions(this.props.optionsList)}
+        </select>
+      </label>
+    );
+  }
+}
+
+Dropdown.defaultProps = {
+  doValidate: false
+};
\ No newline at end of file
diff --git a/src/components/EditWordForm.jsx b/src/components/EditWordForm.jsx
index 3df80cb..ddeb1fd 100644
--- a/src/components/EditWordForm.jsx
+++ b/src/components/EditWordForm.jsx
@@ -5,6 +5,7 @@ import {TextArea} from './TextArea';
 
 import {WordForm} from './WordForm';
 
+// A component that allows you to edit a word
 export class EditWordForm extends React.Component {
   constructor(props) {
     super(props);
diff --git a/src/components/FixedPage.jsx b/src/components/FixedPage.jsx
index feff61b..b463b40 100644
--- a/src/components/FixedPage.jsx
+++ b/src/components/FixedPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Button} from './Button';
 
+// Creates a page that floats above other elements when a connected button is clicked.
 export class FixedPage extends React.Component {
   constructor(props) {
     super(props);
@@ -10,6 +11,7 @@ export class FixedPage extends React.Component {
       display: false
     };
 
+    // Bind each instance to its own show/hide watchers.
     this.show = this.show.bind(this);
     this.hide = this.hide.bind(this);
   }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 683a1c8..59d67a9 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,6 +3,7 @@ import marked from 'marked';
 
 import {FixedPage} from './FixedPage';
 
+// A component for the site footer
 export class Footer extends React.Component {
   constructor(props) {
     super(props);
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 351dd74..7f6984a 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -4,6 +4,7 @@ import marked from 'marked';
 import {Button} from './Button';
 import {FixedPage} from './FixedPage';
 
+// A component for the site header
 export class Header extends React.Component {
   constructor(props) {
     super(props);
diff --git a/src/components/InfoDisplay.jsx b/src/components/InfoDisplay.jsx
index 8f3ea87..28460bf 100644
--- a/src/components/InfoDisplay.jsx
+++ b/src/components/InfoDisplay.jsx
@@ -7,6 +7,7 @@ import {Button} from './Button';
 const saveIcon = <i>&#128190;</i>;
 const editIcon = <i>&#128393;</i>;
 
+// A component to show dictionary information in a tabbed interface.
 export class InfoDisplay extends React.Component {
   constructor(props) {
     super(props);