forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Add redux form integration example (mui#1189)
* install redux and redux-form * configure redux-form * wrap App with redux provider * create redux form example * add react-redux types to dev dependencies * Update docs/pages/guides/form-integration.mdx Co-Authored-By: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com> * move redux to example folder * Wrap example with redux * remove redux-thunk * modify onChange to allow empty field in the other way, the field always gotten the last valid value, even when explicit deleted. This way, the user can clear the field! * move store to inside Form example
- Loading branch information
1 parent
caea115
commit 4ef9a9f
Showing
4 changed files
with
174 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters