Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Add redux form integration example #1189

Merged
merged 12 commits into from Jul 24, 2019
Merged

[docs] Add redux form integration example #1189

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1fb92e
install redux and redux-form
igornfaustino Jul 17, 2019
00e5710
configure redux-form
igornfaustino Jul 17, 2019
587d125
wrap App with redux provider
igornfaustino Jul 17, 2019
2ac013f
create redux form example
igornfaustino Jul 17, 2019
124faaa
add react-redux types to dev dependencies
igornfaustino Jul 17, 2019
d55e607
Update docs/pages/guides/form-integration.mdx
igornfaustino Jul 19, 2019
41c1789
move redux to example folder
igornfaustino Jul 19, 2019
372deb4
Wrap example with redux
igornfaustino Jul 19, 2019
9a14649
Merge branch 'feature/docs-redux-form' of https://github.com/igornfau…
igornfaustino Jul 19, 2019
bddb869
remove redux-thunk
igornfaustino Jul 21, 2019
7e96ee0
modify onChange to allow empty field
igornfaustino Jul 21, 2019
54d6721
move store to inside Form example
igornfaustino Jul 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/package.json
View file
Open in desktop
Expand Up @@ -62,12 +62,17 @@
"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",
"redux-thunk": "^2.3.0",
igornfaustino marked this conversation as resolved.
Show resolved Hide resolved
"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"
Expand Down
10 changes: 7 additions & 3 deletions docs/pages/_app.tsx
View file
Open in desktop
@@ -1,7 +1,9 @@
import React from 'react';
import App from 'next/app';
import store from '../store.jsx';
import cookies from 'next-cookies';
import getPageContext from '../utils/getPageContext';
import { Provider as ReduxProvider } from 'react-redux';
import { PageWithContexts, ThemeType } from '../layout/PageWithContext';

class MyApp extends App<{ theme: ThemeType }> {
Expand Down Expand Up @@ -30,9 +32,11 @@ class MyApp extends App<{ theme: ThemeType }> {
const { Component, pageProps, theme } = this.props;

return (
<PageWithContexts initialTheme={theme} pageContext={this.pageContext}>
<Component pageContext={this.pageContext} {...pageProps} />
</PageWithContexts>
<ReduxProvider store={store}>
igornfaustino marked this conversation as resolved.
Show resolved Hide resolved
<PageWithContexts initialTheme={theme} pageContext={this.pageContext}>
<Component pageContext={this.pageContext} {...pageProps} />
</PageWithContexts>
</ReduxProvider>
);
}
}
Expand Down
64 changes: 64 additions & 0 deletions docs/pages/guides/ReduxForm.example.jsx
View file
Open in desktop
@@ -0,0 +1,64 @@
import React from 'react';
import Code from '../../_shared/Code';
import { connect } from 'react-redux';
import { Grid } from '@material-ui/core';
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;

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={date => Date.parse(date) && inputProps.onChange(date.toISOString())}
/>
);
};

class ReduxFormExample extends React.PureComponent {
igornfaustino marked this conversation as resolved.
Show resolved Hide resolved
render() {
return (
<form>
<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(
{
values: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think here we can pass some values from props. Actually redux-form's values and errors.
So it will be more clear for users

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

most of redux form props are on Field level, I can't get in a simple way the error text outside the Field component... so I add a valid props from Redux-Form, if the value is "true" no errors were find on the form

date: this.props.date,
},
},
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' });
export default connect(mapStateToProps)(createReduxForm(ReduxFormExample));
7 changes: 7 additions & 0 deletions docs/pages/guides/form-integration.mdx
View file
Open in desktop
Expand Up @@ -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" />

Expand All @@ -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 integrate with Redux Form
igornfaustino marked this conversation as resolved.
Show resolved Hide resolved

<Example source={ReduxFormExample} />
13 changes: 13 additions & 0 deletions docs/store.jsx
View file
Open in desktop
@@ -0,0 +1,13 @@
import { reducer as formReducer } from 'redux-form';
import { createStore, combineReducers } from 'redux';

const rootReducer = combineReducers({
form: formReducer,
});

const store = createStore(
rootReducer
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;
2 changes: 1 addition & 1 deletion docs/tsconfig.json
View file
Open in desktop
Expand Up @@ -19,5 +19,5 @@
"target": "esnext",
"resolveJsonModule": true
},
"include": ["../docs/**/*.ts*"]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you must use .tsx for store. It should not be complicated. ASFAIK there is should not be any type definitions

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following prev comment. Just put it inside the example

"include": ["../docs/**/*.ts*", "store.jsx"]
}
82 changes: 80 additions & 2 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -10203,6 +10250,37 @@ 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-thunk@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==

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"
Expand Down Expand Up @@ -11499,7 +11577,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==
Expand Down