Skip to content

[Doc] improve AutocompleteInput create example #10696

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 5 commits into from
Apr 25, 2025
Merged

[Doc] improve AutocompleteInput create example #10696

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9705dac
[Doc] improve AutocompleteInput create example
Cimanel Apr 24, 2025
03fb046
add autoFocus
Cimanel Apr 25, 2025
c92d76b
remove useless tip
Cimanel Apr 25, 2025
8eed531
update Creating New Choices doc and pluralize ressource
Cimanel Apr 25, 2025
7ee0796
remove extra char
Cimanel Apr 25, 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
82 changes: 44 additions & 38 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,65 +153,71 @@ To allow users to add new options, pass a React element as the `create` prop. `<

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

const PostCreate = () => (
const BookCreate = () => (
<Create>
<SimpleForm>
<TextInput source="title" />
<ReferenceInput source="category_id" reference="categories">
<AutocompleteInput create={<CreateCategory />} />
<ReferenceInput reference="authors" source="author">
<AutocompleteInput
create={<CreateAuthor />}
optionText="name"
/>
</ReferenceInput>
</SimpleForm>
</Create>
);

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

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

const handleSubmit = event => {
event.preventDefault();
create(
'categories',
{ data: { title: value } },
{
onSuccess: (data) => {
setValue('');
onCreate(data);
},
}
);
const onAuthorCreate = author => {
onCreate(author);
};

return (
<Dialog open onClose={onCancel}>
<form onSubmit={handleSubmit}>
<DialogContent>
<TextField
label="New category 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 Author</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="author"
mutationOptions={{
onSuccess: author => {
onAuthorCreate(author);
},
}}
>
<SimpleForm defaultValues={{ name: filter }}>
<TextInput source="name" helperText={false} />
<TextInput source="language" helperText={false} />
</SimpleForm>
</CreateBase>
</DialogContent>
</Dialog>
);
};
Expand Down
104 changes: 47 additions & 57 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,45 @@ import * as React from 'react';
import { Admin, AdminContext } from 'react-admin';

import {
CreateBase,
ListBase,
RecordContextProvider,
Resource,
TestMemoryRouter,
required,
useCreate,
useRecordContext,
ListBase,
useListContext,
RecordContextProvider,
TestMemoryRouter,
useRecordContext,
} from 'ra-core';

import AttributionIcon from '@mui/icons-material/Attribution';
import CloseIcon from '@mui/icons-material/Close';
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
import {
Box,
Button,
Dialog,
DialogContent,
DialogActions,
Button,
DialogContent,
DialogTitle,
IconButton,
InputAdornment,
Stack,
TextField,
Typography,
Box,
InputAdornment,
} from '@mui/material';
import { useFormContext } from 'react-hook-form';
import fakeRestProvider from 'ra-data-fakerest';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
import AttributionIcon from '@mui/icons-material/Attribution';
import { useFormContext } from 'react-hook-form';

import { useState } from 'react';
import { Create, Edit } from '../detail';
import { SimpleForm } from '../form';
import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput';
import { ReferenceInput } from './ReferenceInput';
import { TextInput } from './TextInput';
import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
import { useState } from 'react';

export default { title: 'ra-ui-materialui/input/AutocompleteInput' };

Expand Down Expand Up @@ -826,56 +830,42 @@ export const InsideReferenceInputWithError = () => (

const CreateAuthor = () => {
const { filter, onCancel, onCreate } = useCreateSuggestionContext();
const [name, setName] = React.useState(filter || '');
const [language, setLanguage] = React.useState('');
const [create] = useCreate();

const handleSubmit = event => {
event.preventDefault();
create(
'authors',
{
data: {
name,
language,
},
},
{
onSuccess: data => {
setName('');
setLanguage('');
onCreate(data);
},
}
);
const onAuthorCreate = author => {
onCreate(author);
};

return (
<Dialog open onClose={onCancel}>
<form onSubmit={handleSubmit}>
<DialogContent>
<Stack gap={4}>
<TextField
name="name"
label="The author name"
value={name}
onChange={event => setName(event.target.value)}
autoFocus
/>
<TextField
name="language"
label="The author language"
value={language}
onChange={event => setLanguage(event.target.value)}
autoFocus
/>
</Stack>
</DialogContent>
<DialogActions>
<Button type="submit">Save</Button>
<Button onClick={onCancel}>Cancel</Button>
</DialogActions>
</form>
<DialogTitle sx={{ m: 0, p: 2 }}>Create Author</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="author"
mutationOptions={{
onSuccess: author => {
onAuthorCreate(author);
},
}}
>
<SimpleForm defaultValues={{ name: filter }}>
<TextInput source="name" helperText={false} />
<TextInput source="language" helperText={false} />
</SimpleForm>
</CreateBase>
</DialogContent>
</Dialog>
);
};
Expand Down
Loading