feat: base -> from unmerged pull 266 -> patch -> merge

README.md

@@ -9,9 +9,11 @@
 
 [`redux-form-material-ui`](https://github.com/erikras/redux-form-material-ui) is a set of
 wrappers to facilitate the use of
-[`material-ui`](https://github.com/callemall/material-ui) components with
+[`material-uibeta`](https://github.com/callemall/material-ui) components with
 [`redux-form`](https://github.com/erikras/redux-form).
 
+Latest version is supported by only for material-ui beta.
+
 ---
 
 ## [Live Demo](http://erikras.github.io/redux-form-material-ui/) :eyes:
@@ -21,20 +23,26 @@ wrappers to facilitate the use of
 Using [npm](https://www.npmjs.org/):
 
 ```bash
-  $ npm install --save redux-form-material-ui
+  $ npm install --save redux-form-material-ui@next
+```
+
+Using [yarn](https://yarnpkg.com):
+
+```bash
+  $ yarn add redux-form-material-ui@next
 ```
 
 ## Available Components
 
 * [AutoComplete](http://www.material-ui.com/#/components/auto-complete)
 * [Checkbox](http://www.material-ui.com/#/components/checkbox)
-* [TimePicker](http://www.material-ui.com/#/components/time-picker)
-* [DatePicker](http://www.material-ui.com/#/components/date-picker)
+* ~[TimePicker](http://www.material-ui.com/#/components/time-picker)~ [Material-4787](https://github.com/callemall/material-ui/issues/4787)
+* ~[DatePicker](http://www.material-ui.com/#/components/date-picker)~ [Material-4787](https://github.com/callemall/material-ui/issues/4787)
 * [RadioButtonGroup](http://www.material-ui.com/#/components/radio-button)
-* [SelectField](http://www.material-ui.com/#/components/select-field)
-* [Slider](http://www.material-ui.com/#/components/slider)
+* [Select](http://www.material-ui.com/#/components/Select)
+* ~[Slider](http://www.material-ui.com/#/components/slider)~ [Material-4793](https://github.com/callemall/material-ui/issues/4793)
 * [TextField](http://www.material-ui.com/#/components/text-field)
-* [Toggle](http://www.material-ui.com/#/components/toggle)
+* [Switch](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls)
 
 ## Usage
 
@@ -43,39 +51,37 @@ and then pass the component class directly to the `component` prop of `Field`.
 
 ```js
 import { reduxForm, Field } from 'redux-form'
-import MenuItem from 'material-ui/MenuItem'
-import { RadioButton } from 'material-ui/RadioButton'
+import MenuItem from '@material-ui/core/MenuItem'
+import Radio from '@material-ui/core/RadioButton'
 import {
   Checkbox,
-  RadioButtonGroup,
-  SelectField,
+  RadioGroup,
+  Select,
   TextField,
-  Toggle,
-  DatePicker
+  Switch,
+  FormControlLabel,
 } from 'redux-form-material-ui'
 
 class MyForm extends Component {
   render() {
     return (
       <form>
-        <Field name="username" component={TextField} hintText="Street"/>
+        <Field name="username" component={TextField} placeholder="Street"/>
 
-        <Field name="plan" component={SelectField} hintText="Select a plan">
-          <MenuItem value="monthly" primaryText="Monthly"/>
-          <MenuItem value="yearly" primaryText="Yearly"/>
-          <MenuItem value="lifetime" primaryText="Lifetime"/>
+        <Field name="plan" component={Select} placeholder="Select a plan">
+          <MenuItem value="monthly">Monthly</MenuItem>
+          <MenuItem value="yearly">Yearly</MenuItem>
+          <MenuItem value="lifetime">Lifetime</MenuItem>
         </Field>
 
-        <Field name="agreeToTerms" component={Checkbox} label="Agree to terms?"/>
-
-        <Field name="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>
+        <FormControlLabel control={<Field name="agreeToTerms" component={Checkbox} /> } label="Agree to terms?" />
 
-        <Field name="receiveEmails" component={Toggle} label="Please spam me!"/>
+      <FormControlLabel control={<Field name="receiveEmails" component={Switch} /> } label="Please spam me!" />
 
-        <Field name="bestFramework" component={RadioButtonGroup}>
-          <RadioButton value="react" label="React"/>
-          <RadioButton value="angular" label="Angular"/>
-          <RadioButton value="ember" label="Ember"/>
+        <Field name="bestFramework" component={RadioGroup}>
+          <Radio value="react" label="React"/>
+          <Radio value="angular" label="Angular"/>
+          <Radio value="ember" label="Ember"/>
         </Field>
       </form>
     )

example/index.html

@@ -13,7 +13,7 @@
   <style type="text/css">
     /*This CSS has been tweaked from root site
        to match with material-ui*/
-    form > div > div > div {
+    form > div > div > * {
       padding: 0;
       border: none;
     }
@@ -33,6 +33,10 @@
       max-width: 850px;
       margin: 0 auto;
     }
+    .list-margin {
+      margin-left: -180px;
+      height: 30px;
+    }
   </style>
   <meta itemprop="name" content="Redux Form Material UI Adapter"/>
   <meta property="og:type" content="website"/>

example/package.json

@@ -9,19 +9,18 @@
     "prepublish": "npm run lint && npm run build"
   },
   "dependencies": {
+    "@material-ui/core": "^1.0.0",
     "babel-polyfill": "^6.26.0",
     "html-loader": "^0.5.1",
     "json-loader": "^0.5.7",
     "markdown-loader": "^2.0.1",
-    "material-ui": "^0.19.0",
     "raw-loader": "^0.5.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-redux": "^5.0.6",
-    "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.2",
     "redux-form": "^7.0.3",
-    "redux-form-material-ui": "^4.2.0",
+    "redux-form-material-ui": "file:..",
     "redux-form-website-template": "0.0.50"
   },
   "devDependencies": {

example/src/Example.md

@@ -1,6 +1,6 @@
 # Redux Form Material UI Wrappers
 
-This is a simple demonstration of how to connect all the standard
+This is a simple demonstration of how to connect all the standard (MUI V1.0)
 [`material-ui`](https://github.com/callemall/material-ui) form elements to
 [`redux-form`](https://github.com/erikras/redux-form) using the
 [`redux-form-material-ui`](https://github.com/erikras/redux-form-material-ui) wrapper library.
@@ -10,15 +10,11 @@ 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)
-* [TimePicker](http://www.material-ui.com/#/components/time-picker)
-* [RadioButtonGroup](http://www.material-ui.com/#/components/radio-button)
-* [SelectField](http://www.material-ui.com/#/components/select-field)
-* [Slider](http://www.material-ui.com/#/components/slider)
+* [RadioGroup](http://www.material-ui.com/#/components/radio-button)
+* [Select](http://www.material-ui.com/#/components/Select)
 * [TextField](http://www.material-ui.com/#/components/text-field)
-* [Toggle](http://www.material-ui.com/#/components/toggle)
+* [Switch](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls)
 
 The code for this example is
 [available here](https://github.com/erikras/redux-form-material-ui/tree/master/example).