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

[Doc] Fix various snippets containing props forwarding #9443

Merged
merged 2 commits into from
Nov 14, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
4 changes: 2 additions & 2 deletions docs/AccordionForm.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions docs/Buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?"
Expand Down Expand Up @@ -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 />}/>
Expand Down
14 changes: 7 additions & 7 deletions docs/Create.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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) {
Expand All @@ -366,7 +366,7 @@ export const UserCreate = (props) => {
return sanitizedData;
};
return (
<Create {...props} transform={transform}>
<Create transform={transform}>
...
</Create>
);
Expand Down Expand Up @@ -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"
/>
);
};
Expand All @@ -590,7 +590,7 @@ const OrderEdit = () => (
<Edit>
<SimpleForm>
<SelectInput source="country" choices={toChoices(countries)} />
<CityInput source="cities" />
<CityInput />
</SimpleForm>
</Edit>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/CreateInDialogButton.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
25 changes: 11 additions & 14 deletions docs/Edit.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand All @@ -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) {
Expand All @@ -603,7 +600,7 @@ export const UserEdit = (props) => {
return sanitizedData;
};
return (
<Edit {...props} transform={transform}>
<Edit transform={transform}>
...
</Edit>
);
Expand Down Expand Up @@ -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"
/>
);
};
Expand All @@ -736,7 +733,7 @@ const OrderEdit = () => (
<Edit>
<SimpleForm>
<SelectInput source="country" choices={toChoices(countries)} />
<CityInput source="cities" />
<CityInput />
</SimpleForm>
</Edit>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/EditInDialogButton.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
8 changes: 4 additions & 4 deletions docs/EditTutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions docs/Features.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
);
};
Expand All @@ -578,7 +578,7 @@ const OrderEdit = () => (
<Edit>
<SimpleForm>
<SelectInput source="country" choices={toChoices(countries)} />
<CityInput source="cities" />
<CityInput />
</SimpleForm>
</Edit>
);
Expand Down
4 changes: 2 additions & 2 deletions docs/FileInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions docs/Form.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
);
};
Expand All @@ -320,7 +320,7 @@ const OrderEdit = () => (
<Edit>
<SimpleForm>
<SelectInput source="country" choices={toChoices(countries)} />
<CityInput source="cities" />
<CityInput />
</SimpleForm>
</Edit>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand All @@ -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"
/>
);
};
Expand All @@ -491,7 +491,7 @@ const OrderEdit = () => (
<Edit>
<SimpleForm>
<SelectInput source="country" choices={toChoices(countries)} />
<CityInput source="cities" />
<CityInput />
</SimpleForm>
</Edit>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}>
Expand Down
15 changes: 5 additions & 10 deletions docs/ListTutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 PaginationActions = () => (
slax57 marked this conversation as resolved.
Show resolved Hide resolved
<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>
);
Expand Down
4 changes: 2 additions & 2 deletions docs/LongForm.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Loading
Loading