Merge pull request #9443 from marmelab/doc-props-clone

[Doc] Fix various snippets containing props forwarding

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) => (
-    <Edit {...props} component="div">
+const CustomerEdit = () => (
+    <Edit component="div">
 -       <AccordionForm>
 +       <AccordionForm autoClose>
             <AccordionForm.Panel label="Identity" defaultExpanded>

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();
 
-    <Toolbar {...props}>
+    <Toolbar>
         <SaveButton/>
         <DeleteWithConfirmButton
             confirmContent="You will not be able to recover this record. Are you sure?"
@@ -782,8 +782,8 @@ import ChatBubbleIcon from '@mui/icons-material/ChatBubble';
 import PeopleIcon from '@mui/icons-material/People';
 import LabelIcon from '@mui/icons-material/Label';
 
-export const Menu = (props) => (
-    <Menu {...props}>
+export const Menu = () => (
+    <Menu>
         <DashboardMenuItem />
         <MenuItemLink to="/posts" primaryText="Posts" leftIcon={<BookIcon />}/>
         <MenuItemLink to="/comments" primaryText="Comments" leftIcon={<ChatBubbleIcon />}/>

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 (
-        <Create {...props} transform={transform}>
+        <Create transform={transform}>
             ...
         </Create>
     );
@@ -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 (
-        <Create {...props} transform={transform}>
+        <Create transform={transform}>
             ...
         </Create>
     );
@@ -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 (
         <SelectInput
             choices={country ? toChoices(cities[country]) : []}
-            {...props}
+            source="cities"
         />
     );
 };
@@ -590,7 +590,7 @@ const OrderEdit = () => (
     <Edit>
         <SimpleForm>
             <SelectInput source="country" choices={toChoices(countries)} />
-            <CityInput source="cities" />
+            <CityInput />
         </SimpleForm>
     </Edit>
 );

docs/CreateInDialogButton.md

@@ -106,17 +106,17 @@ const sexChoices = [
   { id: "female", name: "Female" },
 ];
 
-const CustomerForm = (props) => (
-  <SimpleForm defaultValues={{ firstname: "John", name: "Doe" }} {...props}>
+const CustomerForm = () => (
+  <SimpleForm defaultValues={{ firstname: "John", name: "Doe" }}>
     <TextInput source="first_name" validate={required()} fullWidth />
     <TextInput source="last_name" validate={required()} fullWidth />
     <DateInput source="dob" label="born" validate={required()} fullWidth />
     <SelectInput source="sex" choices={sexChoices} fullWidth />
   </SimpleForm>
 );
 
-const CustomerLayout = (props) => (
-  <SimpleShowLayout {...props}>
+const CustomerLayout = () => (
+  <SimpleShowLayout>
     <TextField source="first_name" fullWidth />
     <TextField source="last_name" fullWidth />
     <DateField source="dob" label="born" fullWidth />

docs/Edit.md

@@ -281,11 +281,8 @@ import {
     SimpleForm,
 } from 'react-admin';
 
-const CustomToolbar = props => (
-    <Toolbar
-        {...props}
-        sx={{ display: 'flex', justifyContent: 'space-between' }}
-    >
+const CustomToolbar = () => (
+    <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
         <SaveButton />
         <DeleteButton mutationMode="pessimistic" />
     </Toolbar>
@@ -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 (
-        <Edit {...props} transform={transform}>
+        <Edit transform={transform}>
             ...
         </Edit>
     );
@@ -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 (
-        <Edit {...props} transform={transform}>
+        <Edit transform={transform}>
             ...
         </Edit>
     );
@@ -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 (
-        <Edit {...props} transform={transform}>
+        <Edit transform={transform}>
             ...
         </Edit>
     );
@@ -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 (
         <SelectInput
             choices={country ? toChoices(cities[country]) : []}
-            {...props}
+            source="cities"
         />
     );
 };
@@ -736,7 +733,7 @@ const OrderEdit = () => (
     <Edit>
         <SimpleForm>
             <SelectInput source="country" choices={toChoices(countries)} />
-            <CityInput source="cities" />
+            <CityInput />
         </SimpleForm>
     </Edit>
 );

docs/EditInDialogButton.md

@@ -381,17 +381,17 @@ const sexChoices = [
   { id: "female", name: "Female" },
 ];
 
-const CustomerForm = (props) => (
-  <SimpleForm defaultValues={{ firstname: "John", name: "Doe" }} {...props}>
+const CustomerForm = () => (
+  <SimpleForm defaultValues={{ firstname: "John", name: "Doe" }}>
     <TextInput source="first_name" validate={required()} fullWidth />
     <TextInput source="last_name" validate={required()} fullWidth />
     <DateInput source="dob" label="born" validate={required()} fullWidth />
     <SelectInput source="sex" choices={sexChoices} fullWidth />
   </SimpleForm>
 );
 
-const CustomerLayout = (props) => (
-  <SimpleShowLayout {...props}>
+const CustomerLayout = () => (
+  <SimpleShowLayout>
     <TextField source="first_name" fullWidth />
     <TextField source="last_name" fullWidth />
     <DateField source="dob" label="born" fullWidth />

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 => (
-    <Toolbar {...props}>
+const PostCreateToolbar = () => (
+    <Toolbar>
         <SaveButton />
         <SaveButton
             label="post.action.save_and_notify"
@@ -612,8 +612,8 @@ const dataProvider = {
 **Tip**: `<Edit>`'s transform prop function also get the `previousData` in its second argument:
 
 ```jsx
-const PostEditToolbar = props => (
-    <Toolbar {...props}>
+const PostEditToolbar = () => (
+    <Toolbar>
         <SaveButton />
         <SaveButton
             label="post.action.save_and_notify"

docs/Features.md

@@ -564,12 +564,12 @@ const toChoices = items => 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 (
         <SelectInput
             choices={country ? toChoices(cities[country]) : []}
-            {...props}
+            source="cities"
         />
     );
 };
@@ -578,7 +578,7 @@ const OrderEdit = () => (
     <Edit>
         <SimpleForm>
             <SelectInput source="country" choices={toChoices(countries)} />
-            <CityInput source="cities" />
+            <CityInput />
         </SimpleForm>
     </Edit>
 );

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 (
-        <Edit {...props}>
+        <Edit>
             <SimpleForm>
                 <ImageInput
                     source="images"

docs/Form.md

@@ -306,12 +306,12 @@ const cities = {
 };
 const toChoices = items => items.map(item => ({ id: item, name: item }));
 
-const CityInput = props => {
+const CityInput = () => {
     const country = useWatch({ name: 'country' });
     return (
         <SelectInput
             choices={country ? toChoices(cities[country]) : []}
-            {...props}
+            source="cities"
         />
     );
 };
@@ -320,7 +320,7 @@ const OrderEdit = () => (
     <Edit>
         <SimpleForm>
             <SelectInput source="country" choices={toChoices(countries)} />
-            <CityInput source="cities" />
+            <CityInput />
         </SimpleForm>
     </Edit>
 );

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<string, string[]> = {
 };
 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 (
         <SelectInput
             choices={country ? toChoices(cities[country]) : []}
-            {...props}
+            source="cities"
         />
     );
 };
@@ -491,7 +491,7 @@ const OrderEdit = () => (
     <Edit>
         <SimpleForm>
             <SelectInput source="country" choices={toChoices(countries)} />
-            <CityInput source="cities" />
+            <CityInput />
         </SimpleForm>
     </Edit>
 );

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 => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} {...props} />;
+const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />;
 
 export const PostList = () => (
     <List pagination={<PostPagination />}>

docs/ListTutorial.md

@@ -871,26 +871,21 @@ 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 => (
-    <RaPaginationActions
-        {...props}
+export const MyPaginationActions = () => (
+    <PaginationActions
         // these props are passed down to the Material UI <Pagination> component
         color="primary"
         showFirstButton
         showLastButton
     />
 );
 
-export const Pagination = () => <RaPagination ActionsComponent={PaginationActions} />;
+export const MyPagination = () => <Pagination ActionsComponent={MyPaginationActions} />;
 
 export const UserList = () => (
-    <List pagination={<Pagination />} >
+    <List pagination={<MyPagination />} >
         //...
     </List>
 );

docs/LongForm.md

@@ -269,8 +269,8 @@ import {
 } from 'react-admin';
 import { LongForm } from '@react-admin/ra-form-layout';
 
-const CustomToolbar = props => (
-    <RaToolbar {...props}>
+const CustomToolbar = () => (
+    <RaToolbar>
         <SaveButton label="Save and return" type="button" variant="outlined" />
     </RaToolbar>
 );