Skip to content

[Doc] Fix remaining <AutocompleteArrayInput> and <SelectArrayInput> create examples #10741

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
May 13, 2025
Merged

[Doc] Fix remaining <AutocompleteArrayInput> and <SelectArrayInput> create examples #10741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd3f2f1
[Doc] Fix remaining `<AutocompleteInput>` and `<SelectInput>` `create…
slax57 May 13, 2025
2a6db58
Merge remote-tracking branch 'origin/master' into fix-doc-autocomplet…
slax57 May 13, 2025
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
109 changes: 50 additions & 59 deletions docs/AutocompleteArrayInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,65 +147,68 @@ To allow users to add new options, pass a React element as the `create` prop. `<

{% raw %}
```jsx
import { CreateRole } from './CreateRole';

const choices = [
{ id: 'admin', name: 'Admin' },
{ id: 'u001', name: 'Editor' },
{ id: 'u002', name: 'Moderator' },
{ id: 'u003', name: 'Reviewer' },
];
import {
AutocompleteArrayInput,
Create,
CreateBase,
ReferenceArrayInput,
SimpleForm,
TextInput,
useCreateSuggestionContext
} from 'react-admin';
import CloseIcon from '@mui/icons-material/Close';
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
} from '@mui/material';

const UserCreate = () => (
<Create>
<SimpleForm>
<AutocompleteArrayInput
source="roles"
choices={choices}
create={<CreateRole />}
/>
<ReferenceArrayInput source="roles" reference="roles">
<AutocompleteArrayInput create={<CreateRole />} />
</ReferenceArrayInput>
</SimpleForm>
</Create>
);

// in ./CreateRole.js
import { useCreateSuggestionContext } from 'react-admin';
import {
Button,
Dialog,
DialogActions,
DialogContent,
TextField,
} from '@mui/material';

const CreateRole = () => {
const { filter, onCancel, onCreate } = useCreateSuggestionContext();
const [value, setValue] = React.useState(filter || '');

const handleSubmit = event => {
event.preventDefault();
const newOption = { id: value, name: value };
choices.push(newOption);
setValue('');
onCreate(newOption);
};

return (
<Dialog open onClose={onCancel}>
<form onSubmit={handleSubmit}>
<DialogContent>
<TextField
label="Role name"
value={value}
onChange={event => setValue(event.target.value)}
autoFocus
/>
</DialogContent>
<DialogActions>
<Button type="submit">Save</Button>
<Button onClick={onCancel}>Cancel</Button>
</DialogActions>
</form>
<DialogTitle sx={{ m: 0, p: 2 }}>Create Role</DialogTitle>
<IconButton
aria-label="close"
onClick={onCancel}
sx={theme => ({
position: 'absolute',
right: 8,
top: 8,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
<DialogContent sx={{ p: 0 }}>
<CreateBase
redirect={false}
resource="roles"
mutationOptions={{
onSuccess: onCreate,
}}
>
<SimpleForm defaultValues={{ name: filter }}>
<TextInput
source="name"
helperText={false}
autoFocus
/>
</SimpleForm>
</CreateBase>
</DialogContent>
</Dialog>
);
};
Expand Down Expand Up @@ -718,20 +721,14 @@ import {
ReferenceArrayInput,
SimpleForm,
TextInput,
useCreate,
useCreateSuggestionContext
} from 'react-admin';

import CloseIcon from '@mui/icons-material/Close';
import {
Box,
BoxProps,
Button,
Dialog,
DialogContent,
DialogTitle,
IconButton,
TextField,
} from '@mui/material';

const PostCreate = () => {
Expand All @@ -749,10 +746,6 @@ const PostCreate = () => {

const CreateTag = () => {
const { filter, onCancel, onCreate } = useCreateSuggestionContext();

const onTagCreate = tag => {
onCreate(tag);
};

return (
<Dialog open onClose={onCancel}>
Expand All @@ -774,9 +767,7 @@ const CreateTag = () => {
redirect={false}
resource="tags"
mutationOptions={{
onSuccess: tag => {
onTagCreate(tag);
},
onSuccess: onCreate,
}}
>
<SimpleForm defaultValues={{ name: filter }}>
Expand Down
52 changes: 19 additions & 33 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,22 @@ To allow users to add new options, pass a React element as the `create` prop. `<

{% raw %}
```jsx
import { CreateAuthor } from './CreateAuthor';
import {
Create,
CreateBase,
SimpleForm,
ReferenceInput,
AutocompleteInput,
TextInput,
useCreateSuggestionContext
} from 'react-admin';
import CloseIcon from '@mui/icons-material/Close';
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
} from '@mui/material';

const BookCreate = () => (
<Create>
Expand All @@ -165,25 +180,9 @@ const BookCreate = () => (
</Create>
);

// in ./CreateAuthor.js
import React from 'react';
import { CreateBase, SimpleForm, TextInput, useCreateSuggestionContext } from 'react-admin';
import CloseIcon from '@mui/icons-material/Close';
import {
Button,
Dialog,
DialogContent,
DialogTitle,
IconButton,
} from '@mui/material';

const CreateAuthor = () => {
const { filter, onCancel, onCreate } = useCreateSuggestionContext();

const onAuthorCreate = author => {
onCreate(author);
};

return (
<Dialog open onClose={onCancel}>
<DialogTitle sx={{ m: 0, p: 2 }}>Create Author</DialogTitle>
Expand All @@ -204,9 +203,7 @@ const CreateAuthor = () => {
redirect={false}
resource="authors"
mutationOptions={{
onSuccess: author => {
onAuthorCreate(author);
},
onSuccess: onCreate,
}}
>
<SimpleForm defaultValues={{ name: filter }}>
Expand Down Expand Up @@ -878,17 +875,13 @@ import {
ReferenceInput,
SimpleForm,
TextInput,
useCreate,
useCreateSuggestionContext,
} from 'react-admin';

import CloseIcon from '@mui/icons-material/Close';
import {
Box,
BoxProps,
Button,
Dialog,
DialogContent,
DialogTitle,
IconButton,
} from '@mui/material';

Expand All @@ -907,11 +900,6 @@ const PostCreate = () => {

const CreateCategory = () => {
const { filter, onCancel, onCreate } = useCreateSuggestionContext();

const onCategoryCreate = category => {
onCreate(category);
};


return (
<Dialog open onClose={onCancel}>
Expand All @@ -933,9 +921,7 @@ const CreateCategory = () => {
redirect={false}
resource="categories"
mutationOptions={{
onSuccess: category => {
onCategoryCreate(category);
},
onSuccess: onCreate,
}}
>
<SimpleForm defaultValues={{ title: filter }}>
Expand Down
Loading
Loading