diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md index 15413911049..e67897692db 100644 --- a/docs/AccordionForm.md +++ b/docs/AccordionForm.md @@ -109,8 +109,8 @@ import { Edit, TextField, TextInput, DateInput, SelectInput, ArrayInput, SimpleF import { AccordionForm } from '@react-admin/ra-form-layout'; // don't forget the component="div" prop on the main component to disable the main Card -const CustomerEdit = (props: EditProps) => ( - +const CustomerEdit = () => ( + - + diff --git a/docs/Buttons.md b/docs/Buttons.md index 4b4d21e41fd..743109849ce 100644 --- a/docs/Buttons.md +++ b/docs/Buttons.md @@ -676,10 +676,10 @@ Delete the current record after a confirm dialog has been accepted. To be used i import * as React from 'react'; import { DeleteWithConfirmButton, Toolbar, Edit, SaveButton,useRecordContext } from 'react-admin'; -const EditToolbar = props => { +const EditToolbar = () => { const record = useRecordContext(); - + ( - +export const Menu = () => ( + }/> }/> diff --git a/docs/Create.md b/docs/Create.md index 188aa59a3b4..6190ab2cdd9 100644 --- a/docs/Create.md +++ b/docs/Create.md @@ -323,13 +323,13 @@ The `title` value can be a string or a React element. To transform a record after the user has submitted the form but before the record is passed to `dataProvider.create()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon creation: ```jsx -export const UserCreate = (props) => { +export const UserCreate = () => { const transform = data => ({ ...data, fullName: `${data.firstName} ${data.lastName}` }); return ( - + ... ); @@ -356,7 +356,7 @@ As a reminder, HTML form inputs always return strings, even for numbers and bool If you prefer to have `null` values, or to omit the key for empty values, use [the `transform` prop](#transform) to sanitize the form data before submission: ```jsx -export const UserCreate = (props) => { +export const UserCreate = () => { const transform = (data) => { const sanitizedData = {}; for (const key in data) { @@ -366,7 +366,7 @@ export const UserCreate = (props) => { return sanitizedData; }; return ( - + ... ); @@ -576,12 +576,12 @@ const cities = { }; const toChoices = items => items.map(item => ({ id: item, name: item })); -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -590,7 +590,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md index 965dd13b541..b5dd02e3320 100644 --- a/docs/CreateInDialogButton.md +++ b/docs/CreateInDialogButton.md @@ -106,8 +106,8 @@ const sexChoices = [ { id: "female", name: "Female" }, ]; -const CustomerForm = (props) => ( - +const CustomerForm = () => ( + @@ -115,8 +115,8 @@ const CustomerForm = (props) => ( ); -const CustomerLayout = (props) => ( - +const CustomerLayout = () => ( + diff --git a/docs/Edit.md b/docs/Edit.md index 0964b841624..3a12eaf1f51 100644 --- a/docs/Edit.md +++ b/docs/Edit.md @@ -281,11 +281,8 @@ import { SimpleForm, } from 'react-admin'; -const CustomToolbar = props => ( - +const CustomToolbar = () => ( + @@ -544,13 +541,13 @@ The `title` value can be a string or a React element. To transform a record after the user has submitted the form but before the record is passed to `dataProvider.update()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon edition: ```jsx -export const UserEdit = (props) => { +export const UserEdit = () => { const transform = data => ({ ...data, fullName: `${data.firstName} ${data.lastName}` }); return ( - + ... ); @@ -564,13 +561,13 @@ The `transform` function can also return a `Promise`, which allows you to do all **Tip**: The `transform` function also get the `previousData` in its second argument: ```jsx -export const UserEdit = (props) => { +export const UserEdit = () => { const transform = (data, { previousData }) => ({ ...data, avoidChangeField: previousData.avoidChangeField }); return ( - + ... ); @@ -593,7 +590,7 @@ As a reminder, HTML form inputs always return strings, even for numbers and bool If you prefer to have `null` values, or to omit the key for empty values, use [the `transform` prop](#transform) to sanitize the form data before submission: ```jsx -export const UserEdit = (props) => { +export const UserEdit = () => { const transform = (data) => { const sanitizedData = {}; for (const key in data) { @@ -603,7 +600,7 @@ export const UserEdit = (props) => { return sanitizedData; }; return ( - + ... ); @@ -722,12 +719,12 @@ const cities = { }; const toChoices = items => items.map(item => ({ id: item, name: item })); -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -736,7 +733,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md index 5063db5baa0..ee88f67ed6e 100644 --- a/docs/EditInDialogButton.md +++ b/docs/EditInDialogButton.md @@ -381,8 +381,8 @@ const sexChoices = [ { id: "female", name: "Female" }, ]; -const CustomerForm = (props) => ( - +const CustomerForm = () => ( + @@ -390,8 +390,8 @@ const CustomerForm = (props) => ( ); -const CustomerLayout = (props) => ( - +const CustomerLayout = () => ( + diff --git a/docs/EditTutorial.md b/docs/EditTutorial.md index 5c8720d5fbf..21c61868176 100644 --- a/docs/EditTutorial.md +++ b/docs/EditTutorial.md @@ -565,8 +565,8 @@ In the following example, a create view for a Post displays a form with two subm So the save button with 'save and notify' will *transform* the record before react-admin calls the `dataProvider.create()` method, adding a `notify` field: ```jsx -const PostCreateToolbar = props => ( - +const PostCreateToolbar = () => ( + `'s transform prop function also get the `previousData` in its second argument: ```jsx -const PostEditToolbar = props => ( - +const PostEditToolbar = () => ( + items.map(item => ({ id: item, name: item })); // toChoices(coutries) should be [{ id: 'USA', name: 'USA' }, ...] -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -578,7 +578,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/FileInput.md b/docs/FileInput.md index 0e0e05bb905..229b9ff640e 100644 --- a/docs/FileInput.md +++ b/docs/FileInput.md @@ -186,14 +186,14 @@ This example asumes the implementation of a `deleteImages` function in the dataP import { Edit, SimpleForm, ImageInput, Confirm, useDataProvider } from 'react-admin'; import { useMutation } from 'react-query'; -const MyEdit = (props) => { +const MyEdit = () => { const [removeImage, setRemoveImage] = React.useState(null); const [showModal, setShowModal] = React.useState(false); const dataProvider = useDataProvider(); const { mutate } = useMutation(); return ( - + items.map(item => ({ id: item, name: item })); -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -320,7 +320,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/Inputs.md b/docs/Inputs.md index d0e30889220..d83e2bf2c91 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -465,7 +465,7 @@ React-admin relies on [react-hook-form](https://react-hook-form.com/) for form h ```tsx import * as React from "react"; -import { Edit, SimpleForm, SelectInput, SelectInputProps } from "react-admin"; +import { Edit, SimpleForm, SelectInput } from "react-admin"; import { useWatch } from "react-hook-form"; const countries = ["USA", "UK", "France"]; @@ -476,13 +476,13 @@ const cities: Record = { }; const toChoices = (items: string[]) => items.map((item) => ({ id: item, name: item })); -const CityInput = (props: SelectInputProps) => { +const CityInput = () => { const country = useWatch<{ country: string }>({ name: "country" }); return ( ); }; @@ -491,7 +491,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/List.md b/docs/List.md index 9df4a70d4a6..855abcbd21f 100644 --- a/docs/List.md +++ b/docs/List.md @@ -740,7 +740,7 @@ The `pagination` prop allows to replace the default pagination controls by your // in src/MyPagination.js import { Pagination, List } from 'react-admin'; -const PostPagination = props => ; +const PostPagination = () => ; export const PostList = () => ( }> diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md index 4b930e89453..a59b81c369e 100644 --- a/docs/ListTutorial.md +++ b/docs/ListTutorial.md @@ -871,15 +871,10 @@ export const PostList = () => ( But if you just want to change the color property of the pagination button, you can extend the existing components: ```tsx -import { - List, - Pagination as RaPagination, - PaginationActions as RaPaginationActions, -} from 'react-admin'; +import { List, Pagination, PaginationActions } from 'react-admin'; -export const PaginationActions = props => ( - ( + component color="primary" showFirstButton @@ -887,10 +882,10 @@ export const PaginationActions = props => ( /> ); -export const Pagination = () => ; +export const MyPagination = () => ; export const UserList = () => ( - } > + } > //... ); diff --git a/docs/LongForm.md b/docs/LongForm.md index adbd9909007..ca93185f270 100644 --- a/docs/LongForm.md +++ b/docs/LongForm.md @@ -269,8 +269,8 @@ import { } from 'react-admin'; import { LongForm } from '@react-admin/ra-form-layout'; -const CustomToolbar = props => ( - +const CustomToolbar = () => ( + ); diff --git a/docs/MarkdownField.md b/docs/MarkdownField.md index 6790a1830c0..3d89aceedfa 100644 --- a/docs/MarkdownField.md +++ b/docs/MarkdownField.md @@ -11,8 +11,8 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise) ( - +const PostShow = () => ( + diff --git a/docs/ReferenceManyToManyField.md b/docs/ReferenceManyToManyField.md index 4e90bf61788..c0d75f3c3f0 100644 --- a/docs/ReferenceManyToManyField.md +++ b/docs/ReferenceManyToManyField.md @@ -76,8 +76,8 @@ export const BandShow = () => ( This means you can use a `` instead of a ``, which is useful if you want to display more details about related records. For instance, to display the venue `name` and `location`: ```diff -export const BandShow = (props) => ( - +export const BandShow = () => ( + ` with custom UI options, or custom side effects, then use ```jsx import { SaveButton, Toolbar, Edit, SimpleForm, useNotify, useRedirect } from 'react-admin'; -const PostSaveButton = props => { +const PostSaveButton = () => { const notify = useNotify(); const redirect = useRedirect(); const onSuccess = data => { @@ -26,7 +26,7 @@ const PostSaveButton = props => { redirect('/posts'); }; return ( - + ); }; @@ -67,7 +67,7 @@ By default, `` renders a disk icon. You can can pass another icon el import AddBoxIcon from '@mui/icons-material/AddBox'; import { SaveButton } from 'react-admin'; -const MySaveButton = props => } />; +const MySaveButton = () => } />; ``` ## `label` diff --git a/docs/Show.md b/docs/Show.md index b041900f5fa..72232a130dc 100644 --- a/docs/Show.md +++ b/docs/Show.md @@ -191,8 +191,8 @@ const ShowWrapper = ({ children }) => ( ); // use a ShowWrapper as root component -const PostShow = props => ( - +const PostShow = () => ( + ... ); @@ -304,7 +304,7 @@ You can override this behavior and pass custom side effects by providing a custo import * as React from 'react'; import { useNotify, useRefresh, useRedirect, Show, SimpleShowLayout } from 'react-admin'; -const PostShow = props => { +const PostShow = () => { const notify = useNotify(); const refresh = useRefresh(); const redirect = useRedirect(); @@ -316,7 +316,7 @@ const PostShow = props => { }; return ( - + ... diff --git a/docs/ShowBase.md b/docs/ShowBase.md index 65336061ac2..4e129d87c3d 100644 --- a/docs/ShowBase.md +++ b/docs/ShowBase.md @@ -160,7 +160,7 @@ You can override this behavior and pass custom side effects by providing a custo import * as React from 'react'; import { useNotify, useRefresh, useRedirect, ShowBase, SimpleShowLayout } from 'react-admin'; -const PostShow = props => { +const PostShow = () => { const notify = useNotify(); const refresh = useRefresh(); const redirect = useRedirect(); @@ -172,7 +172,7 @@ const PostShow = props => { }; return ( - + ... diff --git a/docs/SimpleForm.md b/docs/SimpleForm.md index 36bb1957d63..603ce3953c6 100644 --- a/docs/SimpleForm.md +++ b/docs/SimpleForm.md @@ -306,8 +306,8 @@ Another use case is to remove the `` from the toolbar in an edit v import * as React from "react"; import { Edit, SimpleForm, SaveButton, Toolbar } from 'react-admin'; -const PostEditToolbar = props => ( - +const PostEditToolbar = () => ( + ); @@ -327,8 +327,8 @@ In the default ``, the `` is disabled when the form is `pri import * as React from 'react'; import { Edit, SimpleForm, SaveButton, DeleteButton, Toolbar } from 'react-admin'; -const PostEditToolbar = props => ( - +const PostEditToolbar = () => ( + @@ -715,12 +715,12 @@ const cities = { }; const toChoices = items => items.map(item => ({ id: item, name: item })); -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -729,7 +729,7 @@ const OrderEdit = () => ( - + ); diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md index b317154ea81..c22546fbcb8 100644 --- a/docs/TabbedForm.md +++ b/docs/TabbedForm.md @@ -368,11 +368,11 @@ For that use case, use the `` component with a custom `onSuccess` pr import * as React from "react"; import { Create, TabbedForm, SaveButton, Toolbar, useRedirect } from 'react-admin'; -const PostCreateToolbar = props => { +const PostCreateToolbar = () => { const redirect = useRedirect(); const notify = useNotify(); return ( - + @@ -410,8 +410,8 @@ Another use case is to remove the `` from the toolbar in an edit v import * as React from "react"; import { Edit, TabbedForm, SaveButton, Toolbar } from 'react-admin'; -const PostEditToolbar = props => ( - +const PostEditToolbar = () => ( + ); @@ -431,8 +431,8 @@ In the default ``, the `` is disabled when the form is `pri import * as React from 'react'; import { Edit, TabbedForm, SaveButton, DeleteButton, Toolbar } from 'react-admin'; -const PostEditToolbar = props => ( - +const PostEditToolbar = () => ( + @@ -900,12 +900,12 @@ const cities = { }; const toChoices = items => items.map(item => ({ id: item, name: item })); -const CityInput = props => { +const CityInput = () => { const country = useWatch({ name: 'country' }); return ( ); }; @@ -914,7 +914,7 @@ const OrderEdit = () => ( - + ); diff --git a/examples/demo/src/reviews/ReviewEdit.tsx b/examples/demo/src/reviews/ReviewEdit.tsx index e178b986933..f7b36019f3d 100644 --- a/examples/demo/src/reviews/ReviewEdit.tsx +++ b/examples/demo/src/reviews/ReviewEdit.tsx @@ -21,10 +21,10 @@ interface Props extends EditProps { onCancel: () => void; } -const ReviewEdit = ({ onCancel, ...props }: Props) => { +const ReviewEdit = ({ id, onCancel }: Props) => { const translate = useTranslate(); return ( - +