Merge pull request #163 from salockhart/master

[New Component] Auto Complete

README.md

@@ -32,13 +32,14 @@ import FormsySelect from 'formsy-material-ui/lib/FormsySelect';
 import FormsyText from 'formsy-material-ui/lib/FormsyText';
 import FormsyTime from 'formsy-material-ui/lib/FormsyTime';
 import FormsyToggle from 'formsy-material-ui/lib/FormsyToggle';
+import FormsyAutoComplete from 'formsy-material-ui/lib/FormsyAutoComplete';
 ```
 
 OR:
 
 ```js
 import { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, 
-  FormsySelect, FormsyText, FormsyTime, FormsyToggle } from 'formsy-material-ui/lib';
+  FormsySelect, FormsyText, FormsyTime, FormsyToggle, FormsyAutoComplete } from 'formsy-material-ui/lib';
 ```
 
 ### Events

examples/webpack-example/src/app/Main.js

@@ -6,7 +6,7 @@ import Paper from 'material-ui/Paper';
 import RaisedButton from 'material-ui/RaisedButton';
 import MenuItem from 'material-ui/MenuItem';
 import { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup,
-    FormsySelect, FormsyText, FormsyTime, FormsyToggle } from 'formsy-material-ui/lib';
+    FormsySelect, FormsyText, FormsyTime, FormsyToggle, FormsyAutoComplete } from 'formsy-material-ui/lib';
 
 const Main = React.createClass({
 
@@ -103,6 +103,16 @@ const Main = React.createClass({
               <MenuItem value={'nightly'} primaryText="Every Night" />
               <MenuItem value={'weeknights'} primaryText="Weeknights" />
             </FormsySelect>
+            <FormsyAutoComplete
+              name="frequency-auto-complete"
+              required
+              floatingLabelText="How often do you?"
+              dataSource={[
+                'Never',
+                'Every Night',
+                'Weeknights'
+              ]}
+            />
             <FormsyCheckbox
               name="agree"
               label="Do you agree to disagree?"

src/FormsyAutoComplete.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import keycode from 'keycode';
+import Formsy from 'formsy-react';
+import AutoComplete from 'material-ui/AutoComplete';
+import { setMuiComponentAndMaybeFocus } from 'formsy-react/src/utils';
+
+const FormsyAutoComplete = React.createClass({
+
+  propTypes: {
+    defaultValue: React.PropTypes.any,
+    name: React.PropTypes.string.isRequired,
+    onBlur: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
+    onKeyDown: React.PropTypes.func,
+    value: React.PropTypes.any,
+  },
+
+  mixins: [Formsy.Mixin],
+
+  getInitialState() {
+    return {
+      value: this.props.defaultValue || this.props.value || '',
+    };
+  },
+
+  componentWillMount() {
+    this.setValue(this.props.defaultValue || this.props.value || '');
+  },
+
+  handleBlur: function handleBlur(event) {
+    this.setValue(event.currentTarget.value);
+    if (this.props.onBlur) this.props.onBlur(event);
+  },
+
+  handleChange: function handleChange(event) {
+    this.setState({
+      value: event.currentTarget.value,
+    });
+    if (this.props.onChange) this.props.onChange(event);
+  },
+
+  handleKeyDown: function handleKeyDown(event) {
+    if (keycode(event) === 'enter') this.setValue(event.currentTarget.value);
+    if (this.props.onKeyDown) this.props.onKeyDown(event, event.currentTarget.value);
+  },
+
+  setMuiComponentAndMaybeFocus: setMuiComponentAndMaybeFocus,
+
+  render() {
+    const {
+      defaultValue, // eslint-disable-line no-unused-vars
+      onFocus,
+      value, // eslint-disable-line no-unused-vars
+      ...rest } = this.props;
+    return (
+      <AutoComplete
+        {...rest}
+        errorText={this.getErrorMessage()}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onFocus={onFocus}
+        onKeyDown={this.handleKeyDown}
+        ref={this.setMuiComponentAndMaybeFocus}
+        value={this.state.value}
+      />
+    );
+  },
+});
+
+export default FormsyAutoComplete;

src/index.jsx

@@ -6,3 +6,4 @@ export FormsySelect from './FormsySelect';
 export FormsyText from './FormsyText';
 export FormsyTime from './FormsyTime';
 export FormsyToggle from './FormsyToggle';
+export FormsyAutoComplete from './FormsyAutoComplete';