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.

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

Fix upgrade documentation about form handling #4330

Merged
merged 9 commits into from
Jan 27, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 43 additions & 5 deletions UPGRADE.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,10 @@ const SaveWithNoteButton = props => {
}

create(
null,
{
data: { ...formState.values, average_note: 10 },
payload: {
data: { ...formState.values, average_note: 10 },
},
},
{
onSuccess: ({ data: newRecord }) => {
Expand Down Expand Up @@ -208,7 +209,7 @@ import { FormDataConsumer, REDUX_FORM_NAME } from 'react-admin';
+ <SelectInput
+ source="country"
+ choices={countries}
+ onChange={value => form.change('city', null)}
+ onChange={value => form.change('city', value)}
+ {...rest}
+ />
+ <SelectInput
Expand All @@ -230,7 +231,7 @@ const OrderEdit = (props) => (
- source="country"
- choices={countries}
- onChange={value => dispatch(
- change(REDUX_FORM_NAME, 'city', null)
- change(REDUX_FORM_NAME, 'city', value)
- )}
- {...rest}
- />
Expand Down Expand Up @@ -374,6 +375,43 @@ export default ({
};
```

## Custom Forms Using `reduxForm()` Must Be Replaced By The `<Form>` Component

The [final-form migration documentation here](https://final-form.org/docs/react-final-form/migration/redux-form) explains the various changes you have to perform in your code.

```diff
-import { reduxForm } from 'redux-form'
+import { Form } from 'react-final-form'

-const CustomForm = reduxForm({ form: 'record-form', someOptions: true })(({ record, resource }) => (
+const CustomForm = ({ record, resource }) => (
+ <Form someOptions={true}>
+ {({ handleSubmit }) => (
+ <form onSubmit={handleSubmit}>
- <Fragment>
<Typography>Notes</Typography>
<TextInput source="note" />
+ </form>
- </Fragment>
+ )}
+ </Form>
+);
-));
```

## Material-ui Icons Have Changed

If you were using Material-ui icons for your design, be aware that some icons present in 1.X versions were removed from version 4.0.

Example:

* `LightbulbOutline` is no more available in `@Material-ui/icons`

But there is a quick fix for this one by using another package instead:

* `import Lightbulb from '@material-ui/docs/svgIcons/LightbulbOutline';`


## Custom Exporter Functions Must Use `jsonexport` Instead Of `papaparse`

React-admin used to bundle the `papaparse` library for converting JSON to CSV, as part of the Export functionality. But 90% of the `papaparse` code is used to convert CSV to JSON and was useless in react-admin. We decided to replace it by a lighter library: [jsonexport](https://github.com/kauegimenes/jsonexport).
Expand Down Expand Up @@ -1202,7 +1240,7 @@ const App = () => (
})}
>
<TranslationProvider>
+ <DataProviderContext.Provider valuse={dataProvider} />
+ <DataProviderContext.Provider value={dataProvider} />
<ThemeProvider>
<Resource name="posts" intent="registration" />
...
Expand Down