Merge branch 'master' of github.com:erikras/redux-form-material-ui

Author: erikras

README.md

@@ -24,6 +24,7 @@ Using [npm](https://www.npmjs.org/):
 
 ## Available Components
 
+* [AutoComplete](http://www.material-ui.com/#/components/auto-complete)
 * [Checkbox](http://www.material-ui.com/#/components/checkbox)
 * [DatePicker](http://www.material-ui.com/#/components/date-picker)
 * [RadioButtonGroup](http://www.material-ui.com/#/components/radio-button)

example/src/Example.md

@@ -10,6 +10,7 @@ You simply provide the string name of the Material UI component you want to rend
 
 Available components:
 
+* [AutoComplete](http://www.material-ui.com/#/components/auto-complete)
 * [Checkbox](http://www.material-ui.com/#/components/checkbox)
 * [DatePicker](http://www.material-ui.com/#/components/date-picker)
 * [RadioButtonGroup](http://www.material-ui.com/#/components/radio-button)

example/src/Form.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react'
 import { Field, reduxForm } from 'redux-form'
 import { RadioButton } from 'material-ui/RadioButton'
 import MenuItem from 'material-ui/MenuItem'
+import { AutoComplete as MUIAutoComplete } from 'material-ui'
 import {
+  AutoComplete,
   Checkbox,
   DatePicker,
   RadioButtonGroup,
@@ -103,6 +105,16 @@ class Form extends Component {
             multiLine={true}
             rows={2}/>
         </div>
+        <div>
+          <Field
+            name="cheese"
+            component={AutoComplete}
+            floatingLabelText="Cheese"
+            openOnFocus={true}
+            filter={MUIAutoComplete.fuzzyFilter}
+            dataSource={[ 'Cheddar', 'Mozzarella', 'Parmesan', 'Provolone' ]}
+            />
+        </div>
         <div>
           <button type="submit" disabled={pristine || submitting}>Submit</button>
           <button type="button" disabled={pristine || submitting} onClick={reset}>Clear</button>

src/AutoComplete.js

@@ -0,0 +1,14 @@
+import AutoComplete from 'material-ui/AutoComplete'
+import noop from 'lodash.noop'
+import createComponent from './createComponent'
+import mapError from './mapError'
+
+export default createComponent(
+  AutoComplete,
+  ({ input: { onChange, value, ...inputProps }, ...props }) => ({
+    ...mapError(props),
+    ...inputProps,
+    searchText: value,
+    onChange: noop,
+    onNewRequest: value => onChange(value)
+  }))

src/__tests__/AutoComplete.spec.js

@@ -0,0 +1,93 @@
+import React from 'react'
+import TestUtils from 'react-addons-test-utils'
+import expect, { createSpy } from 'expect'
+import expectJsx from 'expect-jsx'
+import AutoComplete from 'material-ui/AutoComplete'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import noop from 'lodash.noop'
+import ReduxFormMaterialUIAutoComplete from '../AutoComplete'
+
+expect.extend(expectJsx)
+
+describe('AutoComplete', () => {
+
+  const dataSource = [
+    'One',
+    'Two',
+    'Three'
+  ]
+
+  it('has a display name', () => {
+    expect(ReduxFormMaterialUIAutoComplete.displayName)
+      .toBe('ReduxFormMaterialUIAutoComplete')
+  })
+
+  it('renders an AutoComplete', () => {
+    expect(new ReduxFormMaterialUIAutoComplete({
+      dataSource,
+      input: {
+        name: 'myAutoComplete',
+        value: 'Foo'
+      }
+    }).render())
+      .toEqualJSX(<AutoComplete dataSource={dataSource} name="myAutoComplete" searchText="Foo" onChange={noop} ref="component"/>)
+  })
+
+  it('renders an AutoComplete with no error when not touched', () => {
+    expect(new ReduxFormMaterialUIAutoComplete({
+      dataSource,
+      input: {
+        name: 'myAutoComplete',
+        value: 'Foo'
+      },
+      error: 'FooError'
+    }).render())
+      .toEqualJSX(<AutoComplete dataSource={dataSource} name="myAutoComplete" searchText="Foo" onChange={noop} ref="component"/>)
+  })
+
+  it('renders an AutoComplete with an error', () => {
+    expect(new ReduxFormMaterialUIAutoComplete({
+      dataSource,
+      input: {
+        name: 'myAutoComplete',
+        value: 'Foo'
+      },
+      error: 'FooError',
+      touched: true
+    }).render())
+      .toEqualJSX(<AutoComplete dataSource={dataSource} name="myAutoComplete" searchText="Foo" errorText="FooError" onChange={noop}
+        ref="component"/>)
+  })
+
+  it('maps onChange properly', () => {
+    const onChange = createSpy()
+
+    const dom = TestUtils.renderIntoDocument(
+      <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <ReduxFormMaterialUIAutoComplete dataSource={dataSource} name="myAutoComplete" input={{ onChange, value: 'Foo' }}/>
+      </MuiThemeProvider>
+    )
+
+    const autocomplete = TestUtils.findRenderedComponentWithType(dom, AutoComplete)
+    expect(onChange).toNotHaveBeenCalled()
+    autocomplete.props.onNewRequest('TheValue')
+    expect(onChange)
+      .toHaveBeenCalled()
+      .toHaveBeenCalledWith('TheValue')
+  })
+
+  it('provides getRenderedComponent', () => {
+    const dom = TestUtils.renderIntoDocument(
+      <MuiThemeProvider muiTheme={getMuiTheme()}>
+        <ReduxFormMaterialUIAutoComplete dataSource={dataSource} input={{ name: 'myAutoComplete' }}/>
+      </MuiThemeProvider>
+    )
+
+    const element =
+      TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIAutoComplete)
+    expect(element.getRenderedComponent).toBeA('function')
+    expect(element.getRenderedComponent()).toExist()
+  })
+})
+

src/index.js

@@ -5,8 +5,10 @@ import Checkbox from './Checkbox'
 import Slider from './Slider'
 import Toggle from './Toggle'
 import SelectField from './SelectField'
+import AutoComplete from './AutoComplete'
 
 export {
+  AutoComplete,
   Checkbox,
   DatePicker,
   RadioButtonGroup,