diff --git a/docs/package.json b/docs/package.json index 06a1e276a..951075d74 100644 --- a/docs/package.json +++ b/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" diff --git a/docs/pages/guides/ReduxForm.example.jsx b/docs/pages/guides/ReduxForm.example.jsx new file mode 100644 index 000000000..73f27f81b --- /dev/null +++ b/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 ( + 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 +
+ + + + + + + + + + ); +}; + +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 = () => ( + +
+ +); + +export default App; diff --git a/docs/pages/guides/form-integration.mdx b/docs/pages/guides/form-integration.mdx index c1bc8d363..0659690d5 100644 --- a/docs/pages/guides/form-integration.mdx +++ b/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'; @@ -20,3 +21,9 @@ Here are some examples! Here is an example of how to integrate @material-ui/pickers with Formik + +#### Redux Form Integration + +@material-ui/pickers can also be integrated with Redux Form + + diff --git a/yarn.lock b/yarn.lock index 7f812d6a9..9ef51ee1a 100644 --- a/yarn.lock +++ b/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==