[docs] Add redux form integration example

docs/package.json

@@ -62,12 +62,16 @@
     "react-dom": "^16.8.2",
     "react-jss": "^8.6.1",
     "react-kawaii": "^0.12.0",
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.4",
+    "redux-form": "^8.2.4",
     "remark-slug": "^5.1.1",
     "safe-json-stringify": "^1.2.0",
     "typescript": "^3.4.4",
     "unist-util-visit": "^1.4.0"
   },
   "devDependencies": {
+    "@types/react-redux": "^7.1.1",
     "dotenv": "^7.0.0",
     "fs-extra": "^7.0.1",
     "patreon": "^0.4.1"

docs/pages/guides/ReduxForm.example.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import Code from '../../_shared/Code';
+import { connect } from 'react-redux';
+import { Grid } from '@material-ui/core';
+import { reducer as formReducer } from 'redux-form';
+import { createStore, combineReducers } from 'redux';
+import { Provider as ReduxProvider } from 'react-redux';
+import { KeyboardDatePicker } from '@material-ui/pickers';
+import { reduxForm, Field, formValueSelector } from 'redux-form';
+
+const DateField = props => {
+  const {
+    meta: { submitting, error, touched },
+    input: { onBlur, value, ...inputProps },
+    ...others
+  } = props;
+
+  const onChange = date => {
+    Date.parse(date) ? inputProps.onChange(date.toISOString()) : inputProps.onChange(null);
+  };
+
+  return (
+    <KeyboardDatePicker
+      {...inputProps}
+      {...others}
+      format="dd/MM/yyyy"
+      value={value ? new Date(value) : null}
+      disabled={submitting}
+      onBlur={() => onBlur(value ? new Date(value).toISOString() : null)}
+      error={error && touched}
+      onChange={onChange}
+    />
+  );
+};
+
+const ReduxFormExample = props => {
+  const formValues = {
+    isFormValid: props.valid,
+    values: {
+      date: props.date,
+    },
+  };
+
+  const submit = values => {
+    alert(JSON.stringify(values));
+  };
+
+  return (
+    // only calls the submit if form is valid
+    <form onSubmit={props.handleSubmit(submit)}>
+      <Grid container>
+        <Grid item container justify="center" xs={12}>
+          <Field name="date" component={DateField} />
+        </Grid>
+        <Grid item xs={12} sm={12} style={{ margin: '24px' }}>
+          <Code children={JSON.stringify(formValues, null, 2)} />
+        </Grid>
+      </Grid>
+    </form>
+  );
+};
+
+const selector = formValueSelector('example');
+
+const mapStateToProps = state => ({
+  date: selector(state, 'date'),
+  initialValues: {
+    date: new Date().toISOString(),
+  },
+});
+
+const createReduxForm = reduxForm({ form: 'example' });
+const Form = connect(mapStateToProps)(createReduxForm(ReduxFormExample));
+
+const rootReducer = combineReducers({
+  form: formReducer,
+  // Others reducers
+});
+
+const store = createStore(rootReducer);
+
+const App = () => (
+  <ReduxProvider store={store}>
+    <Form />
+  </ReduxProvider>
+);
+
+export default App;

docs/pages/guides/form-integration.mdx

@@ -2,6 +2,7 @@ import Ad from '_shared/Ad'
 import Example from '_shared/Example';
 import PageMeta from '_shared/PageMeta';
 import * as FormikExample from './Formik.example';
+import * as ReduxFormExample from './ReduxForm.example';
 
 <PageMeta title="Form integration" />
 
@@ -20,3 +21,9 @@ Here are some examples!
 Here is an example of how to integrate @material-ui/pickers with Formik
 
 <Example source={FormikExample} />
+
+#### Redux Form Integration
+
+@material-ui/pickers can also be integrated with Redux Form
+
+<Example source={ReduxFormExample} />

yarn.lock

@@ -1037,6 +1037,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.4.5":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.4.tgz#cb7d1ad7c6d65676e66b47186577930465b5271b"
+  integrity sha512-Na84uwyImZZc3FKf4aUF1tysApzwf3p2yuFBIyBfbzT5glzKTdvYI4KVW4kcgjrzoGUjC7w3YyCHcJKaRxsr2Q==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -1762,6 +1769,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -1919,6 +1934,16 @@
     "@types/react" "*"
     "@types/webpack" "*"
 
+"@types/react-redux@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.1.tgz#eb01e89cf71cad77df9f442b819d5db692b997cb"
+  integrity sha512-owqNahzE8en/jR4NtrUJDJya3tKru7CIEGSRL/pVS84LtSCdSoT7qZTkrbBd3S4Lp11sAp+7LsvxIeONJVKMnw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-transition-group@^2.0.15", "@types/react-transition-group@^2.0.16":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
@@ -4859,6 +4884,11 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-error@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+
 es6-promise-pool@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/es6-promise-pool/-/es6-promise-pool-2.5.0.tgz#147c612b36b47f105027f9d2bf54a598a99d9ccb"
@@ -6209,6 +6239,11 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+immutable@3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -10061,11 +10096,23 @@ react-kawaii@^0.12.0:
   dependencies:
     prop-types "^15.6.2"
 
-react-lifecycles-compat@^3.0.2:
+react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-redux@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
+  integrity sha512-hyu/PoFK3vZgdLTg9ozbt7WF3GgX5+Yn3pZm5/96/o4UueXA+zj08aiSC9Mfj2WtD1bvpIb3C5yvskzZySzzaw==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+
 react-test-renderer@^16.0.0-0:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
@@ -10203,6 +10250,32 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
+redux-form@^8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-8.2.4.tgz#6c21c49e31b473cebe718def03487fc9d4665923"
+  integrity sha512-+MMD5XWVUgrtgXBuQiIYtHstPT7Lz0Izuc6vqBr1S9+7HbGgvJg4V5qDr2nigE1V5hKgsqnoAmWOWtzXc9ErZA==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    es6-error "^4.1.1"
+    hoist-non-react-statics "^3.2.1"
+    invariant "^2.2.4"
+    is-promise "^2.1.0"
+    lodash "^4.17.11"
+    lodash-es "^4.17.11"
+    prop-types "^15.6.1"
+    react-is "^16.7.0"
+    react-lifecycles-compat "^3.0.4"
+  optionalDependencies:
+    immutable "3.8.2"
+
+redux@^4.0.0, redux@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
+  integrity sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -11499,7 +11572,7 @@ symbol-observable@1.0.1:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
-symbol-observable@1.2.0, symbol-observable@^1.0.4, symbol-observable@^1.1.0:
+symbol-observable@1.2.0, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==