From 3d849b45cb45be2e2e163417c35263fd0d07d638 Mon Sep 17 00:00:00 2001
From: ncrmro <ncrmro@gmail.com>
Date: Tue, 5 Dec 2017 08:13:24 -0600
Subject: [PATCH 1/2] Add select field component

---
 src/SelectField/Option.js      |  9 +++++
 src/SelectField/SelectField.js | 60 ++++++++++++++++++++++++++++++++++
 src/SelectField/index.js       |  2 ++
 3 files changed, 71 insertions(+)
 create mode 100644 src/SelectField/Option.js
 create mode 100644 src/SelectField/SelectField.js
 create mode 100644 src/SelectField/index.js

diff --git a/src/SelectField/Option.js b/src/SelectField/Option.js
new file mode 100644
index 0000000..2d26f3d
--- /dev/null
+++ b/src/SelectField/Option.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import MenuItem from '../Menu/MenuItem';
+
+const Option = props =>
+  <MenuItem className="mdc-list-item" >
+    {props.text}
+  </MenuItem>;
+
+export default Option;
\ No newline at end of file
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
new file mode 100644
index 0000000..046b88c
--- /dev/null
+++ b/src/SelectField/SelectField.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import MenuAnchor from '../Menu/MenuAnchor';
+import Menu from '../Menu/Menu';
+import PropTypes from 'prop-types';
+
+export default class SelectField extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      selected: 'Selected Text',
+    };
+  }
+
+  toggleOpen() {
+    this.setState({ open: !this.state.open });
+  }
+
+  getSelectedText() {
+    const selected = this.props.options.find(
+        x => x.id === this.state.selected
+    );
+    if (selected) {
+      return selected.text;
+    }
+    else return this.state.selected;
+  }
+
+  render() {
+    return <div
+        className='mdc-select'
+        onClick={this.toggleOpen.bind(this)}
+
+    >
+      <MenuAnchor >
+
+      <span
+          className="mdc-select__selected-text"
+      >
+        {this.state.selected}
+      </span>
+
+
+        <Menu
+            open={this.state.open}
+            onClose={this.toggleOpen.bind(this)}
+            style={{marginTop: '20px'}}
+
+
+        >
+          {this.props.children}
+        </Menu>
+      </MenuAnchor>
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/src/SelectField/index.js b/src/SelectField/index.js
new file mode 100644
index 0000000..b2f909c
--- /dev/null
+++ b/src/SelectField/index.js
@@ -0,0 +1,2 @@
+export { default as Option } from './Option';
+export { default as SelectField } from './SelectField';

From 18c2ebdfd3b5bb2a4e511a13a086b5891a309776 Mon Sep 17 00:00:00 2001
From: ncrmro <ncrmro@gmail.com>
Date: Thu, 7 Dec 2017 09:09:47 -0600
Subject: [PATCH 2/2] Add simple select field component and options

---
 docs/config.toml                              |  3 +
 .../components/select_field/_template.jsx     | 47 ++++++++++++++
 docs/pages/components/select_field/index.md   | 21 ++++++
 src/SelectField/Option.js                     | 10 +--
 src/SelectField/SelectField.js                | 65 +++----------------
 5 files changed, 85 insertions(+), 61 deletions(-)
 create mode 100644 docs/pages/components/select_field/_template.jsx
 create mode 100644 docs/pages/components/select_field/index.md

diff --git a/docs/config.toml b/docs/config.toml
index cd87b67..4b4c850 100644
--- a/docs/config.toml
+++ b/docs/config.toml
@@ -41,6 +41,9 @@ linkPrefix = "/react-mdc-web"
 [[components]]
   name = "Menu"
   path = "/components/menu/"
+[[components]]
+  name = "Select Field"
+  path = "/components/select_field/"
 [[components]]
   name = "Radio"
   path = "/components/radio/"
diff --git a/docs/pages/components/select_field/_template.jsx b/docs/pages/components/select_field/_template.jsx
new file mode 100644
index 0000000..0b29fb2
--- /dev/null
+++ b/docs/pages/components/select_field/_template.jsx
@@ -0,0 +1,47 @@
+import React, {PropTypes} from 'react';
+import ReactDOM from 'react-dom';
+import {Option, SelectField} from '../../../../src/SelectField';
+
+class Template extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: ''
+    };
+  }
+
+  componentDidMount() {
+    const container = document.getElementById('select_field');
+    ReactDOM.render(this.renderSelectField(), container);
+  }
+
+  onChange({ target }) {
+    this.setState({ selected: target.value });
+  }
+
+  renderSelectField() {
+    return (
+        <SelectField
+            onChange={this.onChange.bind(this)}
+            value={this.state.selected}
+        >
+          <Option value="first">First select field </Option>
+          <Option value="second">Second select field</Option>
+          <Option value="third">Third select field </Option>
+        </SelectField>
+    );
+  }
+
+  render() {
+    return (
+        <div>
+          {this.props.children}
+        </div>
+    );
+  }
+}
+export default Template;
diff --git a/docs/pages/components/select_field/index.md b/docs/pages/components/select_field/index.md
new file mode 100644
index 0000000..77b1e3e
--- /dev/null
+++ b/docs/pages/components/select_field/index.md
@@ -0,0 +1,21 @@
+---
+title: "Select Field"
+---
+
+```react-snippet
+select_field
+```
+```jsx
+onChange({ target }) {
+    this.setState({ selected: target.value });
+ }
+
+<SelectField
+    onChange={this.onChange.bind(this)}
+    value={this.state.selected}
+>
+  <Option value="first">First select field </Option>
+  <Option value="second">Second select field</Option>
+  <Option value="third">Third select field </Option>
+</SelectField>
+```
diff --git a/src/SelectField/Option.js b/src/SelectField/Option.js
index 2d26f3d..20be85f 100644
--- a/src/SelectField/Option.js
+++ b/src/SelectField/Option.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import MenuItem from '../Menu/MenuItem';
 
 const Option = props =>
-  <MenuItem className="mdc-list-item" >
-    {props.text}
-  </MenuItem>;
+    <option
+        onClick={props.onClick}
+        value={props.value}
+    >
+      {props.children}
+    </option>;
 
 export default Option;
\ No newline at end of file
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
index 046b88c..3e1ce12 100644
--- a/src/SelectField/SelectField.js
+++ b/src/SelectField/SelectField.js
@@ -1,60 +1,11 @@
 import React from 'react';
-import MenuAnchor from '../Menu/MenuAnchor';
-import Menu from '../Menu/Menu';
-import PropTypes from 'prop-types';
 
-export default class SelectField extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-  };
+const SelectField = props => <select
+    onChange={props.onChange}
+    className='mdc-select'
+    style={{ marginTop: '20px' }}
+>
+  {props.children}
+</select>;
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-      selected: 'Selected Text',
-    };
-  }
-
-  toggleOpen() {
-    this.setState({ open: !this.state.open });
-  }
-
-  getSelectedText() {
-    const selected = this.props.options.find(
-        x => x.id === this.state.selected
-    );
-    if (selected) {
-      return selected.text;
-    }
-    else return this.state.selected;
-  }
-
-  render() {
-    return <div
-        className='mdc-select'
-        onClick={this.toggleOpen.bind(this)}
-
-    >
-      <MenuAnchor >
-
-      <span
-          className="mdc-select__selected-text"
-      >
-        {this.state.selected}
-      </span>
-
-
-        <Menu
-            open={this.state.open}
-            onClose={this.toggleOpen.bind(this)}
-            style={{marginTop: '20px'}}
-
-
-        >
-          {this.props.children}
-        </Menu>
-      </MenuAnchor>
-    </div>;
-  }
-}
\ No newline at end of file
+export default SelectField;
\ No newline at end of file