You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"message": "Please import from @mui/material/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
27
-
}
28
-
]
29
-
}
25
+
"message": "Please import from @mui/material/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information",
26
+
},
27
+
{
28
+
"name": "@mui/icons-material",
29
+
"message": "Named import from @mui/icons-material should be avoided for performance reasons. Use a default import instead. E.g. `import Dashboard from '@mui/icons-material/Dashboard';` instead of `import { Dashboard } from '@mui/icons-material';`.See https://mui.com/material-ui/guides/minimizing-bundle-size/#development-environment for more information.",
30
+
},
31
+
{
32
+
"name": "lodash",
33
+
"message": "Named import from lodash should be avoided for performance reasons. Use a default import instead. E.g. `import merge from 'lodash/merge';` instead of `import { merge } from 'lodash';`.",
Copy file name to clipboardExpand all lines: docs/ArrayInput.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,6 +79,8 @@ Check [the `<SimpleFormIterator>` documentation](./SimpleFormIterator.md) for de
79
79
80
80
**Tip**: If you need to edit an array of *related* records, i.e. if the `items` above actually come from another resource, you should use a [`<ReferenceManyInput>`](./ReferenceManyInput.md) instead.
81
81
82
+
**Note**: Using [`shouldUnregister`](https://react-hook-form.com/docs/useform#shouldUnregister) should be avoided when using `<ArrayInput>` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the react-hook-form [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](https://marmelab.com/react-admin/Edit.html#transform) prop to manually clean the submitted values.
83
+
82
84
## Props
83
85
84
86
`<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`).
Access control and permissions allow you to restrict certain pages to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Authorization.md) documentation.
419
+
Access control and permissions allow you to restrict certain pages to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Permissions.md) documentation.
|`choices`| Required |`Object[]`| - | List of choices |
62
62
|`create`| Optional |`Element`|`-`| A React Element to render when users want to create a new choice |
63
-
|`createLabel`| Optional |`string`|`ra.action. create`| The label for the menu item allowing users to create a new choice. Used when the filter is empty |
64
-
|`createItemLabel`| Optional |`string`|`ra.action .create_item`| The label for the menu item allowing users to create a new choice. Used when the filter is not empty |
63
+
|`createLabel`| Optional |`string`|- | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty.|
64
+
|`createItemLabel`| Optional |`string`|`ra.action .create_item`| The label for the menu item allowing users to create a new choice. Used when the filter is not empty.|
65
65
|`debounce`| Optional |`number`|`250`| The delay to wait before calling the setFilter function injected when used in a ReferenceArray Input. |
66
66
|`emptyValue`| Optional |`any`|`''`| The value to use for the empty element |
67
67
|`filterToQuery`| Optional |`string` => `Object`|`q => ({ q })`| How to transform the searchText into a parameter for the data provider |
@@ -159,7 +159,7 @@ const choices = [
159
159
constUserCreate= () => (
160
160
<Create>
161
161
<SimpleForm>
162
-
<SelectArrayInput
162
+
<AutocompleteArrayInput
163
163
source="roles"
164
164
choices={choices}
165
165
create={<CreateRole />}
@@ -216,6 +216,37 @@ If you just need to ask users for a single string to create the new option, you
216
216
217
217
If you're in a `<ReferenceArrayInput>` or `<ReferenceManyToManyInput>`, the `handleSubmit` will need to create a new record in the related resource. Check the [Creating New Choices](#creating-new-choices) for an example.
218
218
219
+
## `createLabel`
220
+
221
+
When you set the `create` or `onCreate` prop, `<AutocompleteArrayInput>` lets users create new options.
222
+
You can use the `createLabel` prop to render an additional (disabled) menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
223
+
224
+
```jsx
225
+
<AutocompleteArrayInput
226
+
source="roles"
227
+
choices={choices}
228
+
create={<CreateRole />}
229
+
createLabel="Start typing to create a new item"
230
+
/>
231
+
```
232
+
233
+
## `createItemLabel`
234
+
235
+
If you set the `create` or `onCreate` prop, `<AutocompleteArrayInput>` lets users create new options. When the text entered by the user doesn't match any option, the input renders a "Create XXX" menu item at the bottom of the list.
236
+
237
+
You can customize the label of that menu item by setting a custom translation for the `ra.action.create_item` key in the translation files.
238
+
239
+
Or, if you want to customize it just for this `<AutocompleteArrayInput>`, use the `createItemLabel` prop:
240
+
241
+
```jsx
242
+
<AutocompleteArrayInput
243
+
source="roles"
244
+
choices={choices}
245
+
create={<CreateRole />}
246
+
createItemLabel="Add a new role: %{item}"
247
+
/>
248
+
```
249
+
219
250
## `debounce`
220
251
221
252
When used inside a [`<ReferenceArrayInput>`](./ReferenceArrayInput.md), `<AutocompleteArrayInput>` will call `dataProvider.getList()` with the current input value as filter after a delay of 250ms. This is to avoid calling the API too often while users are typing their query.
|`choices`| Optional |`Object[]`|`-`| List of items to autosuggest. Required if not inside a ReferenceInput. |
62
62
|`create`| Optional |`Element`|`-`| A React Element to render when users want to create a new choice |
63
-
|`createLabel`| Optional |`string`|`ra.action .create`| The label for the menu item allowing users to create a new choice. Used when the filter is empty |
64
-
|`createItemLabel`| Optional |`string`|`ra.action .create_item`| The label for the menu item allowing users to create a new choice. Used when the filter is not empty |
63
+
|`createLabel`| Optional |`string`|- | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty.|
64
+
|`createItemLabel`| Optional |`string`|`ra.action .create_item`| The label for the menu item allowing users to create a new choice. Used when the filter is not empty.|
65
65
|`debounce`| Optional |`number`|`250`| The delay to wait before calling the setFilter function injected when used in a ReferenceInput. |
66
66
|`emptyText`| Optional |`string`|`''`| The text to use for the empty element |
67
67
|`emptyValue`| Optional |`any`|`''`| The value to use for the empty element |
@@ -226,7 +226,7 @@ If you just need to ask users for a single string to create the new option, you
226
226
## `createLabel`
227
227
228
228
When you set the `create` or `onCreate` prop, `<AutocompleteInput>` lets users create new options.
229
-
You can use the `createLabel` prop to render an additional menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
229
+
You can use the `createLabel` prop to render an additional (disabled) menu item at the bottom of the list, that will only appear when the input is empty, inviting users to start typing to create a new option.
Copy file name to clipboardExpand all lines: docs/CanAccess.md
+55Lines changed: 55 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,4 +42,59 @@ const UserEdit = () => (
42
42
|`accessDenied`||`ReactNode`| - | The element displayed when users are denied access to the resource |
43
43
|`error`||`ReactNode`| - | The element displayed when an error occurs while calling `authProvider.canAccess`|
44
44
45
+
## Securing Custom Routes
46
+
47
+
By default, there is no authentication or authorization control on custom routes. If you need to restrict access to a custom route, wrap the content with `<CanAccess>`. Remember to check the authentication status before with `<Authenticated>`:
**Note**: You don't need to use `<CanAccess>` on the core react-admin page components (`<List>`, `<Create>`, `<Edit>`, `<Show>`) because they already have built-in access control.
98
+
99
+
**Note**: You don't need to use `<Authenticated>` on custom pages if your admin uses [`requireAuth`](./Admin.md#requireauth).
0 commit comments